13. L'AppBar du parcours d'apprentissage Flutter implémente l'onglet supérieur

Barre d'applications

Les attributs	décrire
leading	Un champ est affiché devant le titre, la référence est généralement affichée sur la page d'accueil logo, et la touche retour est affichée sur les autres interfaces
title	Titre, affiche généralement le texte du titre de la page actuelle, vous pouvez mettre des composants
actions	Habituellement utilisé IconButtonpour représenter, vous pouvez mettre des groupes de boutons
bottom	Généralement placé , affichant une barre de navigation TabBarsous le titreTab
backgroundColor	Couleur d’arrière-plan de navigation
iconTheme	style d'icône
textTheme	style de texte
centerTitle	Si le titre est affiché au centre

Barre d'onglets

Les attributs	décrire
tabs	Le contenu de l'étiquette affichée, l' Tabobjet à usage général, peut également être autreWidget
controller	TabControllerobjet (contrôleur)
isScrollable	est-il possible de faire défiler
indicatorColor	couleur de l'indicateur
indicatorWeight	hauteur de l'indicateur
indicatorPadding	indicateur inférieurPadding
indicator	Indicateurs decoration, tels que les frontières, etc.
indicatorSize	La méthode de calcul de la taille de l'indicateur TabBarIndicatorSize.labelest égale à la largeur du texte et TabBarIndicatorSize.tabégale à la largeur de chaque onglet
labelColor	labelcouleur sélectionnée
labelStyle	labelStyle sélectionné
unselectedLabelColor	labelcouleur non sélectionnée
unselectedLabelStyle	labelStyle non sélectionné

DefaultTabController

Les attributs	décrire
initialIndex	Afficher les premiers par défaut
length	Au total, plusieurs pages à onglet sont affichées
child	Composants

Démo

Voyons ensuite comment nous utilisons DefaultTabController++ pour atteindre le sommet.Lors de son utilisation Tab, nous devons faire attention au fait qu'il doit être placé dans la couche externe.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'),),
              ],
            )
          ],
        )
      ),
    );
  }
}

Voici un petit point de connaissance debugShowCheckedModeBannerpour annuler l'étiquette de débogage dans le coin supérieur droit de Flutter

class MyApp extends StatelessWidget{

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

Notre affichage a l'air un peu moche, alors continuons à l'optimiser !
Nous AppBarmettrons Tabnotre TabBarcomposant.

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 implémente la commutation des onglets supérieurs

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('推荐'),),
        ],
      ),
    );
  }
}