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