python remi 笔记（待续）

Remi是一个基于Python的GUI库，专门用于创建Web应用程序。它是一个轻量级的库，易于使用，支持Python 2.7和3.x版本。Remi提供了一个图形用户界面框架，使开发人员能够构建具有桌面应用程序级别的用户界面的Web应用程序。它还支持事件驱动编程，使开发人员可以轻松地为应用程序创建自定义事件和处理程序。除了基本的窗口和控件，Remi还支持嵌入其他Web内容，如HTML、CSS和JavaScript。

参考： 

1、https://github.com/rawpython/remi    #项目原地址 

2、https://www.wzcwzc.cool/post/e98df53e.html  

3、https://www.wzcwzc.cool/post/7cb2a69f.html

4、https://github.com/LightStarlight0/remi  #项目原地址 中文翻译

github上的 示例：

import remi.gui as gui
from remi import start, App

class MyApp(App):
    def __init__(self, *args):
        super(MyApp, self).__init__(*args)

    def main(self):
        container = gui.VBox(width=120, height=100)  #创建一个 VBox 容器
        self.lbl = gui.Label('Hello world!')  #创建一个 标签
        self.bt = gui.Button('Press me!') #创建一个按钮

        # setting the listener for the onclick event of the button
        # 为鼠标点击按钮创造一个监听事件
        self.bt.onclick.do(self.on_button_pressed)

        # appending a widget to another, the first argument is a string key
        # 添加一个部件, 第一个参数是必须的
        container.append(self.lbl)
        container.append(self.bt)

        # returning the root widget
        # 返回到根部件
        return container

    # listener function
    # 监听事件
    def on_button_pressed(self, widget):
        self.lbl.set_text('Button pressed!')
        self.bt.set_text('Hi!')

# starts the web server
#开启服务器
start(MyApp, port=8081)

一、容器

在remi 里网页的各种控件、元素，都需要放到容器里面（可能是这样）。

gui.Container  ：标准容器

# -*- coding:utf-8 -*-
import remi.gui as gui
from remi import start, App
#引入remi库

class MyApp(App):#创建MyApp类
    def __init__(self, *args):#初始化
        super(MyApp, self).__init__(*args)
    def main(self):#主程序
        self.Container1 = gui.Container(width='100%', height='100%', layout_orientation=gui.Container.LAYOUT_VERTICAL,
                                     margin= '0px auto', background = 'white')
                                     #width='100%', height='100%' 表示按网页的比例设置大小，也可以直接写数字如 width=480, height=200
                                     # layout_orientation=gui.Container.LAYOUT_VERTICAL ，表示容器内的元素 按垂直排列
                                     #layout_orientation=gui.Container.LAYOUT_HORIZONTAL ，表示容器内的元素 按横向排列
                                     #也可以直接使用  gui.HBox （横向）  或 gui.VBox（纵向）
                                     #margin= '0px auto' 居中
                                     #background = 'white' 背景色，颜色效果可以参考 https://www.w3schools.com/cssref/css_colors.php
                                     #也可以写作 style={'margin': '0px auto', 'background': 'Aqua'} ，用 style 传参
                                     # 属性 除了margin和background，其他 可以参考https://www.w3schools.com/cssref/index.php
        self.Container2 = gui.Container(width=480, height=200, layout_orientation=gui.Container.LAYOUT_HORIZONTAL,
                                     style={'margin': '0px auto', 'background': 'Aqua'})
        self.lb2 = gui.Label('Hello world!',width='20%', height='20%', margin='10px')#创建标签“Hello World”
        self.lb21 = gui.Label('yes',width='20%', height='20%', margin='10px')#创建标签“Hello World”
        self.Container2.append([self.lb2,self.lb21]) #将控件加到容器里面
        self.Container3 = gui.Container(width=480, height=300, layout_orientation=gui.Container.LAYOUT_VERTICAL,
                                     style={'margin': '0px auto', 'background': 'white'})
        self.lb3 = gui.Label('Hello world!',width='20%', height='20%', margin='10px')#创建标签“Hello World”
        self.Container3.append(self.lb3)

        self.Container1.append([self.Container2,self.Container3])  #将子容器加到 根容器里面
        #在 main() 里面一定要 return 根容器，作为初始页面
        return self.Container1

if __name__ == "__main__":
#开启服务器
    start(MyApp, debug=True, address='0.0.0.0', port=8081, start_browser=True, multiple_instance=True)