Flexx UI框架入门：Widget基础教程-优快云博客

Flexx UI框架入门：Widget基础教程

flexx Write desktop and web apps in pure Python 项目地址: https://gitcode.com/gh_mirrors/fl/flexx

Flexx是一个强大的Python UI框架，可以用于创建桌面和Web应用程序。本文将深入讲解Flexx中的Widget基础知识，帮助开发者快速上手构建用户界面。

什么是Widget？

在Flexx中，Widget是所有UI组件的基础类。它类似于其他UI框架中的"控件"或"组件"概念。Widget可以是最简单的按钮，也可以是包含多个子组件的复杂容器。

创建第一个Widget

让我们从一个简单的例子开始：

from flexx import flx

class Example(flx.Widget):
    def init(self):
        flx.Button(text='hello')
        flx.Button(text='world')

这段代码创建了一个包含两个按钮的简单界面。需要注意的是，我们使用了init()方法而不是__init__()，因为Flexx会在初始化过程的适当时机调用init()方法。

布局管理

Flexx提供了多种布局Widget来帮助组织界面元素。例如，HBox可以水平排列子组件：

from flexx import flx

class Example(flx.Widget):
    def init(self):
        with flx.HBox():
            flx.Button(text='hello', flex=1)
            flx.Button(text='world', flex=2)

这里的flex参数决定了子组件在可用空间中的分配比例。上例中，"world"按钮将获得两倍于"hello"按钮的空间。

结构化Widget构建

Flexx支持使用Python的上下文管理器语法来清晰地表达Widget的层次结构：

from flexx import flx

class Example(flx.Widget):
    def init(self):
        with flx.HSplit():
            flx.Button(text='foo')
            with flx.VBox():
                flx.Widget(style='background:red;', flex=1)
                flx.Widget(style='background:blue;', flex=1)

这种写法使得UI结构一目了然，HSplit创建水平分割，内部包含一个按钮和一个垂直盒子(VBox)，后者又包含两个不同颜色的Widget。

将Widget转换为应用

要将Widget转换为实际应用，只需将其包装在App类中：

from flexx import flx

class Example(flx.Widget):
    def init(self):
        flx.Label(text='hello world')

app = flx.App(Example)
app.export('example.html')  # 导出为HTML文件
app.launch('browser')      # 在浏览器中打开
flx.run()                  # 进入主循环

Flexx支持多种运行方式，包括桌面应用、Web应用、导出为独立HTML等。

Python风格与Web风格的Widget开发

Flexx支持两种主要的Widget开发方式：

Python风格：通过继承flx.Widget或flx.PyWidget创建组件，这种方式更适合Python开发者。
Web风格：类似于React的方式，通过_create_dom和_render_dom方法直接操作DOM元素：

from flexx import flx

class Example(flx.Widget):
    name = flx.StringProp('John Doe', settable=True)
    age = flx.IntProp(22, settable=True)

    @flx.action
    def increase_age(self):
        self._mutate_age(self.age + 1)

    def _render_dom(self):
        return [flx.create_element('span', {}, 
                    'Hello', flx.create_element('b', {}, self.name), '! '),
                flx.create_element('span', {},
                    'I happen to know that your age is %i.' % self.age),
                flx.create_element('br'),
                flx.create_element('button', {'onclick': self.increase_age},
                    'Next year ...')
                ]

Web风格的开发方式更接近传统前端开发，适合有Web开发经验的开发者。