基于Flet组件自主创新反复优化打磨后推出的的自定义选项卡自定义标题栏和仿360酷炫漂亮的UI界面模板示例，源代码IDE运行和调试通过

[传奇开心果编程]

一、示例代码

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.container = None

    def build(self):
        self.container = ft.Container(
            content=ft.Column(
                controls=[
                    ft.Row(
                        controls=[ft.Image(src=self.icon_path, width=64, height=64)],
                        alignment=ft.MainAxisAlignment.CENTER
                    ),
                    ft.Row(
                        controls=[ft.Text(self.text, color=ft.colors.WHITE, size=16)],
                        alignment=ft.MainAxisAlignment.CENTER
                    )
                ],
                alignment=ft.MainAxisAlignment.CENTER,
                spacing=5
            ),
            bgcolor=ft.colors.GREEN_500,
            height=200,
            width=200,
            on_click=self.on_click,
            ink=True  # 确保具有墨水效果
        )
        return self.container

def create_tab(text, icon_path, on_click):
    return CustomTab(text=text, icon_path=icon_path, on_click=on_click).build()

def main(page: ft.Page):
    # 设置窗口的初始大小和样式
    page.window.width = 1220
    page.window.height = 800
    page.window.frameless = True
    page.window.resizable = False

    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_200
        page.update()

        content_container.clean()
        content_container.controls.append(tab_contents[tab_text])
        page.update()

    # 创建顶部标题栏
    def create_app_title():
        app_title_row = ft.Row(
            controls=[
                ft.IconButton(ft.icons.SHOPPING_CART, tooltip="购物车", icon_color=ft.colors.WHITE),
                ft.Text("购物清单助手桌面程序1.0", color=ft.colors.WHITE, size=16)
            ],
            alignment=ft.MainAxisAlignment.START
        )
        close_button = ft.IconButton(
            ft.icons.CLOSE,
            tooltip="关闭",
            icon_color=ft.colors.RED,
            on_click=lambda e: page.window.close()
        )
        icons_row = ft.Row(
            controls=[
                ft.IconButton(ft.icons.HOME, tooltip="首页", icon_color=ft.colors.WHITE),
                ft.IconButton(ft.icons.SEARCH, tooltip="搜索", icon_color=ft.colors.WHITE),
                ft.IconButton(ft.icons.SETTINGS, tooltip="设置", icon_color=ft.colors.WHITE),
                close_button
            ],
            alignment=ft.MainAxisAlignment.END
        )
        top_row_container = ft.Container(
            content=ft.Row(
                controls=[app_title_row, icons_row],
                alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                height=50,
                width=1220
            ),
            bgcolor=ft.colors.GREEN_500,
            padding=10,
        )
        return top_row_container

    # 创建标签栏
    def create_tabs():
        tabs = ft.Row(
            [
                create_tab(text="我的选购", icon_path="gg.png", on_click=tab_clicked),
                create_tab(text="清单详情", icon_path="hh.png", on_click=tab_clicked),
                create_tab(text="添加商品", icon_path="ii.png", on_click=tab_clicked),
                create_tab(text="保存商品", icon_path="jj.png", on_click=tab_clicked),
                create_tab(text="删除商品", icon_path="kk.png", on_click=tab_clicked),
                create_tab(text="联系我们", icon_path="ll.png", on_click=tab_clicked),
            ],
            alignment=ft.MainAxisAlignment.START,
            spacing=0,
            width=1200
        )
        return tabs

    # 创建布局
    layout_column = ft.Column(
        controls=[create_app_title(), create_tabs()],
        spacing=0
    )

    page.add(layout_column, content_container)

ft.app(target=main)

二、解释说明

这段代码的特色包括：

自定义组件：通过定义 CustomTab 类，创建了可重复使用的选项卡组件，方便管理与展示不同的功能，使得代码结构更加清晰和模块化。

用户界面设计：应用程序的界面设计考虑了布局的美观性和实用性，使用了图标和文本，增强了用户体验。顶部区域有明显的标题和功能图标，易于识别。

互动性：选项卡的点击事件处理增强了应用的互动性，用户点击不同的选项卡后，可以动态更换页面内容，使得操作更加流畅和直观。还添加了点击选项卡产生墨水效果功能，自定义选项卡视觉效果更加酷炫了。

颜色风格：使用丰富的颜色来区分不同的选项和内容，如 GREEN_500 和 GREEN_200，不仅美观，还能有效引导用户注意力。

灵活性与可扩展性：通过使用字典 tab_contents 来存储各选项卡的内容，使得后期扩展更为简单，能够轻松添加新的功能或页面。

窗体属性设置：通过设置窗口的大小、边框以及可调整性，增强了应用的适应性，提供了更加专注的用户体验（如无边框设计）。

响应式布局：整体布局使用了 Flet 提供的响应式控件（如 Row 和 Column），使得元素能够在不同分辨率的窗口中合理排列。

这些特色结合在一起，形成了一个结构清晰、易于使用且具备漂亮美观用户界面的桌面应用程序UI界面。

[传奇开心果编程]

选项卡是自定义，标题栏也是自定义的。允许商用，允许二次开发