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();
},
相关推荐
J总裁的小芒果10 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9613 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋15 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder16 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code34 分钟前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh2 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋3 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿3 小时前
【前端】CSS
前端·css
ggdpzhk3 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•5 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html