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;
        });
      }
    }
  }
複製代碼

你們能夠關注下個人微信公衆號，謝謝