Flet学习[个人向]

前言

因为实验室项目需求，我一直在做前端界面，使用过很长一段时间（半年吧）的pyqt5，做出来一些界面，但是不是很美观，而且个人感觉qt不好用而且太复杂了，本来想转去用其他语言的前端，但是项目组长说为了方便衔接python的神经网络代码，所以让我用python写，无奈，就在我在b站找pyqt的例子准备继续开工突然在一个视频下面的评论区看到了flet，我一好奇，就找到了flet的官网开始啃开发文档（Introduction | Flet 全英文，配合浏览器翻译慢慢啃），好歹也是开坑学习了，为了方便自己以后使用，就写了这个学习文档，按照自己能理解的方式慢慢学习

组长给的ddl在15号，好赶。。。（现在时间7.11下午4点半）

开始

1、 安装flet

本人使用pycharm在conda环境下安装flet，在pycharm的终端里输入pip install flet就行了

2、flet基本结构

import flet as ft
​
def main(page: ft.Page):
    # 这里就是放页面主要内容的地方
    pass
​
ft.app(target=main) # 作为桌面应用程序运行
# ft.app(target=main, view=ft.AppView.WEB_BROWSER) 作为网页运行

此处在main函数内定义了一个名叫page，继承了ft.page的页面，官方把它比喻成画布，我觉得页面就能理解了

下面是官方对于浏览器窗口打开的一些补充：

在内部，每个 Flet 应用程序都是一个 Web 应用程序，即使它在本机操作系统窗口中打开，内置 Web 服务器仍然在后台启动。Flet Web 服务器称为“Fletd”，默认情况下它侦听随机 TCP 端口。您可以指定自定义 TCP 端口，然后在浏览器中打开应用程序以及桌面视图：

flet.app(port=8550, target=main)

在浏览器中打开以查看 Flet 应用程序的网页版本。http://localhost:<port>

因为我做的是桌面端，就不多看这部分了。

3、控件

下面是一些基本的控件

# 文本控件
t = ft.Text(value="Hello, world!", color="green")
# 容器控件 Row 逐行输出
page.add(
    ft.Row(controls=[
        ft.Text("A"),
        ft.Text("B"),
        ft.Text("C")
    ])
)
# 输入框 TextField 和 按钮 ElevatedButton
page.add(
    ft.Row(controls=[
        ft.TextField(label="Your name"),
        ft.ElevatedButton(text="Say my name!")
    ])
)
# 补充中...

要让控件生效就得将控件添加到页面

page.controls.append(t) # 添加控件
page.update() # 更新页面

官方给了几个样例:

# helloworld
import flet as ft
​
def main(page: ft.Page):
    t = ft.Text(value="Hello, world!", color="green")
    page.controls.append(t)
    page.update()
​
ft.app(target=main)
# 剩下的大家自己去试试了，我都试过了
for i in range(10):
    page.controls.append(ft.Text(f"Line {i}"))
    if i > 4:
        page.controls.pop(0)
    page.update()
    time.sleep(0.3)
# 关于按钮的
def button_clicked(e):
    page.add(ft.Text("Clicked!"))
​
page.add(ft.ElevatedButton(text="Click me", on_click=button_clicked))
# 暂时是个人最喜欢的一个样例，看完这个直接决定开始学
import flet as ft
​
def main(page):
    def add_clicked(e):
        page.add(ft.Checkbox(label=new_task.value))
        new_task.value = ""
        new_task.focus()
        new_task.update()
​
    new_task = ft.TextField(hint_text="Whats needs to be done?", width=300)
    page.add(ft.Row([new_task, ft.ElevatedButton("Add", on_click=add_clicked)]))
​
ft.app(target=main)
#

附上运行的图，这东西用pyqt做应该不止这么几行代码吧

 

记住，所有控件属性都将在下一个page.update()生效哦

4、是否可视与是否可用

visible true\false

disabled true\false

# 单独设置是否可用
first_name = ft.TextField()
last_name = ft.TextField()
first_name.disabled = True
last_name.disabled = True
page.add(first_name, last_name)
# 设置所在的容器是否可用
first_name = ft.TextField()
last_name = ft.TextField()
c = ft.Column(controls=[
    first_name,
    last_name
])
c.disabled = True
page.add(c)

5、控件引用

先看官方样例

def main(page):
    
    first_name = ft.TextField(label="First name", autofocus=True)
    last_name = ft.TextField(label="Last name")
    greetings = ft.Column() # Column应该是列的意思，与Row（行）相对应
​
    def btn_click(e):
        greetings.controls.append(ft.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,
        ft.ElevatedButton("Say hello!", on_click=btn_click),
        greetings,
    )
​
ft.app(target=main)

个人感觉在讲变量的调用，后面才是重点，看看下面的代码

def main(page):
​
    first_name = ft.Ref[ft.TextField]()
    last_name = ft.Ref[ft.TextField]()
    greetings = ft.Ref[ft.Column]()
​
    def btn_click(e):
        greetings.current.controls.append(
            ft.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(
        ft.TextField(ref=first_name, label="First name", autofocus=True),
        ft.TextField(ref=last_name, label="Last name"),
        ft.ElevatedButton("Say hello!", on_click=btn_click),
        ft.Column(ref=greetings),
    )
​
ft.app(target=main)

不同的地方在于这个ft.Ret[]，官方给的解释是：

Flet 提供了实用程序类，它允许定义对控件的引用，在事件处理程序中使用该引用，并在以后生成树时将引用设置为实际控件。

定义新的类型化控件引用：

first_name = ft.Ref[ft.TextField]()

要访问引用的控件（控件取消引用），请使用属性：Ref.current

# empty first name

first_name.current.value = ""

若要将控件分配给引用，请将属性设置为引用：Control.ref

page.add(
    ft.TextField(ref=first_name, label="First name", autofocus=True)
)

说实话第一次看的时候我看不懂，应该是一种新的创建控件的方式，相比与之前先创建控件在添加到界面的时候，我们可以边创建控件边添加控件，我们之前是将名叫First name的textfiled的值赋给了first_name这个变量，现在我们只需要声明first_name会从一个textfiled中获取值，然后在添加的时候指定一个文本框给first_name就行（ref=first_name），剩下的属性跟原来一样配置就好

官方最后说了，这是个人喜好问题，所以用不用无所谓

第一章内容就这么多了，剩下的等我赶完ddl随缘补吧，应该是会持续更新的。。。吧？