13. Flutter 학습 경로의 AppBar는 상단 탭을 구현합니다.

앱바

속성	설명하다
leading	제목 앞에 컨트롤이 표시되고, 참조는 일반적으로 홈 페이지에 표시되며 logo, Return 키는 다른 인터페이스에 표시됩니다.
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다음으로 ++를 사용하여 top을 달성하는 방법을 살펴보겠습니다 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,
    );
  }
}

디스플레이가 약간 보기 흉해 보이므로 계속해서 최적화해 보겠습니다.
우리는 우리의 구성 요소를 AppBar넣을 것입니다 .TabTabBar

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