开始第一个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服务器来使用，部署起来也是非常的方便，下一次我们介绍更多的基础组件。
