Flutter自定义tabbar任意样式

场景描述

最近在使用遇到几组需要自定义的tabbar或者类似组件,在百度查询资料中通常,需要自定义

TabIndicator extends Decoration

比如上图中的带圆角的指示器这样实现

就很麻烦, 搜出来的相关也是在此之处上自己画,主要再遇到一个稍微特殊的,比如带背景切换的,带特殊图形或者path的,费事费力。

有经验同学可能就会相当那我干脆直接用radiogroup做单选然后去关联page切换。但再劳神之前,

不如点进去tabbar看一下,flutter精髓之一就是万物皆为widget,局部子的自定义正式优势所在,

思路描述

Dart 复制代码
  /// The length of this list must match the [controller]'s [TabController.length]
  /// and the length of the [TabBarView.children] list.
  final List<Widget> tabs;

很明显这个是可以随意自定义的,

我们先定义好 两种切换状态的Widget

Dart 复制代码
getAllTabs() {
      return <Tab>[
        for (int i = 0; i < controller.tabs.length; i++)
          Tab(
            child: Stack(
              children: [
                ImageUtils.assetImage(
                    isSelect
                        ? "bg_data_tab_select"
                        : "bg_data_tab_unselect",
                    width: 72.w,
                    height: 34.w,
                    fit: BoxFit.cover),
                // 这个是我自定义背景 文字widget 你可以使用普通text
                UIText(
                  widgetWidth: 72.w,
                  widgetHeight: 34.w,
                  fontWeight: FontWeight.w500,
                  text: controller.tabs[i],
                  fontSize: 18.w,
                  textAlign: TextAlign.center,
                  widgetAlignment: Alignment.center,
                  fontColor: isSelect
                      ? const Color(0xFF202437)
                      : Colors.white,
                  letterSpacing: -0.04,
                )
              ],
            ),
          ),
      ];

此时我们只需要得到isSelect值,改变的时候动态去刷新state即可 将前面的isSelect 改为controller.tabIndex =i即可

Dart 复制代码
  TabBar(
                      onTap: (index) {
                        // 赋值
                        controller.tabIndex = index;
                        // 封装的刷新 一般对应setState
                        controller.update();
},
相关推荐
光影少年17 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_18 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891120 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾22 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu24 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym28 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫30 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫33 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat35 分钟前
前端性能优化2
前端
SameX37 分钟前
鸿蒙 Next 电商应用安全支付与密码保护实践
前端·harmonyos