{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# NiceGUI 简介\n",
    "\n",
    "```{topic} 概述\n",
    "通过按钮、对话框、3D场景、图表等与 Python 进行交互。\n",
    "\n",
    "[NiceGUI](https://nicegui.io) 处理了 Web 开发的细节，让你专注于编写各种应用的 Python 代码，包括机器人技术、物联网解决方案、智能家居自动化和机器学习。NiceGUI 专为与连接的外部设备（如网络摄像头和 IoT 设置中的 GPIO 引脚）顺畅工作而设计，简化了在一个地方管理所有代码的过程。\n",
    "\n",
    "NiceGUI 学习曲线平缓，对初学者友好，并为有经验的用户提供高级定制功能，确保基本任务的简单性和复杂项目的可行性。\n",
    "```\n",
    "\n",
    "NiceGUI 是开源的 Python 库，用于编写在浏览器中运行的图形用户界面。它具有非常平缓的学习曲线，同时仍提供高级定制选项。NiceGUI 遵循后端优先的理念：它处理所有 web 开发细节。您可以专注于编写 Python 代码。这使得它非常适合各种项目，包括短脚本、仪表板、机器人项目、物联网解决方案、智能家居自动化和机器学习。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 基本概念\n",
    "NiceGUI 提供了各种 UI 组件（或元素），如按钮、滑块、文本、图像、图表等等。你的应用将这些组件组装成页面。当用户与页面上的某个项目交互时，NiceGUI 会触发事件（或动作）。你需要定义处理每个事件的代码，比如当用户点击名为 \"Go\" 的按钮时要执行的操作。\n",
    "\n",
    "组件通过布局在页面上进行排列。布局提供诸如网格、标签页、轮播图、展开菜单以及其他用于排列组件的工具。许多组件都与你代码中的数据对象（模型）相关联，当值发生变化时，它会自动更新用户界面。\n",
    "\n",
    "样式和外观可以通过多种方式控制。NiceGUI 接受某些样式的可选参数，例如按钮上的图标。其他样式可以用你稍后将学习到的函数，如 `.styles`、`.classes` 或 `.props` 来设置。像颜色和字体这样的全局样式可以用专用属性来设置。或者如果你更喜欢，几乎任何内容都可以用 CSS 来设置样式。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 动作、事件和任务\n",
    "NiceGUI 使用了异步/等待的事件循环来处理并发，这种方式资源效率高，并且有一个很大的好处，就是无需担心线程安全。这一部分展示了如何处理用户输入和其他事件，比如定时器和键盘绑定。同时，它还描述了一些辅助函数，用于将长时间运行的任务包装在异步函数中，以保持 UI 的响应性。请记住，所有的 UI 更新都必须在主线程上与其事件循环一起发生。\n",
    "\n",
    "## 实现\n",
    "NiceGUI 是通过 HTTP 服务器（FastAPI）提供的 HTML 组件来实现的，即使是对于原生窗口。如果你已经了解 HTML，一切都会感觉非常熟悉。如果你不了解 HTML，也没关系！NiceGUI 抽象了细节，因此你可以专注于创建美观的界面，而不必担心它们是如何实现的。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 运行 NiceGUI 应用\n",
    "部署 NiceGUI 有几种选项。默认情况下，NiceGUI 在本地主机上运行一个服务器，并在本地机器上作为一个私有网页运行你的应用。以这种方式运行时，你的应用会出现在一个网页浏览器窗口中。你也可以在独立于网页浏览器的原生窗口中运行 NiceGUI。或者你可以在一个处理多个客户端的服务器上运行 NiceGUI - [NiceGUI 网站](https://nicegui.io/documentation)就是由 NiceGUI 提供的。\n",
    "\n",
    "在使用组件创建了你的应用程序页面之后，你调用 `ui.run()` 来启动 NiceGUI 服务器。`ui.run` 的可选参数可以设置像网络地址和服务器绑定的端口、应用是否以原生模式运行、初始窗口大小以及其他许多选项。\n",
    "\n",
    "## 定制\n",
    "如果你在应用中想要更多的定制，你可以使用底层的 Tailwind 类和 Quasar 组件来控制你的组件的样式或行为。你还可以通过对现有的 NiceGUI 组件进行子类化或者从 Quasar 导入新的组件来扩展可用的组件。所有这些都是可选的。NiceGUI 默认提供了你所需的一切，用来创建现代、时尚、响应式的用户界面。"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}