Page
Page 是 View
控件的容器。
当新的用户会话开始时,会自动创建一个页面实例和根视图。
属性
auto_scroll
如果应自动将滚动条位置移动到末端时为 True
。必须为 False
以使 scroll_to()
方法起作用。
appbar
在页面顶部显示的 AppBar
控件。
banner
在页面顶部显示的 Banner
控件。
bgcolor
页面的背景颜色。
颜色值可以是 #ARGB
格式(例如 #FFCC0000
)、#RGB
格式(例如 #CC0000
)的十六进制值,或者是 flet.colors
模块中的命名颜色。
bottom_appbar
在页面底部显示的 BottomAppBar
控件。如果同时提供了 bottom_appbar
和 navigation_bar
属性,则会显示 NavigationBar
。
bottom_sheet
显示的 BottomSheet
控件。
client_ip
🌎 仅限 Web。连接用户的 IP 地址。
client_user_agent
🌎 仅限 Web。连接用户的浏览器详情。
controls
要在页面上显示的控件列表。
例如,添加一个新控件到页面:
- Python
page.controls.append(ft.Text("Hello!"))
page.update()
或使用 page.add()
快捷方法获得与上述相同的结果:
- Python
page.add(ft.Text("Hello!"))
移除页面顶部的控件:
- Python
page.controls.pop()
page.update()
dark_theme
在深色主题模式下自定义应用程序的主题。
值是 Theme()
类的一个实例 - 更 多信息请参见 theming 指南。
debug
如果 Flet 应用的 Flutter 客户端在调试模式下运行,则为 True
。
design
保留供将来使用。
dialog
显示的 AlertDialog
控件。
drawer
作为从页面起始边缘滑出的面板显示的 NavigationDrawer
控件。
end_drawer
作为从页面结束边缘滑出的面板显示的 NavigationDrawer
控件。
floating_action_button
显示在页面内容顶部的 FloatingActionButton
控件。
floating_action_button_location
定义 FloatingActionButton
的位置。
属性值是 FloatingActionButtonLocation
枚举。默认值为 END_FLOAT
。
fonts
允许导入自定义字体,并在 Text.font_family
中使用,或通过 theme.font_family
应用于整个应用程序。
Flet 支持以下字体格式:
.ttc
.ttf
.otf
fonts
属性的值是一个字典,其中键是引用该字体的字体系列名称,值是要导入的字体文件的 URL。
字体可以通过提供绝对 URL 从外部资源导入,或通过提供相对 URL 和 assets_dir
从应用程序资源导入。
在 flet.app()
调用中指定 assets_dir
以设置应用程序可用的资源位置。assets_dir
可以是相对于 main.py
目录的相对路径或绝对路径。例如,考虑以下程序结构:
/assets
/fonts
/OpenSans-Regular.ttf
main.py
现在,以下程序从 GitHub 加载 "Kanit" 字体,从资源中加载 "Open Sans"。将 "Kanit" 设置为默认应用程序字体,并为特定的 Text 控件使用 "Open Sans":
import flet as ft
def main(page: ft.Page):
page.fonts = {
"Kanit": "https://raw.githubusercontent.com/google/fonts/master/ofl/kanit/Kanit-Bold.ttf",
"Open Sans": "/fonts/OpenSans-Regular.ttf"
}
page.theme = Theme(font_family="Kanit")
page.add(
ft.Text("This is rendered with Kanit font"),
ft.Text("This is Open Sans font example", font_family="Open Sans")
)
ft.app(target=main, assets_dir="assets")
目前仅支持静态字体,即仅包含一种特定宽度/重量/样式组合的字体,例如 "Open Sans Regular" 或 "Roboto Bold Italic"。
但是,如果您需要在应用中使用可变字体,可以使用 fonttools 创建特定权重的静态“实例化”字体,然后使用这些字体:
fonttools varLib.mutator ./YourVariableFont-VF.ttf wght=140 wdth=85
使用 Wakamai Fondue 在线工具探索可用的字体特性(例如 wght
的可能选项)。
height
包含 Flet 应用的网页或本机操作系统窗口的高度。此属性是只读的。通常在 page.on_resize
处理程序中使用。
horizontal_alignment
子控件应如何水平放置。
属性值是 CrossAxisAlignment
枚举。默认值为 START
。
locale_configuration
应用程序的区域设置配置。值是 LocaleConfiguration
类的一个实例,该类具有以下属性:
supported_locales
- 应用计划支持的Locale
列表。如果提供的值为None
或列表为空,则此属性内部默认值为[Locale("en", "US")]
(美国英语区域设置)。current_locale
- 应用的当前Locale
。如果提供的区域设置不在supported_locales
中,则此属性将设置为supported_locales[0]
(列表中的第一个项目)。
Locale
类具有以下属性:
language_code
- 区域设置的语言代码。country_code
- 区域设置的国家代码。script_code
- 区域设置的脚本代码。
media
提供关于应用媒体(屏幕、窗口)的详细信息。有关更多信息,请参阅 Flutter 文档中的 MediaQueryData。
此属性的值是 PageMediaData
类的一个实例,具有以下字段:
padding
(类型为Padding
) - 显示器部分被系统 UI 部分遮挡的区域 ,通常是硬件显示器“缺口”或系统状态栏。view_padding
(类型为Padding
) - 显示器部分被系统 UI 部分遮挡的区域,通常是硬件显示器“缺口”或系统状态栏。view_insets
(类型为Padding
) - 显示器被系统 UI 完全遮挡的部分,通常是设备的键盘。
在大多数情况下,您应该将内容包装在 SafeArea
控件中。
🎬 观看此视频 解释 padding
、view_padding
和 view_insets
。
name
在 ft.app()
调用中指定的页面名称。运行为 web 应用时设置页面名称。这是主机名后的 URL 部分。
navigation_bar
在页面底部显示的 NavigationBar
控件。如果同时提供了 bottom_appbar
和 navigation_bar
属性,则会显示 NavigationBar
。
on_scroll_interval
on_scroll
事件的节流时间(毫秒)。默认值为 10
。
overlay
显示在主要页面内容顶部的 Control
列表。
padding
页面内容与其边缘之间的空间。默认值是每侧 10 像素。设置为零填充:
- Python
page.padding = 0
page.update()
填充是 padding.Padding
类的一个实例。
platform
应用程序运行的操作系统。
属性值是 PagePlatform
枚举,具有以下值:
IOS
ANDROID
MACOS
WINDOWS
LINUX
此属性可用于创建自适应 UI,根据操作系统使用不同的控件:
def main(page: ft.Page):
if page.platform == ft.PagePlatform.MACOS:
page.add(ft.CupertinoDialogAction("Cupertino Button"))
else:
page.add(ft.TextButton("Material Button"))
您还可以出于测试目的设置此属性:
import flet as ft
def main(page):
def set_android(e):
page.platform = ft.PagePlatform.ANDROID
page.update()
print("New platform:", page.platform)
def set_ios(e):
page.platform = "ios"
page.update()
print("New platform:", page.platform)
page.add(
ft.Switch(label="Switch A", adaptive=True),
ft.ElevatedButton("Set Android", on_click=set_android),
ft.ElevatedButton("Set iOS", on_click=set_ios),
)
print("Default platform:", page.platform)
ft.app(target=main)
platform_brightness
主机平台的当前亮度模式:ft.Brightness.LIGHT
或 ft.Brightness.DARK
。只读。
pubsub
用于在应用程序会话之间传递消息的简单发布/订阅实现。
subscribe(handler)
订阅当前应用会话的广播(无主题)消息。handler
是一个具有单个 message
参数的函数或方法,例如:
def main(page: ft.Page):
def on_broadcast_message(message):
print(message)
page.pubsub.subscribe(on_broadcast_message)
subscribe_topic(topic, handler)
订阅当前应用会话的特定主题。handler
是一个具有两个参数的函数或方法:topic
和 message
,例如:
def main(page: ft.Page):
def on_message(topic, message):
print(topic, message)
page.pubsub.subscribe_topic("general", on_message)
send_all(message)
向所有订阅者广播消息。message
可以是任何内容:简单的文字或类实例,例如:
@dataclass
class Message:
user: str
text: str
def main(page: ft.Page):
def on_broadcast_message(message):
page.add(ft.Text(f"{message.user}: {message.text}"))
page.pubsub.subscribe(on_broadcast_message)
def on_send_click(e):
page.pubsub.send_all(Message("John", "Hello, all!"))
page.add(ft.ElevatedButton(text="Send message", on_click=on_send_click))
send_all_on_topic(topic, message)
向特定主题的所有订阅者发送消息。
send_others(message)
向所有订阅者(除发送者外)广播消息。
send_others_on_topic(topic, message)
向特定主题的所有订阅者(除发送者外)发送消息。
unsubscribe()
取消当前应用会话的广播消息订阅,例如:
@dataclass
class Message:
user: str
text: str
def main(page: ft.Page):
def on_leave_click(e):
page.pubsub.unsubscribe()
page.add(ft.ElevatedButton(text="Leave chat", on_click=on_leave_click))
unsubscribe_topic(topic)
取消当前应用会话的特定主题订阅。
unsubscribe_all()
取消当前应用会话的广播消息和所有 主题的订阅,例如:
def main(page: ft.Page):
def client_exited(e):
page.pubsub.unsubscribe_all()
page.on_close = client_exited
pwa
如果应用程序作为渐进式 Web 应用(PWA)运行,则为 True
。只读。
query
应用 URL 中 ?
之后的部分。值是 QueryString
的一个实例,带有用于获取查询参数的辅助方法。
route
获取或设置页面的导航路由。有关更多信息和示例,请参见导航和路由部分。
rtl
True
设置文本方向为从右到左。默认值为 False
。
scroll
启用页面的垂直滚动以防止其内容溢出。
属性值是可选的 ScrollMode
枚举,默认值为 None
。
session
用于会话数据的简单 KV 存储。
session_id
用户会话的唯一 ID。此属性是只读的。
spacing
页面上控件之间的垂直间距。默认值为 10 虚拟像素。仅当 alignment
设置为 start
、end
或 center
时应用间距。
splash
显示在页面内容顶部的 Control
。ProgressBar
或 ProgressRing
可用作指示某些耗时操作的指示器,例如:
- Python
from time import sleep
import flet as ft
def main(page: ft.Page):
def button_click(e):
page.splash = ft.ProgressBar()
btn.disabled = True
page.update()
sleep(3)
page.splash = None
btn.disabled = False
page.update()
btn = ft.ElevatedButton("Do some lengthy task!", on_click=button_click)
page.add(btn)
ft.app(target=main)
show_semantics_debugger
True
打开显示框架报告的可访问性信息的覆盖层。
theme
在浅色主题模式下自定义应用程序的主题。目前,主题只能从“种子”颜色自动生成。例如,从绿色生成浅色主题。
值是 Theme()
类的一个实例 - 更多信息请参见 theming 指南。
theme_mode
页面主题。
值是 ThemeMode
枚举。默认值为 SYSTEM
。
title
浏览器或本机操作系统窗口的标题,例如:
- Python
page.title = "My awesome app"
page.update()
url
Web 应用的完整 URL。
vertical_alignment
子控件应如何垂直放置。
属性值是 MainAxisAlignment
枚举。
例如,MainAxisAlignment.START
(默认值)将子控件放置在页面顶部。
views
用于构建导航历史记录的 View
控件列表。
列表中的最后一个视图是页面上显示的视图。
第一个视图是“根”视图,无法弹出。
web
如果应用程序在 Web 浏览器中运行,则为 True
。
width
包含 Flet 应用的网页或本机操作系统窗口的宽度。此属性是只读的。通常在 page.on_resize
处理程序中使用。
window_always_on_top
🖥️ 仅限桌面。设置窗口是否应始终显示在其他窗口之上。默认值为 False
。
window_bgcolor
🖥️ 仅限桌面。设置应用窗口的背景颜色。
与 page.bgcolor
一起使用以使窗口透明:
import flet as ft
def main(page: ft.Page):
page.window_bgcolor = ft.colors.TRANSPARENT
page.bgcolor = ft.colors.TRANSPARENT
page.window_title_bar_hidden = True
page.window_frameless = True
page.window_left = 400
page.window_top = 200
page.add(ft.ElevatedButton("I'm a floating button!"))
ft.app(target=main)
window_focused
🖥️ 仅限桌面。设置为 True
以聚焦包含 Flet 应用的本机操作系统窗口。
window_frameless
🖥️ 仅限桌面。设置为 True
以使应用窗口无框。
window_full_screen
🖥️ 仅限桌面。设置为 True
以将应用程序的本机操作系统窗口切换到全屏模式。默认值为 False
。
window_height
🖥️ 仅限桌面
。获取或设置包含 Flet 应用的本机操作系统窗口的高度。
window_left
🖥️ 仅限桌面。获取或设置本机操作系统窗口的水平位置 - 距屏幕左边缘的距离(以虚拟像素为单位)。
window_maximizable
🖥️ 仅限桌面。设置为 False
以隐藏/禁用本机操作系统窗口的“最大化”按钮。默认值为 True
。
window_maximized
🖥️ 仅限桌面。如果包含 Flet 应用的本机操作系统窗口已最大化,则为 True
;否则为 False
。将此属性设置为 True
以编程方式最大化窗口,将其设置为 False
以取消最大化。
window_max_height
🖥️ 仅限桌面。获取或设置包含 Flet 应用的本机操作系统窗口的最大高度。
window_max_width
🖥️ 仅限桌面。获取或设置包含 Flet 应用的本机操作系统窗口的最大宽度。
window_minimizable
🖥️ 仅限桌面。设置为 False
以隐藏/禁用本机操作系统窗口的“最小化”按钮。默认值为 True
。
window_minimized
🖥️ 仅限桌面。如果包含 Flet 应用的本机操作系统窗口已最小化,则为 True
;否则为 False
。将此属性设置为 True
以编程方式最小化窗口,将其设置为 False
以恢复窗口。
window_min_height
🖥️ 仅限桌面。获取或设置包含 Flet 应用的本机操作系统窗口的最小高度。
window_min_width
🖥️ 仅限桌面。获取或设置包含 Flet 应用的本机操作系统窗口的最小宽度。
window_movable
🖥️ 仅限桌面。仅限 macOS。设置为 False
以防止用户更改包含 Flet 应用的本机操作系统窗口的位置。默认值为 True
。