19
社区成员




import flet as ft
class CustomTab:
def __init__(self, text, icon_path, on_click=None):
self.text = text
self.icon_path = icon_path
self.on_click = on_click
def build(self):
# 创建显示图标的行
image_row = ft.Row(
[ft.Image(src=self.icon_path, width=64, height=64)],
alignment=ft.MainAxisAlignment.CENTER
)
# 创建显示文本的行
text_row = ft.Row(
[ft.Text(self.text, color=ft.colors.WHITE, size=16)],
alignment=ft.MainAxisAlignment.CENTER
)
# 创建包含图标和文本的列
container = ft.Column(
[image_row, text_row],
alignment=ft.MainAxisAlignment.CENTER,
horizontal_alignment=ft.CrossAxisAlignment.CENTER,
spacing=5
)
return ft.Container(
content=container,
bgcolor=ft.colors.GREEN_500,
height=128,
width=128,
border_radius=8,
on_click=self.on_click
)
def main(page: ft.Page):
current_tab = None
content_container = ft.Column() # 用于显示页面内容的容器
# 定义每个标签对应的内容
tab_contents = {
"我的通讯": ft.Text("这是我的通讯页面", bgcolor=ft.colors.RED),
"网络收藏": ft.Text("这是网络收藏页面", bgcolor=ft.colors.ORANGE),
"电脑清理": ft.Text("这是电脑清理页面", bgcolor=ft.colors.GREEN),
"系统修复": ft.Text("这是系统修复页面", bgcolor=ft.colors.BLUE),
"我的笔记": ft.Text("这是我的笔记页面", bgcolor=ft.colors.PURPLE),
"功能大全": ft.Text("这是功能大全页面", bgcolor=ft.colors.YELLOW),
}
def tab_clicked(e):
nonlocal current_tab
tab_text = e.control.content.controls[1].controls[0].value # 获取被点击的标签文本
print(f"{tab_text} tab clicked")
# 更新当前标签的背景颜色
if current_tab:
current_tab.bgcolor = ft.colors.GREEN_500
current_tab = e.control
current_tab.bgcolor = ft.colors.GREEN_700
page.update()
# 更新内容容器中的内容
content_container.clean() # 清空旧内容
content_container.controls.append(tab_contents.get(tab_text, ft.Text("未知页面")))
page.update()
# 创建并添加所有标签
tabs = ft.Row(
[
CustomTab(text="我的通讯", icon_path="aa.png", on_click=tab_clicked).build(),
CustomTab(text="网络收藏", icon_path="bb.png", on_click=tab_clicked).build(),
CustomTab(text="电脑清理", icon_path="cc.png", on_click=tab_clicked).build(),
CustomTab(text="系统修复", icon_path="dd.png", on_click=tab_clicked).build(),
CustomTab(text="我的笔记", icon_path="ee.png", on_click=tab_clicked).build(),
CustomTab(text="功能大全", icon_path="ff.png", on_click=tab_clicked).build(),
],
alignment=ft.MainAxisAlignment.START
)
page.add(tabs, content_container) # 添加标签和内容容器到页面
ft.app(target=main)
上述Python代码使用了Flet库来创建一个具有自定义标签栏的应用程序。以下是该代码的主要功能和组成部分的概述:
CustomTab类:这是一个自定义类,用于创建带有图标和文本的标签。每个标签可以指定文本、图标路径以及可选的点击事件处理函数。
main函数:这是应用程序的主入口点,定义了页面布局和交互逻辑。
初始化变量current_tab用于跟踪当前选中的标签。
content_container是一个Column控件,用于动态展示不同标签对应的内容。
定义了一个字典tab_contents,其中键是标签的文本,值是与这些标签关联的内容组件。
tab_clicked函数处理标签被点击时的行为,包括更新当前标签的状态(背景颜色)和更新内容容器以显示新的内容。
创建了一个包含多个CustomTab实例的水平布局Row,这些实例分别代表不同的标签,并且为每个标签指定了点击事件处理器。
最后将标签栏和内容容器添加到页面上,并通过ft.app(target=main)启动应用程序。
整体来看,这段代码实现了一个简单的标签切换界面,用户可以通过点击不同的标签来浏览不同的内容区域。每个标签都有独特的图标和文本,并且在被选中时会改变样式以指示其活动状态。