开始第一个Flet应用

Flet是基于Flutter的UI框架，但是我们不需要熟悉Flutter，也不需要会前端，只要具备Python面向对象编程基础就可以了。当然我本人是不会Flutter的，所以也没法对比Flet和Flutter，虽然说不需要我们会前端，但是有一些布局相关的东西还是会写前端概念会比较好理解。

安装

Flet需要Python3.7及以上版本，直接使用Pip就可以安装

pip install flet

基础结构

安装好了以后，我们看一个最基础的Flet应用结构：

import flet
from flet import Page

def main(page: Page):
    page.add(Text("Hello, world!"))

flet.app(target=main)

使用flet.app创建一个应用程序，将函数main作为它的入口点，page就相当于一个画布，每一个应用程序都会将画布实例传递给我们的入口函数。运行以上程序后，我们会发现，它不仅会启动一个客户端，还会启动一个web服务器。

我们可以通过在启动命令中修改参数来决定是否只启用web服务器。

flet.app(target=main, view=flet.WEB_BROWSER)

默认情况下它会打开桌面应用和web服务器，监听随机端口，我们可以通过参数指定端口

flet.app(target=main, view=flet.WEB_BROWSER, port=8800)

但是这只支持本机访问，可以通过把host设置为0.0.0.0来对外提供服务

flet.app(target=main, host='0.0.0.0', port=8800)

控件的使用

用户界面由控件组成，如果要使控件对用户可见，必须将它们添加到其他控件中，页面Page是最上面的控件，所有的控件嵌套在一起，就像HTML中的DOM树一样，而Page就是根节点。

所谓的控件只是普通的Python类，通过设置参数创建一个实例，就像下面这样：

t = Text(value="Hello, world!", color="green")

控件显示

要在页面上展示它，就把它添加到页面控件列表中，然后通过page.update来通知页面更新渲染。

import flet
from flet import Page, Text

def main(page: Page):
    t = Text(value="Hello, world!", color="green")
    page.add(t)

flet.app(target=main)

控件更新

添加完控件以后还可以对它的属性进行修改，但是要注意对控件的修改并不是实时生效的，必须调用page.update通知页面主动进行重绘，这样的好处也是提高页面的渲染速度，降低频繁修改导致的渲染异常。我们做一下如下修改：

import flet
from flet import Page, Text

def main(page: Page):
    t = Text(value="Hello, world!", color="green")
    page.add(t)
    
    for i in range(10):
    t.value = f"Step {i}"
    page.update()
    sleep(1)

flet.app(target=main)

容器控件

某些控件是“容器”控件，其中可以包含其他控件，比如Row控件允许朱行排列其他控件

page.add(
    Row(controls=[
        Text("A"),
        Text("B"),
        Text("C")
    ])
)

交互控件

除了一些展示类的控件外，还有一些需要和用户交互的组件，例如按钮、输入框等，下面我们展示一个混合的示例：

import flet
from flet import Page, Checkbox, ElevatedButton, Row, TextField

def main(page: Page):
    new_task = TextField(hint_text="Whats needs to be done?", width=300)

    def add_clicked(e):
        page.add(Checkbox(label=new_task.value))

    page.add(Row([new_task, ElevatedButton("Add", on_click=add_clicked)]))

TextField是输入框组件，ElevatedButton是按钮组件，输入框组件可以接收输入值，通过组件对象中的value属性可以拿到输入的值，按钮组件可以接收鼠标点击事件，点击事件可以通过回调函数来处理，我们在点击事件中向页面添加多选框。

控件引用

控件是Python类对象，要访问其属性，我们需要保留对这些对象的变量，通过类的实例对象来访问控件的属性。看以下示例：

import flet
from flet import Column, ElevatedButton, Text, TextField

def main(page):

    first_name = TextField(label="First name", autofocus=True)
    last_name = TextField(label="Last name")
    greetings = Column()

    def btn_click(e):
        greetings.controls.append(Text(f"Hello, {first_name.value} {last_name.value}!"))
        first_name.value = ""
        last_name.value = ""
        page.update()
        first_name.focus()

    page.add(
        first_name,
        last_name,
        ElevatedButton("Say hello!", on_click=btn_click),
        greetings,
    )

flet.app(target=main)

实际上我们在上面已经使用过控件引用了。这里我们先创建了三个控件，两个输入框控件，一个列容器控件，我们在按钮的点击事件中，把名称设置给Text文本控件，然后添加到列容器中，最后要调用page.update来刷新页面，才能正常显示出来。

除了直接引用控件实例对象以外，Flet还为我们提供了另一种控件对象引用方式，看一下示例：

import flet
from flet import Column, ElevatedButton, Text, TextField
from flet.ref import Ref

def main(page):

    first_name = Ref[TextField]()  # 定义输入框引用变量
    last_name = Ref[TextField]()   
    greetings = Ref[Column]()  # 定义列容器引用变量

    def btn_click(e):
        greetings.current.controls.append(
            Text(f"Hello, {first_name.current.value} {last_name.current.value}!")
        )
        first_name.current.value = ""
        last_name.current.value = ""
        page.update()
        first_name.current.focus()

    page.add(
        TextField(ref=first_name, label="First name", autofocus=True),
        TextField(ref=last_name, label="Last name"),
        ElevatedButton("Say hello!", on_click=btn_click),
        Column(ref=greetings),
    )

flet.app(target=main)

通过Ref来定义一种控件的引用，然后在控件创建的使用赋值给ref参数，但是在使用Ref变量的时候需要通过current变量来访问到实际的控件对象，这种方式是借鉴React的想法。在这个示例中我们看起来比较繁琐，实际上它的使用场景是把页面和逻辑处理分离开，像上面的那一个例子，first_name直接引用控件对象，这种方式就会导致控件的布局比较分散，而且属性设置也分散开了，而下面这种方式，我们定义的first_name只标明是TextField的引用，对于实际的组件以及组件的属性这里是不关心的，采用这种方式，我们就可以把控件的引用和页面布局都集中在一起。

总结

上面我们大致介绍了Flet的整体结构和一些使用概念，就布局方式而言它和前端非常相像，我觉得它最大的好处是可以同时展示桌面端和web端，既可以在本机使用，也可以让别人通过网页使用类似桌面端的程序，一举两得，满足了更多的需求，而且如果我们仅把它作为一个web服务器来使用，部署起来也是非常的方便，下一次我们介绍更多的基础组件。