以Flet组件tabs为基础自主创新自定义组件升级版CustomTab Pro源代码

传奇开心果编程
Python领域优质创作者
2024-10-04 09:43:15

img

img

一、源代码


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
        self.bgcolor = ft.colors.LIGHT_GREEN  # 设置初始背景色为亮绿色

    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=self.bgcolor,  # 使用类变量来设置背景色
            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.LIGHT_GREEN  # 将之前的标签背景色改为亮绿色
            page.update(current_tab)

        current_tab = e.control
        current_tab.bgcolor = ft.colors.YELLOW  # 将当前点击的标签背景色改为亮黄色
        page.update(current_tab)

        # 更新内容容器中的内容
        content_container.clean()  # 清空旧内容
        content_container.controls.append(tab_contents.get(tab_text, ft.Text("未知页面")))
        page.update(content_container)

    # 创建并添加所有标签
    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)

二、解释说明:

Flet组件tabs自主创新自定义组件升级版CustomTab Pro源代码

修改标签被选中时会改变样式以指示其活动状态,打造升级版自定义选项卡组件。
未选中图标背景为light green,选中背景变为light yellow,通过标签被选中时会改变样式以指示其活动状态。初始为:未选中。
CustomTab类:这是一个自定义类,用于创建每个标签都有独特的自定义样式,自定义图标和文本的标签。每个标签可以指定文本、图标路径以及可选的点击事件处理函数。
main函数:这是应用程序的主入口点,定义了页面布局和交互逻辑。
初始化变量current_tab用于跟踪当前选中的标签。
content_container是一个Column控件,用于动态展示不同标签对应的内容。
定义了一个字典tab_contents,其中键是标签的文本,值是与这些标签关联的内容组件。
tab_clicked函数处理标签被点击时的行为,包括更新当前标签的状态(背景颜色)和更新内容容器以显示新的内容。
创建了一个包含多个CustomTab实例的水平布局Row,这些实例分别代表不同的标签,并且为每个标签指定了点击事件处理器。
最后将标签栏和内容容器添加到页面上,并通过ft.app(target=main)启动应用程序。

整体来看,这段代码实现了一个新颖漂亮的标签切换界面,用户可以通过点击美观漂亮的标签来浏览不同的内容区域。每个标签都有独特的自定义样式,自定义图标和文本,并且在被选中时会改变样式以指示其活动状态。

...全文
148 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
特色包括:自定义组件:通过定义 CustomTab 类,创建了可重复使用的选项卡组件,方便管理与展示不同的功能,使得代码结构更加清晰和模块化。用户界面设计:应用程序的界面设计考虑了布局的美观性和实用性,使用了图标和文本,增强了用户体验。顶部区域有明显的标题和功能图标,易于识别。互动性:选项卡的点击事件处理增强了应用的互动性,用户点击不同的选项卡后,可以动态更换页面内容,使得操作更加流畅和直观。还添加了点击选项卡产生墨水效果功能,自定义选项卡视觉效果更加酷炫了。颜色风格:使用丰富的颜色来区分不同的选项和内容,如 GREEN_500 和 GREEN_200,不仅美观,还能有效引导用户注意力。灵活性与可扩展性:通过使用字典 tab_contents 来存储各选项卡的内容,使得后期扩展更为简单,能够轻松添加新的功能或页面。窗体属性设置:通过设置窗口的大小、边框以及可调整性,增强了应用的适应性,提供了更加专注的用户体验(如无边框设计)。响应式布局:整体布局使用了 Flet 提供的响应式控件(如 Row 和 Column),使得元素能够在不同分辨率的窗口中合理排列。UI界面酷炫漂亮。
### 应用场景介绍 该代码实现了一个使用 Flet 框架构建的简单日期选择器应用。用户点击按钮后,会弹出一个日期选择器对话框,用户可以选择一个日期,并且选择的日期会被格式化为中文格式(如:2023年10月10日)显示在页面上。此外,当用户关闭日期选择器时,页面上会显示一条通知消息。 ### 特色说明 1. **中文本地化**: - **取消和确认按钮**:将日期选择器的“取消”和“确定”按钮文本设置为中文。 - **帮助文本**:设置了中文的帮助文本提示用户选择日期。 - **输入框标签和提示**:将日期输入框的标签和提示文本设置为中文。 - **错误信息**:当用户输入的日期格式不正确或超出范围时,会显示中文的错误提示信息。 2. **日期格式化**: - 选择了日期后,程序会将日期格式化为符合中文习惯的格式(如:2023年10月10日),并显示在页面上。 3. **事件处理**: - **日期变更事件**:当用户选择了一个新的日期时,触发 `handle_change` 函数,更新页面上的文本内容。 - **关闭事件**:当用户关闭日期选择器时,触发 `handle_dismissal` 函数,在页面上添加一条通知消息。 4. **日期范围限制**: - 设置了可选日期的范围,从2023年10月1日到2024年10月1日,确保用户只能选择这个范围内的日期。 ### 总结 该应用展示了如何使用 Flet 框架创建一个带有中文本地化的日期选择器组件,并通过事件处理机制实现了与用户的交互。这种设计不仅提升了用户体验,还使得应用程序更加友好和易用。

19

社区成员

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

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