Page是View控件的容器，可以容纳多层View控件，默认显示最上层View控件，每一个View控件可以看作一个页面，容纳多个控件的容器。

Page实例和root View控件在每一个用户初次访问时，自动生成。

Page 属性

controls

包含页面控件的列表

例如添加文本到当前页面：

page.controls.append(Text("Hello!"))
page.update()

和下面代码一样的效果

page.add(Text("Hello!"))

删除页面最上层的控件

page.controls.pop()
page.update()

views

可以构建导航历史记录的视图控件列表。

列表中的最后一个视图是当前页面显示的视图。

第一个视图是不能弹出的“根”视图。

page.controls.append(Text("Hello!")) 

上述代码本质上也是在当前视图控件列表中添加

page.views[-1].controls.append(Text("Hello!")) 

title

浏览器或桌面程序标题

page.title = "My awesome app"
page.update()

web

代表当前应用是否web程序，True ，False

plateform

程序运行平台

• ios
• android
• macos
• linux
• windows

horizontal_alignment

控件在页面的水平布局，支持start, center, end, stretch, baseline

vertical_alignment

控件在页面的垂直布局，支持start, end, center, spaceBetween, spaceAround, spaceEvenly

spacing

页面中各控件的间隔

padding

控件与页面的间隔

bgcolor

背景色

scroll

页面垂直方向滚动条，防止内容溢出

• none (default) -页面没有滚动条，多出的内容无法查看
• auto – 页面滚动时自动显示滚动条
• adaptive – 页面内容滚动时，web和桌面程序显示滚动条
• always – 页面内容大于一页时，不管是否滚动总是显示滚动条
• hidden – 页面内容滚动时不显示滚动条

theme_mode

主题模式，dark，light（默认）

show_semantics_debugger

设置为True时，显示框架布局

splash

页面顶部显示控件信息，通常使用ProgressBar显示长时间操作的状态

示例：

from time import sleep
import flet
from flet import ElevatedButton, ProgressBar

def main(page):
    def button_click(e):
        page.splash = ProgressBar()
        btn.disabled = True
        page.update()
        sleep(3)
        page.splash = None
        btn.disabled = False
        page.update()

    btn = ElevatedButton("Do some lengthy task!", on_click=button_click)
    page.add(btn)

flet.app(target=main)

overlay

页面所有控件上层显示的一个控件列表，是个stack类型的控件

示例：

import flet
from flet import ElevatedButton, Container,ProgressRing,Page,alignment

def main(page:Page):
    def button_click(e):
        page.overlay.append(
            Container(content=ProgressRing(),alignment=alignment.center)
        )
        page.update()
    btn = ElevatedButton("overlay", on_click=button_click)
    page.add(btn)

flet.app(target=main)

width

只读属性，当前UI 宽度

height

只读属性，当前UI高度

window_width

桌面程序有效，设置程序宽度

window_height

桌面程序有效，设置程序高度

window_top

桌面程序有效，设置程序上边界位置

window_left

桌面程序有效，设置程序左边界位置

window_opacity

桌面程序有效，设置程序透明度，0.0-1.0

window_maximized

桌面程序有效，True设置程序最大化

window_minimized

桌面程序有效，True设置程序最小化

window_resizable

桌面程序有效，设置程序是否可调整大小

window_movable

桌面程序有效，设置程序可否移动

window_full_screen

桌面程序有效，设置程序全屏

window_always_on_top

桌面程序有效，设置程序总是在最上层

window_prevent_close

桌面程序有效，设置程序是否可关闭

window_focused

桌面程序有效，设置程序是否拥有当前焦点

window_title_bar_hidden

桌面程序有效，设置程序隐藏标题栏

window_frameless

桌面程序有效，设置程序无边框

window_skip_task_bar

桌面程序有效，设置程序任务栏不显示

window_progress_bar

桌面程序有效，设置程序任务栏显示状态条，值0.0-1.0

window_visible

桌面程序有效，设置程序是否可见

page 方法

set_clipboard

剪贴板复制内容

示例：

page.set_clipboard("This value comes from Flet app")

launch_url

浏览器打开地址

window_center

程序在桌面居中显示

window_close

关闭程序

window_destroy

关闭程序，设置page.window_prevent_close = True时，可用

Page 事件

on_resize

调整大小时触发

on_window_event

以下事件触发

• close
• focus
• blur
• maximize
• unmaximize
• minimize
• restore
• resize
• resized (macOS and Windows only)
• move
• moved (macOS and Windows only)
• enterFullScreen
• leaveFullScreen

on_keyboard_event

键盘事件触发

on_route_change

page.route改变触发

on_connect

新用户连接触发

on_disconnect

用户关闭浏览器或程序触发

on_close

连接断开后默认60分钟触发

View 控件

View是所有其他控件的最顶层容器。

当新的用户会话开始时，会自动创建根视图。从布局的角度来看，视图表示一个列控件，因此它具有类似的行为并共享相同的属性。

View属性

route

当前框架未使用，但是用户可自行用作导航，显示对应的view

controls

页面添加控件

page.controls.append(Text("Hello!"))
page.update()

horizontal_alignment

vertical_alignment

spacing

padding

scroll

综合以前所学知识，编写锁屏代码：

import flet
from flet import (
    Page,
    TextField,
    ElevatedButton,
    KeyboardEvent,
)
def main(page:Page):
    def key_cmd(e:KeyboardEvent):
        if e.ctrl and e.key == 'K':
            page.window_destroy()

    def check_pwd(e):
        if e.control.value == "xiaotech":
            page.window_destroy()
        else:
            e.control.error_text = "密码错误"
            page.update()
    
    page.window_full_screen = True
    page.window_focused = True
    page.window_prevent_close = True
    page.window_always_on_top = True
    page.theme_mode = "dark"

    page.horizontal_alignment = "center"
    page.vertical_alignment = "center"

    page.on_keyboard_event = key_cmd
    page.add(
        TextField(label="解锁密码",hint_text="input passwd",on_submit=check_pwd,width=200)
    )

flet.app(target=main)