简介这份资源面向Flet框架学习者与Python桌面UI开发者提供一套经过反复打磨的自定义选项卡组件与仿360风格界面示例帮助解决原生控件样式单一、交互反馈不足的问题。包内共9个文件以7个png界面截图、1个py主程序源码和1份特色说明txt为主压缩包约216KB截图便于快速预览效果源码可直接在IDE中运行调试。已有200人学习关注。代码通过CustomTab类封装可复用选项卡结合字典tab_contents管理各页内容便于后期扩展新功能点击选项卡时动态切换页面并带墨水扩散效果配合GREEN_500、GREEN_200等丰富配色区分选项视觉层次清晰。窗口采用无边框设计借助Row、Column等响应式控件适配不同分辨率顶部标题与功能图标醒目整体交互流畅直观适合作为桌面工具或管理面板的界面参考模板。1. 从 Flet 默认控件到自定义选项卡为什么原生 Tab 总差一口气用 Flet 写过桌面端或 Web 端界面的人大概率都经历过这个阶段功能跑通了但界面一看就是「框架默认脸」。尤其是选项卡Tab这种高频组件Flet 自带的Tabs能用可一旦你想做圆角高亮、滑动指示条、图标加文字混排、悬停变色这些效果就会发现原生控件的可定制空间非常有限。我最初做某内部工具时就卡在这里——产品同事丢过来一张参考图说「就照这个感觉来」那张图里的选项卡有渐变选中态、有平滑过渡、有图标和角标原生Tabs根本拼不出来。这就是自定义选项卡存在的意义。它不是把Tabs换个颜色那么简单而是用Container、Row、GestureDetector、AnimatedContainer这些基础积木从零搭一套可完全控制的选项卡组件。你能决定每一个像素的圆角、每一帧的动画曲线、每一个状态的配色。仿 360 风格的 UI 之所以被反复提起是因为它的视觉语言很典型深色顶栏、亮色高亮、卡片式内容区、图标带光晕这套东西用自定义组件做出来比套任何现成主题都更接近目标。这篇文章面向的是已经会用 Flet 搭基本界面、但想突破默认样式天花板的开发者。我会把自定义选项卡的构建逻辑、仿 360 风格 UI 的配色与布局参数、以及反复调试中踩过的坑按可复现的步骤讲清楚。你跟着走一遍能拿到一套能直接改参数就用的组件代码而不是只能看的截图。2. 用 Flet 基础控件搭一个可复用的自定义选项卡2.1 为什么不用 Tabs 而用 Container Row 自己拼Flet 的Tabs组件内部封装了选中逻辑和内容切换但它暴露出来的样式接口很少。你只能改label、icon、selected_index这些想改选中态的背景形状、指示条位置、动画时长基本无从下手。而自定义方案的核心思路是把「选项卡头」和「内容区」彻底拆开头用Row装一组Container每个Container自己处理点击和选中态内容区用一个Container根据当前选中索引动态渲染。这样做的好处是控制粒度到了单个选项卡级别。你可以给每个选项卡单独设图标、角标、禁用态甚至让某个选项卡在特定条件下才出现。代价是你得自己管理状态——选中索引、悬停索引、动画进度这些都要手动维护。但对于追求视觉还原度的场景这个代价完全值得。下面是一个最小可运行的自定义选项卡头实现import flet as ft def build_tab_header(tabs, selected_index, on_tab_click): tabs: 列表每项是 dict包含 label, icon selected_index: 当前选中的索引 on_tab_click: 点击回调接收索引 tab_controls [] for i, tab in enumerate(tabs): is_selected (i selected_index) # 选中态用亮色背景 白色文字未选中用透明背景 灰色文字 tab_controls.append( ft.Container( contentft.Row( controls[ ft.Icon(tab[icon], size18, colorft.colors.WHITE if is_selected else ft.colors.GREY_400), ft.Text(tab[label], size14, colorft.colors.WHITE if is_selected else ft.colors.GREY_400), ], spacing6, alignmentft.MainAxisAlignment.CENTER, ), paddingft.padding.symmetric(horizontal20, vertical10), border_radiusft.border_radius.all(20), bgcolorft.colors.BLUE_600 if is_selected else ft.colors.TRANSPARENT, on_clicklambda e, idxi: on_tab_click(idx), animateft.animation.Animation(300, ft.AnimationCurve.EASE_OUT), ) ) return ft.Row(tab_controls, spacing8, alignmentft.MainAxisAlignment.CENTER)这段代码里每个选项卡是一个Container里面包一个Row放图标和文字。选中态通过bgcolor和文字颜色区分animate参数让背景色变化有 300 毫秒的过渡。on_click用 lambda 绑定了当前索引避免闭包陷阱。参数上border_radius设成 20 是为了做胶囊形如果你想要方形选中态就改小。padding的horizontal20决定了选项卡的宽度感太窄会显得局促太宽则浪费横向空间。animate的曲线用EASE_OUT比较自然EASE_IN_OUT会显得更「弹」一些看你的风格取向。2.2 状态管理与内容区联动让点击真正切换面板选项卡头只是壳真正让用户感知到「切换了」的是内容区的变化。Flet 里状态管理有两种常见做法一种是用page.update()配合全局变量另一种是把整个界面封装成一个类用实例属性存状态。我推荐后者因为选项卡组件往往不止一个全局变量容易打架。下面是一个完整的状态联动示例class CustomTabs(ft.Column): def __init__(self, tabs, content_builder): super().__init__() self.tabs tabs self.content_builder content_builder self.selected_index 0 self.content_area ft.Container( contentself.content_builder(self.selected_index), paddingft.padding.all(20), bgcolorft.colors.GREY_900, border_radiusft.border_radius.all(12), expandTrue, ) self.header build_tab_header(self.tabs, self.selected_index, self._on_tab_click) self.controls [ self.header, ft.Container(height12), # 间距 self.content_area, ] self.spacing 0 def _on_tab_click(self, index): if index self.selected_index: return self.selected_index index # 重建头部以更新选中态 self.header build_tab_header(self.tabs, self.selected_index, self._on_tab_click) self.controls[0] self.header # 重建内容区 self.content_area.content self.content_builder(self.selected_index) self.update()这里的关键点是点击后不修改原有控件的属性而是重新构建头部和内容区然后替换controls里的引用。这样做的好处是逻辑简单不容易出现状态残留坏处是每次点击都重建控件如果选项卡内容很重比如嵌了长列表会有轻微卡顿。优化方向是只更新变化的部分比如只改每个Container的bgcolor和文字颜色而不是整个重建。你可以根据内容复杂度选择。content_builder是一个函数接收索引返回对应的内容控件。这样设计让选项卡组件和具体内容解耦同一个选项卡头可以配不同的内容区复用性更好。2.3 加一点动画让选中态切换不再生硬原生控件最让人出戏的地方就是切换时「啪」地一下变了没有任何过渡。自定义方案里加动画很简单Container的animate属性就能搞定背景色和圆角的过渡。但如果你想要更酷的效果比如选中时有一个滑块从旧位置滑到新位置那就需要用到Stack和AnimatedPositionedFlet 里对应的是Stack配合Container的left属性加动画。不过对于大多数场景animate已经够用了。我一般会给三个属性加动画bgcolor、border_radius、padding。padding加动画会让选项卡在选中时稍微「胖」一点有种被按下去的感觉。注意动画时长不要超过 400 毫秒否则会显得拖沓也不要低于 150 毫秒否则用户感知不到。ft.Container( # ... 其他属性 animateft.animation.Animation(250, ft.AnimationCurve.EASE_OUT), animate_opacityft.animation.Animation(250), )animate_opacity是单独控制的如果你想让未选中的选项卡半透明可以设opacity0.7选中时opacity1.0配合动画就有淡入淡出的效果。3. 仿 360 风格 UI 的配色、布局与图标处理3.1 配色方案深色底 高饱和强调色的具体色值仿 360 风格的视觉核心是「深色背景 亮色高亮 卡片层次」。背景不用纯黑纯黑太硬用#1A1A2E或#16213E这种带一点蓝的深色会更舒服。卡片区用#0F3460或#1E1E2E比背景亮一档形成层次。强调色用#E94560这种偏红的粉色或者#00D9FF这种青色看你想走暖调还是冷调。Flet 里可以直接用十六进制字符串BG_DARK #1A1A2E CARD_BG #16213E ACCENT #E94560 TEXT_PRIMARY #EAEAEA TEXT_SECONDARY #A0A0B0选项卡选中态用ACCENT做背景文字用白色未选中态背景透明文字用TEXT_SECONDARY。悬停态可以加一个半透明的ACCENT比如#E9456040最后两位是透明度。Flet 支持八位十六进制色值前六位是颜色后两位是 alpha。内容区的卡片用CARD_BG边框可以加一条#2A2A4A的细线圆角 12 到 16 像素。卡片内部留白至少 16 像素否则会显得拥挤。标题文字用TEXT_PRIMARY正文用TEXT_SECONDARY字号差至少 4px形成视觉层级。3.2 布局参数间距、圆角、阴影的推荐值仿 360 风格的布局讲究「紧凑但不拥挤」。选项卡之间的间距用 8 到 12 像素选项卡内部的水平内边距用 16 到 24 像素垂直内边距用 8 到 12 像素。圆角方面选项卡用 20 像素做胶囊形卡片用 12 像素按钮用 8 像素。阴影不要用 Flet 默认的太散用ft.BoxShadow手动调ft.BoxShadow( spread_radius0, blur_radius20, color#00000060, offsetft.Offset(0, 4), )blur_radius控制阴影柔和度20 左右比较自然offset的 y 值给 4 让阴影往下偏模拟光源在上方。color用带透明度的黑色#00000060是 37.5% 透明度太重会显脏。整个界面的外边距用 24 像素内容区最大宽度限制在 1200 像素左右超宽屏上居中显示。Flet 里可以用ft.Row配合alignmentft.MainAxisAlignment.CENTER来实现居中。3.3 图标与角标用 Flet 内置图标还是自定义图片Flet 内置了 Material Icons通过ft.Icons.XXX调用覆盖了大部分常用图标。仿 360 风格里常见的设置、消息、用户、首页这些图标内置库里都有。用内置图标的好处是颜色和大小可以直接用参数控制不用额外处理图片资源。但如果你的设计稿里有品牌特定的图标或者需要多色图标那就得用ft.Image加载本地图片或网络图片。本地图片放在assets目录ft.Image(srcicon.png)即可。注意图片图标的大小要用width和height控制不要用sizesize只对字体图标生效。角标比如消息数量用ft.Stack把一个小Container叠在图标右上角ft.Stack( controls[ ft.Icon(ft.Icons.NOTIFICATIONS, size22, colorTEXT_SECONDARY), ft.Container( contentft.Text(3, size10, colorft.colors.WHITE), bgcolorACCENT, border_radiusft.border_radius.all(8), paddingft.padding.symmetric(horizontal4, vertical1), right0, top0, ), ], width28, height28, )right0, top0把角标定位到右上角width和height给Stack一个固定尺寸否则它会根据子控件撑开角标位置会飘。4. 避坑与排查自定义选项卡调试中最容易翻车的 5 个点4.1 点击后界面不更新控制台也没报错现象点击选项卡回调函数执行了selected_index也变了但界面纹丝不动。原因Flet 的更新机制要求你修改控件属性后调用self.update()或page.update()。如果你只是在回调里改了变量没有触发控件树的重建或更新界面不会刷新。解决确认回调里有没有调用update()。如果是替换controls列表里的元素改完后必须调self.update()。另外注意如果你是在Column的子类里操作self.update()更新的是这个Column及其子控件范围是对的。4.2 选项卡文字被截断或图标和文字不对齐现象选项卡里的文字显示不全或者图标和文字一高一低。原因Container的padding给得太小或者Row的vertical_alignment没设。Flet 的Row默认垂直对齐是START图标和文字基线不同就会错位。解决把Row的vertical_alignment设成ft.CrossAxisAlignment.CENTER让图标和文字垂直居中。padding的horizontal至少给 16vertical至少给 8。如果文字还是截断检查Container有没有设width限制去掉固定宽度让它自适应。4.3 动画卡顿或闪烁现象切换选项卡时动画一顿一顿的或者有白色闪一下。原因每次点击都重建整个头部控件树Flet 需要重新渲染所有子控件开销大。白色闪烁通常是背景色从透明变到有色时中间帧渲染出了默认背景。解决优化方案是只更新变化的部分不重建整个头部。把每个选项卡的Container存到一个列表里点击时只改对应Container的bgcolor和文字颜色然后调self.update()。这样 Flet 只重绘变化的控件流畅很多。白色闪烁可以在最外层Container上设一个和背景一致的bgcolor避免透明过渡时露出默认底色。4.4 选中态和悬停态冲突现象鼠标悬停时选项卡变色了但点击选中后移开鼠标颜色又变回去了。原因悬停态和选中态用了同一个属性比如bgcolor后设置的覆盖了先设置的。Flet 的on_hover事件里如果直接改bgcolor会把选中态的颜色冲掉。解决用两个不同的视觉通道区分悬停和选中。选中用bgcolor悬停用border或者opacity。或者在on_hover回调里先判断当前是不是选中态选中态不响应悬停变色。代码里加一个if self.selected_index i: return就行。4.5 内容区高度塌陷或溢出现象切换到一个内容很少的选项卡时内容区高度突然变小整个界面跳一下或者内容多了溢出边界。原因Container的高度默认由内容撑开不同内容高度不一致就会导致布局跳动。溢出则是因为没有设expand或滚动。解决给内容区设一个最小高度height400或者min_height400保证切换时高度稳定。如果内容可能超长把内容区包在一个ft.Column里设scrollft.ScrollMode.AUTO让它内部滚动而不是撑破布局。5. 进阶技巧把选项卡组件做成可配置的「皮肤系统」走到这里你已经有一套能跑的自定义选项卡了。但如果你像我一样做完一个项目后又被另一个项目要求「换个风格但逻辑不变」就会意识到把样式参数硬编码在组件里是个坑。更好的做法是把配色、圆角、间距、动画时长抽成一个配置字典组件初始化时传入这样同一套逻辑可以快速切换成不同皮肤。DEFAULT_SKIN { bg_dark: #1A1A2E, card_bg: #16213E, accent: #E94560, text_primary: #EAEAEA, text_secondary: #A0A0B0, tab_radius: 20, tab_padding_h: 20, tab_padding_v: 10, tab_spacing: 8, animation_ms: 250, content_radius: 12, content_padding: 20, } class SkinnableTabs(ft.Column): def __init__(self, tabs, content_builder, skinNone): super().__init__() self.skin {**DEFAULT_SKIN, **(skin or {})} # ... 后续用 self.skin[accent] 等替代硬编码这样你只需要改skin字典里的值就能把红色强调色换成青色把胶囊圆角换成方形把动画调快或调慢。我一般会准备两三套预设一套深色酷炫仿 360 那种一套浅色简洁适合后台管理一套高对比度适合展示场景。切换时只传不同的skin就行。验证这套组件是否真的可复用有个简单方法写一个测试页面放两个SkinnableTabs实例传不同的skin看它们是否互不干扰。如果第二个实例的样式影响了第一个说明哪里用了类变量或者全局状态得改成实例属性。还有一个实用技巧是给选项卡加键盘导航。Flet 支持on_keyboard_event你可以监听左右方向键切换selected_index。这对桌面端用户很友好尤其是表单填写场景手不用离开键盘就能切选项卡。实现上就是在Column上绑on_keyboard_event判断e.key是Arrow Left还是Arrow Right然后调_on_tab_click。最后说一个我踩过的坑Flet 的animate属性在部分旧版本里对bgcolor的支持不稳定会出现动画不生效或者颜色跳变。如果你遇到了先确认 Flet 版本然后试试把animate换成animate_opacity加opacity过渡或者用AnimatedContainer如果当前版本支持。我现在的习惯是任何涉及动画的属性先在最小 demo 里单独验证一遍确认生效了再往组件里集成省得在复杂界面里排查半天。希望帮到你。本文还有配套的精品资源点击获取
