尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

QML 自定义 TabBar:动态标签

发布时间:2026/9/30 2:38:21

资讯中心
01
ARTICLE

QML 自定义 TabBar:动态标签

QML 自定义 TabBar:动态标签
目录最终效果拆开讲讲标签由模型生成,不由代码写死两处边界处理把 contentItem 和 background 换掉animDone 是干什么的几个可以调的参数什么时候用小结完整代码工程下载有些标签栏的标签数量不固定,比如后台系统按模块开页签、浏览器开新标签,事先不知道会有几个。这种情况不能把标签一个个写死。思路就是把标签当成一组数据来管理:加标签就是加一条数据,删标签就是删一条数据,界面自动跟着变化。最终效果点「添加标签」就多出一个标签,新标签从中心弹出来;点「删除当前」标签收起消失,后面的自动往前补位。拆开讲讲整个动态标签就四块,一块一块说。标签由模型生成,不由代码写死TabBar本身是个容器,它的子项由Repeater生成,背后的数据来源是一个ListModel。所以标签有几条,取决于模型里有几条记录。三个按钮做的事都很短:往模型里加一条、删掉当前这条、清空全部。加完数据,Repeater会自动补一个新的TabButton出来,不需要你手动创建对象;删掉数据后对应的按钮会被销毁,后面的标签自动往前挪。这就是数据驱动的省事之处:你操作的是数据,位置关系交给视图。ListModel的数量是个会自动通知的属性,底部那行标签个数显示不用手动刷新,模型一变它自己就重算。/
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

◈

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

◐

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

▲

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。