最近看到一些人在用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()启动后我发现他打印了一个日志，
NiceGUI ready to go on http://localhost:8080, and http://192.168.1.106:8080
接着系统默认的edge浏览器打开了
于是可以发现其实是启动了一个浏览器
http://127.0.0.1:8080/
由此我们可以判断nicegui的原理是将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 = 1demo = 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这个似乎更容易做出看好的界面。
本文采摘于网络，不代表本站立场，转载联系作者并注明出处：https://www.5amiao.com/baike/1694.html
