AppBar 自定義頂部導航按鈕 圖標、顏色 以及 TabBar 定義頂部 Tab 切換 通過TabController 定義TabBar

一、Flutter AppBar 自定義頂部按鈕圖標、顏色

leading   在標題前面顯示的一個控件，在首頁通常顯示應用的 logo；在其他界面通常顯示為返回按鈕

title  標題，通常顯示為當前界面的標題文字，可以放組件

actions  通常使用 IconButton 來表示，可以放按鈕組

bottom  通常放 tabBar，標題下面顯示一個 Tab 導航欄

backgroundColor  導航背景顏色

iconTheme  圖標樣式

textTheme  文字樣式

centerTitle  標題是否居中顯示

 

 

 

二、Flutter AppBar 中自定義 TabBar 實現頂部 Tab 切換

tabs  顯示的標簽內容，一般使用 Tab 對象,也可以是其他的 Widget

controller TabController 對象

isScrollable  是否可滾動

indicatorColor  指示器顏色

indicatorWeight 指示器高度

indicatorPadding  底部指示器的 Padding

indicator  指示器 decoration，例如邊框等

indicatorSize  指示器大小計算方式，TabBarIndicatorSize.label 跟文字等寬,TabBarIndicatorSize.tab 跟每個 tab 等寬

labelColor  選中 label 顏色

labelStyle 選中 label 的 Style

labelPadding  每個 label 的 padding 值

unselectedLabelColor  未選中 label 顏色

unselectedLabelStyle   未選中 label 的 Style

 

案例代碼

import 'package:flutter/material.dart';

class ClassIf extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Row( // 或者buttom
            children: <Widget>[
              Expanded(
                flex: 1,
                child: TabBar(
                  tabs: <Widget>[
                      Tab(text: '分類一'),
                      Tab(text: '分類二')
                    ],
                  ),
              )
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                Text('132'),
                Text('132'),
                Text('132'),
              ],
            ),
            ListView(
              children: <Widget>[
                Text('132'),
                Text('132'),
                Text('132'),
              ],
            )
          ],
        ),
      ),
    );
  }
}

三、Flutter AppBar 中自定義 TabBar 實現 Tabs 的另一種方法 帶數據,帶下拉更多的時候

   通過TabController 定義TabBar

      頁面必須繼承StatefulWidget

     頁面必須實現SingleTickerProviderStateMixin

     頁面初始化時，實例化TabController
     在TabBar組件中指定controller為我們實例化的TabController
     在TabBarView組件中指定controller為我們實例化的TabController

 主要是監聽TabBar與TabBarView的交互。比如，我們可以在tab切換時加載不同數據；可以自定義切換動畫等。

參數詳解
  animation 官方：一個動畫，其值表示TabBar所選選項卡指示器的當前位置以及TabBar 和TabBarView的scrollOffsets。
  index 當前tab索引，//跳轉后執行
  indexIsChanging 動畫是時為true
  length tab總數
  offset 動畫的值和索引之間的差異。偏移量必須在-1.0和1.0之間
  previousIndex 前tab索引，////跳轉后執行

方法詳解 
  animateTo 從當前tab跳到目標tab並執行動畫
  dispose 銷毀
  addListener 添加監聽
  noSuchMethod 當訪問不存在的屬性或方法時調用（不知道是什么鬼）
  notifyListeners 調用所有監聽器
  removeListener 清除監聽器

import 'package:flutter/material.dart';
class AppBardemoPage extends StatefulWidget {
  AppBardemoPage({Key key}) : super(key: key);

  _AppBardemoPageState createState() => _AppBardemoPageState();
}

class _AppBardemoPageState extends State<AppBardemoPage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  void initState() {
    super.initState();

_tabController = TabController(length: 3, vsync: this, initialIndex: 0);

_tabController.addListener(() {
  print(_tabController.index);
});

  }

  @override Widget build(BuildContext context) {
    return new Scaffold(appBar: new AppBar(
      title: new Text('頂部 tab 切換'),
      bottom: new TabBar(tabs: <Widget>[
        new Tab(icon: new Icon(Icons.directions_bike),),
        new Tab(icon: new Icon(Icons.directions_boat),),
        new Tab(icon: new Icon(Icons.directions_bus),),
      ], controller: _tabController,),),
      body: new TabBarView(controller: _tabController,
        children: <Widget>[
          new Center(child: new Text('自行車')),
          new Center(child: new Text('船')),
          new Center(child: new Text('巴士')),
        ],),);
  }
}

自定義tabBar 不放在appBar里面 

class TransactionRecord extends StatefulWidget{
  createState() => _TransactionRecord();
}

class _TransactionRecord extends State with SingleTickerProviderStateMixin{
  var _tabController;
  @override
  initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this, initialIndex: 0);
    _tabController.addListener(() {
      print(_tabController.index);
    });
  }
  dispose() {
    super.dispose();
    _tabController.dispose();
  }
  Widget build(BuildContext context) {
    Screen.init(context);
    // TODO: implement build
    return DefaultTabController(
      length: 3,
      child: Scaffold(
          body: Container(
              alignment: Alignment.centerLeft,
              color: ColorGather.colorBg(),
              child: Column(
                children: <Widget>[
                  Container(
                    height: 50, color: Colors.white,
                    child: TabBar(
                      labelPadding: EdgeInsets.all(0),
                      controller: _tabController,
                      tabs: <Widget>[
                        Tab(child: Text('時間篩選', style: TextStyle(fontSize: Screen.width(28)))),
                        Tab(child: Text('時間篩選', style: TextStyle(fontSize: Screen.width(28)))),
                        Tab(child: Text('時間篩選', style: TextStyle(fontSize: Screen.width(28)))),
                      ],
                      onTap: (val) {},
                    ),
                  ),
                  Expanded(
                    child: TabBarView(
                      controller: _tabController,
                      children: <Widget>[
                        Text('123'),
                        Text('123'),
                        Text('123'),
                      ],
                    ),
                  )
                ],
              )
          )
        ),
      );
  }
}

// 不確定數量

DefaultTabController(
  length: titleList.length,
  child: 
)