css样式固定表头表体可以滑动_不会Html、JavaScript、CSS，怎么办？有python的Remi库...

1 说明：

=====

1.1 如果不会ｗｅｂ前端的html、JavaScript、CSS的知识怎么办？无所不能的python可以做到。

1.2 Remi是一个用于Python应用程序的GUI库，它将应用程序的界面转换为HTML，以便在Web浏览器中呈现。

1.3 这将删除特定于平台的依赖项，并允许您使用Python轻松开发跨平台应用程序！

2 准备：

=====

2.1 官网地址：

https://github.com/dddomodossola/remihttps://remi.readthedocs.io/en/latest/

2.2 环境：

华为笔记本电脑、深度deepin-linux操作系统、谷歌浏览器、python3.8和微软vscode编辑器。

2.3 安装：

pip install remi#本机安装sudo pip3.8 install remisudo pip3.8 install -i https://mirrors.aliyun.com/pypi/simple remi

3 Hello world：

==========

3.1 代码：注释版

import remi.gui as guifrom remi import start, App#定义类class MyApp(App):    def __init__(self, *args):        super(MyApp, self).__init__(*args)#以上3行代码，固定初始化        def main(self):        #实例化一个VBox，大小设置        wid = gui.VBox(width=300, height=200)        #窗口的标签label=显示文本，大小比例法设置        # 注意代表换行，但需要配合style={"white-space":"pre"}，才起作用        #preserves newline==保留换行符        self.lbl = gui.Label('Hello World', width='80%', height='50%',style={"white-space":"pre"})        #按钮和名称、大小设置，支持中文        self.bt = gui.Button('Press me=点击我!', width=200, height=30)        #绑定按钮的点击事件，调用函数        self.bt.onclick.do(self.on_button_pressed)        #adding the widgets to the main container        #将小部件添加到主容器wid，有时候上面实例化用container=主容器        wid.append(self.lbl)        wid.append(self.bt)        return wid    # listener function==监听功能    #调用点击按钮函数；emitter==发射器    def on_button_pressed(self, emitter):        self.lbl.set_text('Hello World!')        if __name__ == "__main__":    # starts the webserver    # 主要参数    # start(MyApp,address='127.0.0.1', port=8081, multiple_instance=False,enable_file_cache=True, update_interval=0.1, start_browser=True)    #start(MyApp, debug=True, address='0.0.0.0', port=0)  #本机测试地址改动无效，为默认地址    start(MyApp, debug=True)  #端口指定无效，也不是默认8081，估计本机端口已经被占用

3.2 操作和效果：

4 Bootstrap：

=========

4.1 代码：bootstrap.py

import remi.gui as guifrom remi import start, Appclass MyApp(App):    def __init__(self, *args):        super(MyApp, self).__init__(*args)    def main(self):        #引入在线Bootstrap的css文件        my_css_head = """                        """        #引入在线Bootstrap的js文件        my_js_head = """                        """        self.page.children['head'].add_child('mycss', my_css_head)        self.page.children['head'].add_child('myjs', my_js_head)       #主窗口实例化，定义大小和样式        main_container = gui.VBox(width='500px', height='500px', style={'margin':'0px auto','padding':'10px'})        #label=标签        self.lbl = gui.Label("Label with Lock Icon=带锁图标的标签")        #样式选择        self.lbl.add_class("glyphicon glyphicon-lock label label-primary")        #输入框        self.tf = gui.TextInput(hint='Your Input')        #样式选择        self.tf.add_class("form-control input-lg")        #下拉选择框        self.dd = gui.DropDown(width='200px')        #字体大小        self.dd.style.update({'font-size':'large'})        #样式选择        self.dd.add_class("form-control dropdown")        #下拉框内容选择        self.item1 = gui.DropDownItem("First Choice")        self.item2 = gui.DropDownItem("Second Item")        #定义self的功能，目前未定义        self.dd.append(self.item1,'item1')        self.dd.append(self.item2,'item2')                     #Table=表格，第一个是表头        myList = [  ('ID','Lastname','Firstname','邮编','城市'),                    ('1','Pan','Peter','888888','上海'),                    ('2','Sepp','Schmuck','123456','北京')  ]        #表格设置，内容，大小        self.tbl = gui.Table.new_from_list(content=myList,width='400px',height='100px',margin='10px')        #样式选择        self.tbl.add_class("table table-striped")        #按钮设置        self.bt1 = gui.Button("OK", )        #是Bootstrap样式 Class:  btn-success        self.bt1.add_class("btn-success")                           self.bt2 = gui.Button("Abbruch",)        #Bootstrap Class:  btn btn-danger        self.bt2.add_class("btn-danger")                                        #Build up the gui，主窗口挂载下面项目        main_container.append(self.lbl,'lbl')        main_container.append(self.tf,'tf')        main_container.append(self.dd,'dd')        main_container.append(self.tbl,'tbl')        main_container.append(self.bt1,'btn1')        main_container.append(self.bt2,'btn2')                return main_container    if __name__ == "__main__":    # starts the webserver    start(MyApp, debug=True)

4.2 操作和效果图：

5 tabbox：

=======

5.1 代码：

import remi.gui as guifrom remi import start, Appclass MyApp(App):    def __init__(self, *args):        super(MyApp, self).__init__(*args)    def main(self):        #按钮        b1 = gui.Button('Show second tab', width=200, height=30)        #表格框        tb = gui.TabBox(width='80%')        tb.append(b1, 'First')                b2 = gui.Button('Show third tab', width=200, height=30)        #tb.add_tab(b2, 'Second', None)        tb.add_tab(b2, 'Second')        b3 = gui.Button('Show first tab', width=200, height=30)        #tb.add_tab(b3, 'Third', None)        tb.add_tab(b3, 'Third')        #3种方法        b1.onclick.do(self.on_bt1_pressed, tb, b2)        b2.onclick.do(self.on_bt2_pressed, tb, 'Third')        b3.onclick.do(self.on_bt3_pressed, tb, 0)        return tb        #按钮功能的定义，3种功能    def on_bt1_pressed(self, widget, tabbox, refWidgetTab):        tabbox.select_by_widget(refWidgetTab)    def on_bt2_pressed(self, widget, tabbox, refWidgetTabName):        tabbox.select_by_name(refWidgetTabName)        def on_bt3_pressed(self, widget, tabbox, tabIndex):        tabbox.select_by_index(tabIndex)if __name__ == "__main__":    #网页标题，standalone=False默认是不允许    start(MyApp, , standalone=False)

5.2 操作和效果图：

６standalone：

＝＝＝＝＝＝

6.1 代码： mian.py

from remi import start, App＃将 bootstrap.py脚本放在本代码mian.py同一个目录下from bootstrap import MyAppif __name__ == "__main__":    start(MyApp, standalone=True)

6.2 代码：bootstrap.py＝４．１所指定代码：

6.3　注意启动网页服务器默认为不启动(false)，需要启动则为standalone=True。

6.4 操作和效果图：

把ｗｅｂ网页变成一个ａｐｐ的ＧＵＩ

７　附一张ｇｉｆ：

代码省略

＝＝＝自己整理并分享＝＝＝

喜欢的人，可以点赞、关注、评论、转发和收藏。