flutter tabBar 选项卡自定义指示器

使用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; 这时候的指示器 就有圆角了。

 

滑动也有效果，美滋滋