13. Flutter ラーニング パスの AppBar はトップ タブを実装します

アプリバー

属性	説明する
leading	コントロールはタイトルの前に表示され、参照は通常ホーム ページに表示されlogo、リターン キーは他のインターフェイスに表示されます
title	タイトル、通常は現在のページのタイトル テキストが表示され、コンポーネントを配置できます
actions	通常IconButton、ボタングループを表すために使用されます。
bottom	通常は配置され、TabBarタイトルの下にTabナビゲーション バーが表示されます
backgroundColor	ナビゲーションの背景色
iconTheme	アイコンのスタイル
textTheme	テキストスタイル
centerTitle	タイトルを中央に表示するかどうか

タブバー

属性	説明する
tabs	表示されるラベルの内容は、汎用Tabオブジェクトであり、他のものでも構いませんWidget
controller	TabController(コントローラー) オブジェクト
isScrollable	スクロールすることは可能ですか
indicatorColor	インジケーターの色
indicatorWeight	インジケーターの高さ
indicatorPadding	ボトムインジケーターPadding
indicator	decoration境界線などのインジケーター
indicatorSize	インジケーターのサイズの計算方法は、TabBarIndicatorSize.labelテキストの幅とTabBarIndicatorSize.tab各タブの幅に等しくなります。
labelColor	選択したlabel色
labelStyle	選択したlabelスタイル
unselectedLabelColor	未選択のlabel色
unselectedLabelStyle	選択されていないlabelスタイル

デフォルトタブコントローラー

属性	説明する
initialIndex	デフォルトで最初のいくつかを表示する
length	合計複数のタブページが表示されます
child	コンポーネント

デモ

DefaultTabController次に、 ++を使用して最上位を実現する方法を見てみましょう++を使用する場合はTab、外側の層に配置する必要があることに注意してください。AppBarTab
DefaultTabControllerMaterialAppScaffold

class AppBarDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,//默认显示第几个
      length: 2,//有几个tab页面
      child: Scaffold(
        appBar: AppBar(
          title: Text('AppBarDemoPage'),
          bottom: TabBar(
            //将tab放在appbar中
            tabs: <Widget>[
              Tab(text:'电影'),
              Tab(text:'电视剧'),
            ],
          ),
        ),
        body: TabBarView(//此处的每一个Widget代表的是每个tab所对应的页面
          children: <Widget>[
            ListView(	
              children: <Widget>[
                ListTile(title: Text('这是电影tab'),),
                ListTile(title: Text('这是电影tab'),),
                ListTile(title: Text('这是电影tab'),),
                ListTile(title: Text('这是电影tab'),),
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text('这是电视剧tab'),),
                ListTile(title: Text('这是电视剧tab'),),
                ListTile(title: Text('这是电视剧tab'),),
                ListTile(title: Text('这是电视剧tab'),),
              ],
            )
          ],
        )
      ),
    );
  }
}

debugShowCheckedModeBannerFlutterの右上にあるデバッグラベルを解除するためのちょっとした知識ポイントです。

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //是否显示debug
      debugShowCheckedModeBanner: false,
//      home: Tabs(),等同于 initialRoute: '/',
      initialRoute: '/',     //初始化的时候加载的路由
      onGenerateRoute: onGenerateRoute,
    );
  }
}

ディスプレイは少し見にくいので、最適化を続けましょう。コンポーネントを入れていき
ます。AppBarTabTabBar

class AppBarDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,//默认显示第几个
      length: 2,//有几个tab页面
      child: Scaffold(
        appBar: AppBar(

          title:Row(
            children: <Widget>[
              Expanded(
                flex: 1,
                child:  TabBar(
                  //将tab放在appbar中
                  tabs: <Widget>[
                    Tab(text:'电影'),
                    Tab(text:'电视剧'),
                  ],
                ),
              )
            ],
          )
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(title: Text('这是电影tab'),),
                ListTile(title: Text('这是电影tab'),),
                ListTile(title: Text('这是电影tab'),),
                ListTile(title: Text('这是电影tab'),),
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(title: Text('这是电视剧tab'),),
                ListTile(title: Text('这是电视剧tab'),),
                ListTile(title: Text('这是电视剧tab'),),
                ListTile(title: Text('这是电视剧tab'),),
              ],
            )
          ],
        )
      ),
    );
  }
}

TabBarController は上部のタブ切り替えを実装します

class TabControllerPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _TabControllerPageState();
  }

}

class _TabControllerPageState extends State<TabControllerPage> with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void dispose() {    //生命周期函数-组件被销毁时调用。
    // TODO: implement dispose
    super.dispose();
    _tabController.dispose();//进行销毁
  }
  @override
  void initState() {    //生命周期函数-组件初始化时调用
    // TODO: implement initState
    super.initState();
    _tabController=TabController(
      vsync: this,
      initialIndex: 0,//默认加载第几个
      length: 2
    );

    _tabController.addListener((){  //监听器。
      print(_tabController.index);//获取下标
      setState(() {//进行改变

      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabController实现顶部tab切换'),
        bottom: TabBar(
          controller: _tabController, //此处必须填入
          tabs: <Widget>[
            Text('热销'),
            Text('推荐'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Center(child: Text('热销'),),
          Center(child: Text('推荐'),),
        ],
      ),
    );
  }
}