NiceGUI \u662f\u4e00\u4e2a\u57fa\u4e8e Python \u7684\u73b0\u4ee3 Web \u5e94\u7528\u6846\u67b6\uff0c\u5b83\u5141\u8bb8\u5f00\u53d1\u8005\u76f4\u63a5\u4f7f\u7528 Python \u6784\u5efa\u4ea4\u4e92\u5f0f Web \u754c\u9762\uff0c\u800c\u65e0\u9700\u7f16\u5199\u524d\u7aef\u4ee3\u7801\u3002\u4ee5\u4e0b\u662f NiceGUI \u7684\u4e3b\u8981\u529f\u80fd\u548c\u7279\u70b9\uff1a<\/p>\n\n\n\n
1.\u7b80\u5355\u6613\u7528\u7684 UI \u7ec4\u4ef6 \u63d0\u4f9b\u6309\u94ae\u3001\u6587\u672c\u6846\u3001\u4e0b\u62c9\u83dc\u5355\u3001\u6ed1\u5757\u3001\u56fe\u8868\u7b49\u5e38\u89c1 UI \u5143\u7d20 \u652f\u6301\u5e03\u5c40\u7ba1\u7406\uff08\u6c34\u5e73\u3001\u5782\u76f4\u3001\u5361\u7247\u5f0f\u7b49\uff09 \u53ef\u81ea\u5b9a\u4e49\u6837\u5f0f\u548c\u4ea4\u4e92\u884c\u4e3a
2. \u5b9e\u65f6\u4ea4\u4e92 \u652f\u6301\u53cc\u5411\u6570\u636e\u7ed1\u5b9a \u4e8b\u4ef6\u9a71\u52a8\u7f16\u7a0b\u6a21\u578b\uff08\u70b9\u51fb\u3001\u8f93\u5165\u53d8\u5316\u7b49\uff09 \u5b9e\u65f6\u66f4\u65b0 UI \u5185\u5bb9
3. \u6570\u636e\u53ef\u89c6\u5316 \u96c6\u6210 Plotly\u3001Matplotlib \u7b49\u56fe\u8868\u5e93 \u652f\u6301\u5b9e\u65f6\u6570\u636e\u56fe\u8868 \u53ef\u5c55\u793a 3D \u56fe\u5f62\u548c\u590d\u6742\u6570\u636e\u53ef\u89c6\u5316
4. \u591a\u5e73\u53f0\u652f\u6301 \u53ef\u4ee5\u4f5c\u4e3a Web \u5e94\u7528\u8fd0\u884c \u4e5f\u53ef\u4ee5\u6253\u5305\u4e3a\u684c\u9762\u5e94\u7528\uff08\u901a\u8fc7 PyInstaller \u7b49\u5de5\u5177\uff09 \u652f\u6301\u79fb\u52a8\u8bbe\u5907\u8bbf\u95ee
5. \u6269\u5c55\u6027 \u53ef\u96c6\u6210\u81ea\u5b9a\u4e49 JavaScript \u4ee3\u7801 \u652f\u6301\u4e0e\u5176\u4ed6 Python \u5e93\uff08\u5982 Pandas\u3001NumPy\uff09\u65e0\u7f1d\u534f\u4f5c \u53ef\u6269\u5c55\u81ea\u5b9a\u4e49\u7ec4\u4ef6<\/p>\n\n\n\n
\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684 NiceGUI \u5e94\u7528\u793a\u4f8b\uff0c\u5c55\u793a\u4e86\u57fa\u672c\u7684 UI \u7ec4\u4ef6\u548c\u4ea4\u4e92\u529f\u80fd\uff1a UI\u7ec4\u4ef6\u53ef\u8f93\u51faMarkdown\u3001HTML\u3001\u53ef\u8fd0\u884cscript\u811a\u672c<\/p>\n\n\n\n
from nicegui import ui, Client\n\nname = ui.input(label='\u4f60\u7684\u540d\u5b57')\nbutton = ui.button('\u6253\u62db\u547c', on_click=lambda: result.set_text(f'\u4f60\u597d\uff0c{name.value}\uff01'))\nresult = ui.label()\n\n# \u5d4c\u5165JavaScript\ndef run_js():\n # Execute JavaScript code\n ui.run_javascript('alert(\"\u8fd9\u662f\u6765\u81eaJavaScript\u7684\u5f39\u7a97\uff01\")')\n\n# \u5d4c\u5165JavaScript\ndef get_window_width():\n # Execute JavaScript to get window width\n width = ui.run_javascript('return window.innerWidth')\n ui.notify(f'\u7a97\u53e3\u5bbd\u5ea6: {width}px')\nwith ui.row():\n ui.button('\u8fd0\u884cJS', on_click=run_js)\n ui.button('\u83b7\u53d6\u7a97\u53e3\u5bbd\u5ea6', on_click=get_window_width)\n\n\n\n# \u5d4c\u5165HTML\u5185\u5bb9\nhtml_content = \"\"\"\n<div style=\"background-color:#f0f0f0; padding:10px; border-radius:5px;\">\n <h3>HTML\u5185\u5bb9\u5c55\u793a<\/h3>\n <p>\u8fd9\u662f\u4e00\u6bb5\u5d4c\u5165\u7684<strong>HTML<\/strong>\u4ee3\u7801<\/p>\n <button onclick=\"alert('HTML\u6309\u94ae\u88ab\u70b9\u51fb\uff01')\",color=\"blue\">HTML\u6309\u94ae<\/button>\n<\/div>\n\"\"\"\n\nui.html(html_content)\n\n# \u5d4c\u5165Markdown\u5185\u5bb9\nmarkdown_content = \"\"\"\n# Markdown\u793a\u4f8b\n\n\u8fd9\u662f\u4e00\u4e2a\u5c55\u793a**Markdown**\u529f\u80fd\u7684\u793a\u4f8b\uff1a\n\n1. \u5217\u8868\u98791\n2. \u5217\u8868\u98792\n3. \u5217\u8868\u98793\n\n> \u8fd9\u662f\u4e00\u6bb5\u5f15\u7528\n\n[NiceGUI\u5b98\u7f51](https:\/\/nicegui.io)\n\n\u4ee3\u7801\u793a\u4f8b\uff1a\n```python\ndef hello_world():\n print(\"Hello from Markdown!\")\naaa\n\nbbb\n\nccc\n\n\u8868\u683c1\uff1a\n|\u59d3\u540d | \u5e74\u9f84 |\u57ce\u5e02|\n|---|---|---|\n|\u5f20\u4e09| 25 | \u5317\u4eac|\n|\u674e\u56db |30 | \u4e0a\u6d77|\n\n\u8868\u683c2\uff1a\n| \u59d3\u540d | \u5e74\u9f84 | \u804c\u4e1a |\n| --- | --- | --- |\n| \u5f20\u4e09 | 28 | \u5de5\u7a0b\u5e08 |\n| \u674e\u56db | 32 | \u8bbe\u8ba1\u5e08 |\n| \u738b\u4e94 | 45 | \u4ea7\u54c1\u7ecf\u7406 |\n\n\"\"\"\nui.markdown(markdown_content)\n\nui.html('-------\u63a7\u4ef6\u7ed1\u5b9a\u5c5e\u6027-----------') \n\n \u7ed1\u5b9a\u5c5e\u6027\nclass Demo:\n def init(self):\n self.number = 1\ndemo = Demo()\n\nv = ui.checkbox('visible', value=True)\nwith ui.column().bind_visibility_from(v, 'value'):\n ui.slider(min=1, max=3).bind_value(demo, 'number')\n ui.toggle({1: 'A', 2: 'B', 3: 'C'}).bind_value(demo, 'number')\n ui.number().bind_value(demo, 'number')\n\n\nui.run()<\/code><\/pre>\n\n\n\n\u5e94\u7528\u573a\u666f
\u6570\u636e\u4eea\u8868\u677f\uff1a\u5b9e\u65f6\u663e\u793a\u548c\u5206\u6790\u6570\u636e
\u4ea4\u4e92\u5f0f\u5de5\u5177\uff1a\u6784\u5efa\u79d1\u5b66\u8ba1\u7b97\u3001\u5de5\u7a0b\u6216\u6570\u636e\u5206\u6790\u5de5\u5177
\u5feb\u901f\u539f\u578b\u5f00\u53d1\uff1a\u65e0\u9700\u524d\u7aef\u77e5\u8bc6\u5373\u53ef\u5feb\u901f\u6784\u5efa Web \u5e94\u7528\u539f\u578b
\u684c\u9762\u5e94\u7528\u66ff\u4ee3\u65b9\u6848\uff1a\u4f7f\u7528 Web \u6280\u672f\u6784\u5efa\u8de8\u5e73\u53f0\u684c\u9762\u5e94\u7528<\/p>\n\n\n\n
NiceGUI \u7279\u522b\u9002\u5408 Python \u5f00\u53d1\u8005\u5feb\u901f\u6784\u5efa\u529f\u80fd\u4e30\u5bcc\u7684 Web \u754c\u9762\uff0c\u5c24\u5176\u5728\u6570\u636e\u79d1\u5b66\u548c\u81ea\u52a8\u5316\u9886\u57df\u6709\u5f88\u5927<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"