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

你可能感兴趣的:(flutter)