官方效果

最近看到一些人在用nicegui寫pyton界面看了一下官方文檔，嘗試安裝了一下,體驗了一下效果，確實還不錯。順便分析了一下它的基本原理。

直接看效果

from nicegui import ui
from nicegui.events import ValueChangeEventArguments

def show(event: ValueChangeEventArguments):
    name = type(event.sender).__name__
    ui.notify(f'{name}: {event.value}')

ui.button('Button', on_click=lambda: ui.notify('Click'))
with ui.row():
    ui.checkbox('Checkbox', on_change=show)
    ui.switch('Switch', on_change=show)
ui.radio(['A', 'B', 'C'], value='A', on_change=show).props('inline')
with ui.row():
    ui.input('Text input', on_change=show)
    ui.select(['One', 'Two'], value='One', on_change=show)
ui.link('And many more...', '/documentation').classes('mt-8')

ui.run()

重播00:16 / 00:16

原理分析

啟動后我發現他打印了一個日志，

NiceGUI ready to go on http://localhost:8080, and http://192.168.1.106:8080

接著系統默認的edge瀏覽器打開了

于是可以發現其實是啟動了一個瀏覽器

http://127.0.0.1:8080/

由此我們可以判斷nicegui的原理是將Python/ target=_blank class=infotextkey>Python代碼轉換成html去執行的。

使用python來完成界面布局

查看源代碼


<!DOCTYPE html>
<html>
  <head>
    <title>NiceGUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="/_nicegui/1.3.12/static/favicon.ico" rel="shortcut icon" />
    <link href="/_nicegui/1.3.12/static/nicegui.css" rel="stylesheet" type="text/css" />
    <link href="/_nicegui/1.3.12/static/fonts.css" rel="stylesheet" type="text/css" />
    
    <link href="/_nicegui/1.3.12/static/quasar.prod.css" rel="stylesheet" type="text/css" />
    
    <!-- prevent Prettier from removing this line -->
    
  </head>
  <body>
    <script src="/_nicegui/1.3.12/static/es-module-shims.js"></script>
    <script src="/_nicegui/1.3.12/static/socket.io.min.js"></script>
    
    <script src="/_nicegui/1.3.12/static/tAIlwindcss.min.js"></script>
    
    <!-- prevent Prettier from removing this line -->
    
    <script src="/_nicegui/1.3.12/static/vue.global.prod.js"></script>
    <script src="/_nicegui/1.3.12/static/quasar.umd.prod.js"></script>
    

    <script src="/_nicegui/1.3.12/static/lang/en-US.umd.prod.js"></script>
    <script type="importmap">
      {"imports": {"index":"/_nicegui/1.3.12/libraries/26e9f3a0290f18f1ab866f8d6faa7480/index.js","mermaid":"/_nicegui/1.3.12/libraries/a022d63bc2efb68f616955feada73028/mermaid.esm.min.mjs","three":"/_nicegui/1.3.12/libraries/b762210ea1a93dc0f46fb5b27705c9e0/three.module.js","CSS2DRenderer":"/_nicegui/1.3.12/libraries/76e9d2120ee202fa3a567f310e68de5f/CSS2DRenderer.js","CSS3DRenderer":"/_nicegui/1.3.12/libraries/76e9d2120ee202fa3a567f310e68de5f/CSS3DRenderer.js","DragControls":"/_nicegui/1.3.12/libraries/76e9d2120ee202fa3a567f310e68de5f/DragControls.js","OrbitControls":"/_nicegui/1.3.12/libraries/76e9d2120ee202fa3a567f310e68de5f/OrbitControls.js","STLLoader":"/_nicegui/1.3.12/libraries/76e9d2120ee202fa3a567f310e68de5f/STLLoader.js"}}
    </script>
    <style>*[data-joys] > div {background-color: AliceBlue; width: 10em; height: 10em; position: relative; }
 
<script type="text/x-template" id="tpl-joys"><div data-joys><div></div></div></script>
<script type="text/x-template" id="tpl-pl"><div data-pl></div></script>

    <div id="App"></div>
    <div id="popup">
      <span>Connection lost.</span>
      <span>Trying to reconnect...</span>
    </div>
    <script>
      function getElement(id) {
        const _id = id instanceof HTMLElement ? id.id : id;
        return window.app.$refs["r" + _id];
      }
    </script>
    <script type="module">
      const True = true;
      const False = false;
      const None = undefined;

      let app = Vue.createApp({
        data() {
          return {
            elements,
          };
        },
        render() {
          return renderRecursively(this.elements, 0);
        },
      
    </script>
  </body>
</html>

本質還是用vue實現的頁面

Demo源代碼分析

v = ui.checkbox('visible', value=True)

實現一個復選框，默認選中v alue=True

with ui.column().bind_visibility_from(v, 'value'):
        ui.slider(min=1, max=3).bind_value(demo, 'number')
        ui.toggle({1: 'A', 2: 'B', 3: 'C'}).bind_value(demo, 'number')
        ui.number().bind_value(demo, 'number')

組件對應關系如下

如何實現聯動呢

通過這個值與 checkbox綁定，來控制 colum容器的顯示與隱藏
v = ui.checkbox('visible', value=True)
ui.column().bind_visibility_from(v, 'value'):

    
class Demo:
    def __init__(self):
        self.number = 1

demo = Demo()

以下三個組件通過 demo這個對象 的number值進行數據綁定
  ui.slider(min=1, max=3).bind_value(demo, 'number')
    ui.toggle({1: 'A', 2: 'B', 3: 'C'}).bind_value(demo, 'number')
    ui.number().bind_value(demo, 'number')