Flet自定义选项卡tabs组件示例漂亮美观

传奇开心果编程
Python领域优质创作者
2024-10-02 18:30:48

img

1.示例代码:


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)

2. 解释:

上述Python代码使用了Flet库来创建一个具有自定义标签栏的应用程序。以下是该代码的主要功能和组成部分的概述:

CustomTab类:这是一个自定义类,用于创建带有图标和文本的标签。每个标签可以指定文本、图标路径以及可选的点击事件处理函数。

main函数:这是应用程序的主入口点,定义了页面布局和交互逻辑。

初始化变量current_tab用于跟踪当前选中的标签。
content_container是一个Column控件,用于动态展示不同标签对应的内容。
定义了一个字典tab_contents,其中键是标签的文本,值是与这些标签关联的内容组件。
tab_clicked函数处理标签被点击时的行为,包括更新当前标签的状态(背景颜色)和更新内容容器以显示新的内容。
创建了一个包含多个CustomTab实例的水平布局Row,这些实例分别代表不同的标签,并且为每个标签指定了点击事件处理器。
最后将标签栏和内容容器添加到页面上,并通过ft.app(target=main)启动应用程序。
整体来看,这段代码实现了一个简单的标签切换界面,用户可以通过点击不同的标签来浏览不同的内容区域。每个标签都有独特的图标和文本,并且在被选中时会改变样式以指示其活动状态。

...全文
311 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

19

社区成员

发帖
与我相关
我的任务
社区描述
近期,感兴趣Ant Design Mobile of React、Vant of Vue 、MUI of h5App、WeUI 原生微信小程序和beeware移动应用开发,发布原创博文创建专栏发布动态
androidios微信小程序 个人社区 甘肃省·酒泉市
社区管理员
  • 传奇开心果编程
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧