13.Flutter学习之路AppBar实现顶部tab

AppBar

属性 描述
leading 在标题前面显示一个控件,在首页通常显示引用logo,在其他界面则是返回键
title 标题,通常显示当前页面的标题文字,可以放组件
actions 通常使用IconButton来表示,可以放按钮组
bottom 通常会放TabBar,在标题下面显示一个Tab导航栏
backgroundColor 导航背景颜色
iconTheme 图标样式
textTheme 文字样式
centerTitle 标题是否居中显示

TabBar

属性 描述
tabs 显示的标签内容,一般使用Tab对象,也可以是其他Widget
controller TabController(控制器)对象
isScrollable 是否可以滚动
indicatorColor 指示器颜色
indicatorWeight 指示器高度
indicatorPadding 底部指示器的Padding
indicator 指示器decoration,例如边框等
indicatorSize 指示器大小计算方式,TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
labelColor 选中label颜色
labelStyle 选中label的Style
unselectedLabelColor 未选中label的颜色
unselectedLabelStyle 未选中label的Style

DefaultTabController

属性 描述
initialIndex 默认显示第几个
length 总共显示几个tab页面
child 组件

Demo

接下来我们来看一下我们的如何使用DefaultTabController+Tab+AppBar实现顶部Tab
使用DefaultTabController时,我们应该注意的是,需要将其放在MaterialApp里,Scaffold的外层。


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: [
              Tab(text:'电影'),
              Tab(text:'电视剧'),
            ],
          ),
        ),
        body: TabBarView(//此处的每一个Widget代表的是每个tab所对应的页面
          children: [
            ListView(	
              children: [
                ListTile(title: Text('这是电影tab'),),
                ListTile(title: Text('这是电影tab'),),
                ListTile(title: Text('这是电影tab'),),
                ListTile(title: Text('这是电影tab'),),
              ],
            ),
            ListView(
              children: [
                ListTile(title: Text('这是电视剧tab'),),
                ListTile(title: Text('这是电视剧tab'),),
                ListTile(title: Text('这是电视剧tab'),),
                ListTile(title: Text('这是电视剧tab'),),
              ],
            )
          ],
        )
      ),
    );
  }
}

13.Flutter学习之路AppBar实现顶部tab_第1张图片

这里提一个小知识点debugShowCheckedModeBanner可以取消flutter那个右上角debug的标签

class MyApp extends StatelessWidget{

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

我们的展示看起来有那么一丝丑陋,那么我们来继续优化吧!
我们将AppBarTab放入我们的TabBar组件。


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

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

13.Flutter学习之路AppBar实现顶部tab_第2张图片

TabBarController实现顶部Tab切换


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

}

class _TabControllerPageState extends State 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: [
            Text('热销'),
            Text('推荐'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text('热销'),),
          Center(child: Text('推荐'),),
        ],
      ),
    );
  }
}

13.Flutter学习之路AppBar实现顶部tab_第3张图片

你可能感兴趣的:(Flutter学习)