flutter tabBar 选项卡自定义指示器
发布日期:2021-10-10 05:31:05 浏览次数:9 分类:技术文章

本文共 825 字,大约阅读时间需要 2 分钟。

使用flutter TabBar 做自定义选项卡。

       1.根据index  使用三目运算,缺点点击以后没有滑动效果。

tabs:TabMoudels.map((i) => Container(
  padding: EdgeInsets.all(0),
  height: 76.h,
  child: Tab(
child: Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
Container(
  width: MediaQuery.of(context).size.width/3,
  height: 76.h,
  child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
  Text(i),
  SizedBox(
height: 5,
  ),
  TabMoudels.indexOf(i)==_currentIndex?Container(
width: 15,
height: 4,
decoration: BoxDecoration(
  //这里面写颜色
  color: Colors.blue,
  borderRadius: BorderRadius.circular(1)
),
  ):Container()
],
  ),
)
  ],
),
  ),
)).toList()),

 

  2. 使用官方的指示器  

indicator: UnderlineTabIndicator(),可以找到UnderlineTabIndicator源码,自己新建一个文件,

修改 成为  StrokeCap.round; 这时候的指示器 就有圆角了。

 

滑动也有效果,美滋滋

转载地址:https://blog.csdn.net/qq_22049619/article/details/108428403 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:解决github提交时,403错误!
下一篇:react native 学习笔记

发表评论

最新留言

关注你微信了!
[***.191.171.2]2022年12月06日 16时41分48秒