Flutter使用TabBar問題小結

黃幹發表於2019-04-20
FluttertabBar

此章總結一下在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

相關文章