NiceGui我是一个新人,如何能体会它的用法找个小例子修改实现自己的想法
在网上看到了一个哥们实现的百度首页的功能,于是我把代码copy下来发现代码并不能适应,主要是nicegui的包已经升级了,原来 的代码已经无法使用,直接报红了。
原作者蝗代码
import nicegui
nicegui.init('百度首页生成器')
with nicegui.column():
with nicegui.style('background-color: #fff; padding: 20px;'):
with nicegui.row():
nicegui.image('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
with nicegui.style('padding-left: 20px;'):
with nicegui.column():
nicegui.text('新闻')
nicegui.text('hao123')
nicegui.text('地图')
nicegui.text('视频')
nicegui.text('贴吧')
with nicegui.row():
with nicegui.style('padding-top: 20px;'):
nicegui.textbox('搜索框', style='width: 400px; height: 40px; font-size: 20px;')
nicegui.button('百度一下', style='height: 40px; font-size: 20px;')
nicegui.run()
作者:游走的影子
链接:https://juejin.cn/post/7247901054238179365
来源:*土稀**掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
很可惜,已经 不能运行了。因为nicegui已经变了
于是看了这个代码的目的,自己进行修改
看看我做的百度是怎么样子的

from nicegui import ui
with ui.row().classes("self-center").style('background-color: #fff; padding: 20px;'):
ui.image('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
with ui.row().classes("self-center"):
ui.label('新闻')
ui.label('hao123')
ui.label('地图')
ui.label('视频')
ui.label('贴吧')
with ui.row().classes("self-center"):
ui.input('输入关键字').style('width: 400px; height: 20px; font-size: 20px;')
ui.button('百度一下').style('height: 40px; font-size: 20px;\
background-color:red;')
ui.run()
完整的的代码如下
解决了哪些疸
- 如何找到 对应 的组件
- 如何让组件从纵向排列转换到 横向
- 组件的内容是如何居中的
- 组件的整体布局应该怎么规范
这里面涉及到如何利用css框架对页面内容进行布局,其实nicegui看起来简单,实际上单一 的python知识 是不能掌握这个框架的。
NiceGui中的布局组件是如何的。
每个框架 中组件是如何布局这个是关键tkinter中的pack place等其实写起来很麻烦,特别 是复杂的。其实的框架如pyqt或者有UI设计器,但是在我看来这些都不如vksual basic delphi或者wpf winform来的方便。
毕竟python作复杂界面还是很花时间的。