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服务器来运用，布置起来也是十分的便利，下一次咱们介绍更多的根底组件。

本文由mdnice多渠道发布