Flutter使用TabBar问题小结

此章总结一下在Flutter项目中，使用TabBar遇到的一些问题。

TabBar取消下划线

TabBar自带下划线，若要取消的话让indicator属性等于新的BoxDecoration即可

TabBar(
        indicator: const BoxDecoration(),
        ....
    )

iPhone X系列底部横条重叠

当TabBar放在底部，作为bottomNavigationBar的时候，会被iPhoneX的底部横条覆盖，解决办法是使用SafeArea空间包住TabBar

@override
  Widget build(BuildContext context) {
    return Scaffold(
       ..... //此处代码省略

      bottomNavigationBar: Container(
    
        child: SafeArea(
          child: TabBar(
            controller: controller,
            .....
          ),
        ),
      ),
    );
  }

自定义的Tab图标点击变化

Tab的图标如果使用的是Icon，则自带点击图标变化效果。但如果用的是自定义Image，则需要通过setState管理Image引用的资源才能实现其效果。全部代码如下

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  
  TabController controller; //底部导航控制器
  int _currentIndex = 0; //选中位置

  String tab1Res; //Tab1的图片资源
  String tab2Res;  //Tab2的图片资源

  @override
  void initState() {
    super.initState();
    //初始化默认图片资源
    tab1Res = 'assets/images/ic_groups_activated.png';
    tab2Res = 'assets/images/ic_me.png';
 
    controller = TabController(length: 2, vsync: this);
    //TabBar监听器
    controller.addListener(() => _onTabChanged()); 
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       ..... //此处代码省略

     
      bottomNavigationBar: Container(
        height: 55,
        decoration: BoxDecoration(color: Colors.white, boxShadow: [
          BoxShadow(color: const Color(0xFFd0d0d0), blurRadius: 1.0)
        ]),
        child: SafeArea(
          child: TabBar(
            controller: controller,
            tabs: [
              Tab(
                  text: "Tab1",
                  icon: Image.asset(tab1Res, width: 30, height: 30)),
              Tab(
                  text: "Tab2",
                  icon: Image.asset(tab2Res, width: 30, height: 30)),
            ],
          ),
        ),
      ),
    );
  }

  /*
    底部导航点击事件
 */
  _onTabChanged() {
    if (controller.indexIsChanging) {
      if (this.mounted) {
        this.setState(() {
          switch (controller.index) {
            case 0:
              tab1Res = 'assets/images/ic_groups_activated.png';
              tab2Res = 'assets/images/ic_me.png';
              break;
            case 1:
              tab1Res = 'assets/images/ic_groups.png';
              tab2Res = 'assets/images/ic_me_activated.png';
              break;
          }
          _currentIndex = controller.index;
        });
      }
    }
  }
}

监听TabBar点击要判断其是否是位置变化和组件是否挂载

Controller监听器不仅仅是点击的监听，还有Axis变化等监听，需要双重判断

 /*
    底部导航点击事件
 */
  _onTabChanged() {
    if (controller.indexIsChanging) { //判断是否是选中位置发生变化
      if (this.mounted) {  //判断组件是否已被挂载
        this.setState(() {
          switch (controller.index) {
            case 0:
              tab1Res = 'assets/images/ic_groups_activated.png';
              tab2Res = 'assets/images/ic_me.png';
              break;
            case 1:
              tab1Res = 'assets/images/ic_groups.png';
              tab2Res = 'assets/images/ic_me_activated.png';
              break;
          }
          _currentIndex = controller.index;
        });
      }
    }
  }

大家可以关注下我的微信公众号，谢谢

image