13. La AppBar de la ruta de aprendizaje de Flutter implementa la pestaña superior

Barra de aplicaciones

Atributos	describir
leading	Se muestra un control delante del título, la referencia generalmente se muestra en la página de inicio logoy la tecla de retorno se muestra en otras interfaces.
title	Título, generalmente muestra el texto del título de la página actual, puede poner componentes
actions	Generalmente se usa IconButtonpara representar, puedes poner grupos de botones.
bottom	Generalmente colocado , mostrando una barra de navegación TabBardebajo del título.Tab
backgroundColor	Color de fondo de navegación
iconTheme	estilo de icono
textTheme	estilo de texto
centerTitle	Si el título se muestra en el centro

Barra de pestañas

Atributos	describir
tabs	El contenido de la etiqueta mostrada, el Tabobjeto de uso general, también puede ser otro.Widget
controller	TabControllerobjeto (controlador)
isScrollable	¿Es posible desplazarse?
indicatorColor	color del indicador
indicatorWeight	altura del indicador
indicatorPadding	indicador inferiorPadding
indicator	Indicadores decoration, como fronteras, etc.
indicatorSize	El método de cálculo del tamaño del indicador TabBarIndicatorSize.labeles igual al ancho del texto e TabBarIndicatorSize.tabigual al ancho de cada pestaña.
labelColor	labelcolor seleccionado
labelStyle	labelEstilo seleccionado
unselectedLabelColor	labelcolor no seleccionado
unselectedLabelStyle	labelEstilo no seleccionado

Controlador de pestaña predeterminado

Atributos	describir
initialIndex	Mostrar los primeros por defecto
length	Se muestran en total varias pestañas.
child	componentes

Manifestación

A continuación, echemos un vistazo a cómo usamos DefaultTabController++ para lograr la parte superior . Al usarlo Tab, debemos prestar atención a que debe colocarse en la capa exterior.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'),),
              ],
            )
          ],
        )
      ),
    );
  }
}

Aquí hay un pequeño punto de conocimiento debugShowCheckedModeBannerpara cancelar la etiqueta de depuración en la esquina superior derecha de flutter.

class MyApp extends StatelessWidget{

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

Nuestra pantalla se ve un poco fea, así que ¡continuemos optimizándola!
Pondremos AppBarnuestro componente Tab.TabBar

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 implementa el cambio de pestaña superior

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