开始第一个Flet应用

　　Flet是基于Flutter的UI框架，但是我们不需要熟悉Flutter，也不需要会前端，只要具备Python面向对象编程基础就可以了。当然我本人是不会Flutter的，所以也没法对比Flet和Flutter，虽然说不需要我们会前端，但是有一些布局相关的东西还是会写前端概念会比较好理解。安装
　　Flet需要Python3。7及以上版本，直接使用Pip就可以安装pipinstallflet基础结构
　　安装好了以后，我们看一个最基础的Flet应用结构：importfletfromfletimportPagedefmain（page：Page）：page。add（Text（Hello，world！））flet。app（targetmain）
　　使用flet。app创建一个应用程序，将函数main作为它的入口点，page就相当于一个画布，每一个应用程序都会将画布实例传递给我们的入口函数。运行以上程序后，我们会发现，它不仅会启动一个客户端，还会启动一个web服务器。
　　我们可以通过在启动命令中修改参数来决定是否只启用web服务器。flet。app（targetmain，viewflet。WEBBROWSER）
　　默认情况下它会打开桌面应用和web服务器，监听随机端口，我们可以通过参数指定端口flet。app（targetmain，viewflet。WEBBROWSER，port8800）
　　但是这只支持本机访问，可以通过把host设置为0。0。0。0来对外提供服务flet。app（targetmain，host0。0。0。0，port8800）控件的使用
　　用户界面由控件组成，如果要使控件对用户可见，必须将它们添加到其他控件中，页面Page是最上面的控件，所有的控件嵌套在一起，就像HTML中的DOM树一样，而Page就是根节点。
　　所谓的控件只是普通的Python类，通过设置参数创建一个实例，就像下面这样：tText（valueHello，world！，colorgreen）控件显示
　　要在页面上展示它，就把它添加到页面控件列表中，然后通过page。update来通知页面更新渲染。importfletfromfletimportPage，Textdefmain（page：Page）：tText（valueHello，world！，colorgreen）page。add（t）flet。app（targetmain）
　　控件更新
　　添加完控件以后还可以对它的属性进行修改，但是要注意对控件的修改并不是实时生效的，必须调用page。update通知页面主动进行重绘，这样的好处也是提高页面的渲染速度，降低频繁修改导致的渲染异常。我们做一下如下修改：importfletfromfletimportPage，Textdefmain（page：Page）：tText（valueHello，world！，colorgreen）page。add（t）foriinrange（10）：t。valuefStep｛i｝page。update（）sleep（1）flet。app（targetmain）
　　容器控件
　　某些控件是容器控件，其中可以包含其他控件，比如Row控件允许朱行排列其他控件page。add（Row（controls〔Text（A），Text（B），Text（C）〕））
　　交互控件
　　除了一些展示类的控件外，还有一些需要和用户交互的组件，例如按钮、输入框等，下面我们展示一个混合的示例：importfletfromfletimportPage，Checkbox，ElevatedButton，Row，TextFielddefmain（page：Page）：newtaskTextField（hinttextWhatsneedstobedone？，width300）defaddclicked（e）：page。add（Checkbox（labelnewtask。value））page。add（Row（〔newtask，ElevatedButton（Add，onclickaddclicked）〕））
　　TextField是输入框组件，ElevatedButton是按钮组件，输入框组件可以接收输入值，通过组件对象中的value属性可以拿到输入的值，按钮组件可以接收鼠标点击事件，点击事件可以通过回调函数来处理，我们在点击事件中向页面添加多选框。
　　控件引用
　　控件是Python类对象，要访问其属性，我们需要保留对这些对象的变量，通过类的实例对象来访问控件的属性。看以下示例：importfletfromfletimportColumn，ElevatedButton，Text，TextFielddefmain（page）：firstnameTextField（labelFirstname，autofocusTrue）lastnameTextField（labelLastname）greetingsColumn（）defbtnclick（e）：greetings。controls。append（Text（fHello，｛firstname。value｝｛lastname。value｝！））firstname。valuelastname。valuepage。update（）firstname。focus（）page。add（firstname，lastname，ElevatedButton（Sayhello！，onclickbtnclick），greetings，）flet。app（targetmain）
　　实际上我们在上面已经使用过控件引用了。这里我们先创建了三个控件，两个输入框控件，一个列容器控件，我们在按钮的点击事件中，把名称设置给Text文本控件，然后添加到列容器中，最后要调用page。update来刷新页面，才能正常显示出来。
　　除了直接引用控件实例对象以外，Flet还为我们提供了另一种控件对象引用方式，看一下示例：importfletfromfletimportColumn，ElevatedButton，Text，TextFieldfromflet。refimportRefdefmain（page）：firstnameRef〔TextField〕（）定义输入框引用变量lastnameRef〔TextField〕（）greetingsRef〔Column〕（）定义列容器引用变量defbtnclick（e）：greetings。current。controls。append（Text（fHello，｛firstname。current。value｝｛lastname。current。value｝！））firstname。current。valuelastname。current。valuepage。update（）firstname。current。focus（）page。add（TextField（reffirstname，labelFirstname，autofocusTrue），TextField（reflastname，labelLastname），ElevatedButton（Sayhello！，onclickbtnclick），Column（refgreetings），）flet。app（targetmain）
　　通过Ref来定义一种控件的引用，然后在控件创建的使用赋值给ref参数，但是在使用Ref变量的时候需要通过current变量来访问到实际的控件对象，这种方式是借鉴React的想法。在这个示例中我们看起来比较繁琐，实际上它的使用场景是把页面和逻辑处理分离开，像上面的那一个例子，firstname直接引用控件对象，这种方式就会导致控件的布局比较分散，而且属性设置也分散开了，而下面这种方式，我们定义的firstname只标明是TextField的引用，对于实际的组件以及组件的属性这里是不关心的，采用这种方式，我们就可以把控件的引用和页面布局都集中在一起。总结
　　上面我们大致介绍了Flet的整体结构和一些使用概念，就布局方式而言它和前端非常相像，我觉得它最大的好处是可以同时展示桌面端和web端，既可以在本机使用，也可以让别人通过网页使用类似桌面端的程序，一举两得，满足了更多的需求，而且如果我们仅把它作为一个web服务器来使用，部署起来也是非常的方便，下一次我们介绍更多的基础组件。
　　Flet基于Flutter的Python跨平台框架