Python界面库NiceGui体验与原理分析

2023-08-26 今日头条洪较瘦不着调退役it人

官方效果

最近看到一些人在用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')

总结：

nicegui是通过python编写页面布局代码，最后生成的是一个web网页，其实本质是通过vue这个框架实现的一些效果，当然其实就是JAVAScript，html，css技术

不过相比传统的gui这个似乎更容易做出看好的界面。