flutter TabBar tab设置选中时黑色边框，未选中时灰色（左右滑动切换页面时tab选中效果延迟问题）

最新推荐文章于 2025-11-30 18:15:47 发布

原创最新推荐文章于 2025-11-30 18:15:47 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #javascript

在这里插入图片描述

_body(){
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _goodsTabBar(),
        Expanded(child: _goodsListTabView())
      ],
    );
  }

//商品类别tab
  _goodsTabBar() {
    if(_goodsCategoryList.isNotEmpty){
      return Padding(
          padding: EdgeInsets.only(bottom: 10.w),
          child: TabBar(
            controller: _tabController,
            // tabs的长度超出屏幕宽度后，TabBar，是否可滚动
            isScrollable: true,
            // 设置tab文字的类型
            labelStyle: TextStyle(
                fontSize: 26.sp, letterSpacing: 1),
            // 设置tab选中得颜色
            labelColor: JadeColors.grey_2,
            labelPadding: EdgeInsets.symmetric(horizontal: 10.w),
            // 设置tab未选中的颜色
            unselectedLabelColor: JadeColors.grey,
            // 设置tab未选中时文字的类型
            unselectedLabelStyle: TextStyle(fontSize: 26.sp, letterSpacing: 1),
            indicatorWeight: 0.01,
            indicatorColor: JadeColors.grey_2,
            tabs: _goodsCategoryList.asMap().entries
                .map((entry){
              int index = entry.key;
              ProductSelectGoodsCateBean value = entry.value;
              //AnimatedBuilder配置animation: _tabController.animation，实现在滑动时不显示边框线（减少是视觉上的对比，弱化延迟感），滑动完成显示时看起来舒服些
              return AnimatedBuilder(
                animation: _tabController.animation!,
                builder: (BuildContext context, Widget? child) {
                  bool isSelect = _tabController.animation?.value == index;
                  return Container(
                      padding: EdgeInsets.symmetric(horizontal: 26.w),
                      height: 96.w,
                      decoration: BoxDecoration(
                        color: isSelect ? Colors.white : JadeColors.grey_5,
                        border: isSelect
                            ? Border.all(color: JadeColors.grey_2, width: 1)
                            : null,
                        borderRadius: BorderRadius.circular(15),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(value.goodsCategoryParentIdNameByGoods ?? '',style: TextStyle(fontWeight: FontWeight.w600),),
                          if(value.goodsCategoryParentIdByGoods != null)
                            Padding(padding: EdgeInsets.only(top: 5.w),
                                child: Text('用户热购',style: TextStyle(fontSize: 20.sp)))
                        ],
                      )
                  );
                },
              );
            }).toList(),
          ));
    }else{
      return SizedBox.shrink();
    }
  }