传奇开心果创意编程微博文系列
- 前言
- 一、使用tabs组件搭建桌面程序雏形框架，正宗、规范开局
- 二、自主创新自定义选项卡组件CustomTab实现自己多年夙愿和时尚追求的界面设计
- 三、修改标签被选中时会改变样式以指示其活动状态，打造升级版自定义选项卡组件customtab Pro
- 四、customtab Pro自定义选项卡升级版组件标签选中和未选中两种背景颜色变化重新配色，并且给选项卡标签启用墨水效果打造自定义选项卡升级版再升级版customtab Pro_up
- 五、对应编程任务修改相关文字和图标
- 六、使用Flet框架和自定义选项卡customtab Pro组件自定义标题栏实现仿360安全卫士界面自定义模板示例
- 七、购物清单助手桌面程序框架搭建完毕，二次开发有了基础
- 八、全文总结
前言
实现360桌面程序那样酷炫的界面，变异奇特的造型，是我很早以前的梦想，也可以说是夙愿了。试了很多UI框架，都不尽人意，或者是自定义能力有限，或者是自定义难度较大，灵活性不足。对我来说，可以说夙愿难了，最近发现了Flet框架，听介绍说控件自定义和控件组合能力特别强，还简单高效，漂亮时尚。我大胆试水，果然是这样，几天时间就如愿以偿，圆了少年梦想。以前，说起Python语言，做做后端开发还可以，Pythongui做成的UI界面基本就是土气，丑陋不堪。Flet框架的出现石破天惊，改变了这个局面，因为它继承了flutter时尚漂亮的基因，无处不在的丝滑灵动的动画，细微和谐赏心悦目的色差调色，漂亮美观的现代元素的组件比比皆是，信手拈来，都是专业级别的。语法继承了Python语言的贴近自然语言特性，不限于此，还做了大量组件封装，写代码和语法理解简单明了，高效快捷，容易上手，对初学者很友好。自适应和响应式布局，跨平台跨端都显示出了很好的适应性。一登场，一个华丽的亮相，就让人瞠目结舌，惊掉了眼镜。作为一个诞生才两年的UI框架，目前，还不尽人意的是打包安卓iOS手机应用必须拥有高速稳定的网络，普通网络成功率低。更大的痛点是继承了flutter依赖配置繁琐复杂，报错频繁，让人不胜其烦。写代码记事本都能写，显然不怎么依赖IDE，很贴心又舒心。但说起打包部署来，我不得不吐槽。就一个环境配置，Android studio要安装，VSstudio要安装，JDK要安装，AndroidSDK要安装，flutter要安装，grade要安装，都是重装备。小马拉大车那叫个费劲，满眼都是任性和尴尬！Flet开发是轻盈快捷，打包部署就是大雨天泥泞路上人抗马拉重装备，行军路上那叫个艰难！爱恨情仇，就都是她了！情未了，一波未平，一波又起，Flet框架为Python语言前端开发涂写了浓墨重彩的一笔。不容置疑，她的诞生，使Python成为了前端开发一道靓丽的风景线。
一、使用tabs组件搭建桌面程序雏形框架，正宗、规范开局
1.编程思路
创建新页面，添加tabs组件，使用tabs组件实现单击标签切换内容页面。
2.示例代码:
import flet as ft
def main(page: ft.Page):
t = ft.Tabs(
selected_index=1,
animation_duration=300,
tabs=[
ft.Tab(
text="Tab 1",
content=ft.Container(
content=ft.Text("这是 Tab 1"), alignment=ft.alignment.center
),
),
ft.Tab(
tab_content=ft.Icon(ft.icons.SEARCH),
content=ft.Text("这是 Tab 2"),
),
ft.Tab(
text="Tab 3",
icon=ft.icons.SETTINGS,
content=ft.Text("这是 Tab 3"),
),
],
expand=1,
)
page.add(t)
ft.app(target=main)
3.解释说明：
拿来主义，直接使用官方教程tabs组件源代码，创建购物清单助手桌面版程序窗口界面雏形框架。就从使用经典范例代码开始，正宗、规范开局。
4. 运行效果，截图为证
二、自主创新自定义选项卡组件CustomTab实现自己多年夙愿和时尚追求的界面设计
1.编程思路：
官方tabs组件不符合项目要求，为了拥有自己设想的选项卡特性，在Flet微信交流群网友的启迪和鼓励下，积极探索探究，苦心钻研，使用Flet组合控件的方式自主创新自定义选项卡控件CustomTab，开源发布，实现心中夙愿。这是本程序开发一大亮点，也为Flet生态和开源作出自己的贡献。以萤火虫微弱的光亮，在茫茫黑夜，为探索者脚下和眼前点亮一盏小桔灯。
2.示例代码:
示例代码如下：
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)
3. 解释说明：
“雄关漫道真如铁，而今迈步从头越。从头越，苍山如海，残阳多血。”引用毛主席的诗歌抒怀，开始下面的示例代码解释说明。
上述Python代码使用了Flet库来创建一个具有自定义标签栏的应用程序。以下是该代码的主要功能和组成部分的概述：
CustomTab类：这是一个自定义类，用于创建带有图标和文本的标签。每个标签都有独特的自定义样式，自定义图标和文本，每个标签可以指定文本、图标路径以及可选的点击事件处理函数。并且在自定义标签被选中时会改变样式以指示其活动状态。
main函数：这是应用程序的主入口点，定义了页面布局和交互逻辑。
初始化变量current_tab用于跟踪当前选中的标签。
content_container是一个Column控件，用于动态展示不同标签对应的内容。
定义了一个字典tab_contents，其中键是标签的文本，值是与这些标签关联的内容组件。
tab_clicked函数处理标签被点击时的行为，包括更新当前标签的状态（背景颜色）和更新内容容器以显示新的内容。
创建了一个包含多个CustomTab实例的水平布局Row，这些实例分别代表不同的标签，并且为每个标签指定了点击事件处理器。
最后将标签栏和内容容器添加到页面上，并通过ft.app(target=main)启动应用程序。
整体来看，这段代码实现了一个新颖漂亮的标签切换界面，用户可以通过点击美观漂亮的标签来浏览不同的内容区域。每个标签都有独特的自定义样式，自定义图标和文本，并且在被选中时会改变样式以指示其活动状态。
“黄洋界上炮声隆，报道敌军宵遁。”以毛主席的另外两句诗抒怀结束这一段解说。
4. 运行效果，截图为证
三、修改标签被选中时会改变样式以指示其活动状态，打造升级版自定义选项卡组件customtab Pro
1.编程思路:
未选中图标背景为light green，选中背景变为light yellow，通过标签被选中时会改变样式以指示其活动状态。初始为：未选中。
2.示例代码:
示例代码如下：
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)
3. 解释说明
让我们详细说明一下代码中的颜色变化逻辑及其具体实现方式。
颜色变化逻辑概述
在这个代码中，实现了标签点击时背景颜色的变化逻辑。具体来说，有以下几个关键点：
初始状态：
所有标签的初始背景色均为亮绿色 (ft.colors.LIGHT_GREEN)。
点击事件处理：
当用户点击某个标签时，会触发 tab_clicked 函数。
在 tab_clicked 函数中，首先获取当前被点击的标签文本。
如果之前有选中的标签（即 current_tab 不为 None），则将它的背景色恢复为亮绿色。
将当前点击的标签背景色改为黄色 (ft.colors.YELLOW)。
更新页面以反映背景颜色的变化。
页面更新：
只对必要的控件进行更新，以减少页面重绘的次数。
具体来说，先更新之前的标签背景色，再更新当前点击的标签背景色，最后更新内容容器中的内容。
详细步骤说明
初始化标签：
每个标签的初始背景色设置为亮绿色 (ft.colors.LIGHT_GREEN)。
标签的 on_click 属性绑定到 tab_clicked 函数。
点击事件处理：
tab_clicked 函数接收点击事件 e。
获取当前点击的标签文本。
如果之前有选中的标签（即 current_tab 不为 None），将其背景色恢复为亮绿色，并更新页面。
将当前点击的标签背景色改为黄色，并更新页面。
清空内容容器，并添加新的页面内容。
打造升级版自定义选项卡组件任务完成，自定义选项卡组件更加优秀。
Flet组件tabs自主创新自定义组件升级版CustomTab Pro源代码
修改标签被选中时会改变样式以指示其活动状态，打造升级版自定义选项卡组件。
未选中图标背景为light green，选中背景变为yellow，通过标签被选中时会改变样式以指示其活动状态。初始为：未选中。
CustomTab类：这是一个自定义类，用于创建每个标签都有独特的自定义样式，自定义图标和文本的标签。每个标签可以指定文本、图标路径以及可选的点击事件处理函数。
main函数：这是应用程序的主入口点，定义了页面布局和交互逻辑。
初始化变量current_tab用于跟踪当前选中的标签。
content_container是一个Column控件，用于动态展示不同标签对应的内容。
定义了一个字典tab_contents，其中键是标签的文本，值是与这些标签关联的内容组件。
tab_clicked函数处理标签被点击时的行为，包括更新当前标签的状态（背景颜色）和更新内容容器以显示新的内容。
创建了一个包含多个CustomTab实例的水平布局Row，这些实例分别代表不同的标签，并且为每个标签指定了点击事件处理器。
最后将标签栏和内容容器添加到页面上，并通过ft.app(target=main)启动应用程序。
整体来看，这段代码实现了一个新颖漂亮的标签切换界面，用户可以通过点击美观漂亮的标签来浏览不同的内容区域。每个标签都有独特的自定义样式，自定义图标和文本，并且在被选中时会改变样式以指示其活动状态。
4.运行效果，截图为证
四、customtab Pro自定义选项卡升级版组件标签选中和未选中两种背景颜色变化重新配色，并且给选项卡标签启用墨水效果打造自定义选项卡升级版再升级版customtab Pro_up
1.编程思路
bgcolor=ft.colors.GREEN_200, # 背景颜色设置为浅绿色，bgcolor=ft.colors.AMBER, # 背景颜色设置为琥珀色。
设置ink=True, # 启用墨水效果。给自定义选项卡标签开启墨水效果。这将使得当用户点击或触摸选项卡标签时，会出现一个视觉反馈，即所谓的“墨水溅洒”效果。
2.示例代码
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.GREEN_200 # 设置初始背景色为浅绿色
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=
扫一扫
946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
