Flutter 组件之AppBar、顶部TabBar、仿今日头条顶部导航练习-蒲公英云

debugShowCheckedModeBanner:false,//去掉debug图标
initialRoute:'/initDemo',//初始化的时候加载的路由

AppBar自定义顶部按钮颜色、图标

appBar:AppBar(
    title:Text("AppBarButton"),
    centerTitle:true,//标题居中显示
    leading:IconButton(//如果有自定义按钮当前页面的默认返回按钮就被覆盖
        icon:Icon(Icons.menu),
        onPressed:(){ 
            print("点击AppBarButton图标");
        }
    ),
    actions:<Widget>[
        IconButton(
            icon:Icon(Icons.search),
            onPressed:(){ 
                print("点击search图标");
            }
        ),    
        IconButton(
            icon:Icon(Icons.settings),
            onPressed:(){ 
                print("点击settings图标");
            }
        ),    
    ]
)

AppBar自定义TabBar实现顶部Tab切换

class MyApp extends StatelessWidget{ 
  @override
  Widget build(BuildContext context) { 
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'TabBar Demo',
      home: new Scaffold(
        body: DefaultTabController(//顶部TabBar
            length: 2,//顶部TabBar数量
            initialIndex: 1,//默认选择第一项
            child: Scaffold(//这里配置bottom属性来写TabBar
              appBar: new AppBar(//顶部内容
                title: new Text('TabBar Demo'),
                leading: Icon(Icons.menu),
                actions: <Widget>[//尾部图标
                  Icon(Icons.search)
                ],
                bottom: new TabBar(//这里面写TabBar
                  tabs: <Widget>[
                         Tab(text: '选项一',icon: Icon(Icons.add_shopping_cart),),
                            Tab(text: '选项二',icon: Icon(Icons.wifi_tethering),),
                    ],
                  indicatorColor: Colors.black,//指示器颜色
                  indicatorWeight: 5,指示器高度
                  //指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
                  indicatorSize: TabBarIndicatorSize.label,,//指示器大小,底部边框
                  labelColor: Colors.limeAccent,//选中label颜色
                  unselectedLabelColor: Colors.deepOrange,//未选中label颜色
                ),
              ),
              body: new TabBarView(//关联上面的bottomTabBar 这里可以配置多个组件,
                  //数组数量跟TabBar要一致
                  children: <Widget>[
                        Text( 'TabBarView选项一'),
                        Text( 'TabBarView选项二'),
                    ],
              ),
            )
        ),
      ),
    );
  }
}

把TabBar放在导航最顶部（不要原生AppBar）

只需要把TabBar 从bottom中移到 appBar -> title 中

class MyApp extends StatelessWidget{ 
  @override
  Widget build(BuildContext context) { 
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'TabBar Demo',
      home: new Scaffold(
        body: DefaultTabController(//顶部TabBar
            length: 8,//顶部TabBar数量
            initialIndex: 1,默认选择第一项
            child: Scaffold(//这里配置bottom属性来写TabBar
              appBar: new AppBar(//顶部内容
                title: Row(//title 里面放TabBar组件
                    children:<Widget>[
                        Expanded:(
                            child:TabBar(//这里面写TabBar
                              isScrollable: true,//允许滚动
                              indicatorColor: Colors.black,//指示器颜色
                              indicatorWeight: 5,指示器高度
                              //指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
                              indicatorSize: TabBarIndicatorSize.label,,//指示器大小,底部边框
                              labelColor: Colors.limeAccent,//选中label颜色
                              unselectedLabelColor: Colors.deepOrange,//未选中label颜色
                              tabs: <Widget>[
                                      Tab(text: "热销1"),
                                      Tab(text: "推荐2"),
                                      Tab(text: "推荐3"),
                                      Tab(text: "推荐4") ,
                                      Tab(text: "推荐5"),
                                      Tab(text: "推荐6"),
                                      Tab(text: "推荐7"),
                                      Tab(text: "推荐8")
                                ],
                            ),
                        ),
                    ]
                ),
              ),
              body: new TabBarView(//关联上面的bottomTabBar 这里可以配置多个组件,
                  //数组数量跟TabBar要一致
                  children: <Widget>[
                        Text( 'TabBarView选项一'),
                        Text( 'TabBarView选项二'),
                        Text( 'TabBarView选项3'),
                        Text( 'TabBarView选项4'),
                        Text( 'TabBarView选项5'),
                        Text( 'TabBarView选项6'),
                        Text( 'TabBarView选项7'),
                        Text( 'TabBarView选项8'),
                    ],
              ),
            )
        ),
      ),
    );
  }
}

AppBar中自定义TabBar实现Tabs的另一种方法

controller的好处就是可以再initState 初始化时执行一些自定义事件。比如 _tabController.addListener();

步骤：

继承 SingleTickerProviderStateMixin
TabController _tabController; 配置controller参数
重写void initState() 初始化方法
_tabController = new TabController(length: 8, vsync: this); 实例化TabController
TabBar、TabBarView中配置 controller: this._tabController,

示例代码：

import 'package:flutter/material.dart';
/* * StatefulWidget Template */
class TabContollerPage extends StatefulWidget { 
  TabContollerPage({ Key key}) : super(key: key);
  @override
  _TabContollerPageState createState() => _TabContollerPageState();
}
//这里要继承 SingleTickerProviderStateMixin
class _TabContollerPageState extends State<TabContollerPage> with SingleTickerProviderStateMixin{ 
  TabController _tabController; //配置controller参数
  @override
  void initState() { //初始化已加载触发的方法
    // TODO: implement initState
    super.initState();
// TabController 两个参数一个tabBar 个数,另一个固定写法
    _tabController = new TabController(length: 8, vsync: this);
    //定义事件
    _tabController.addListener((){ 
      print(_tabController.index);
    });
  }
  //其他写法与刚才Scaffold 里的写法一样
  //需要注意的就是要在TabBar 和 TabView中配置controller
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.black26,
            title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: TabBar(
                    controller: this._tabController,//必须要配置这个包括下面的tabView
                    indicatorColor: Colors.blue,
                    labelColor: Colors.blue,
                    unselectedLabelColor: Colors.white,
                    indicatorSize: TabBarIndicatorSize.label,
                    isScrollable: true,//允许滚动
                    tabs: <Widget>[
                      Tab(text: "热销1"),
                      Tab(text: "推荐2"),
                      Tab(text: "推荐3"),
                      Tab(text: "推荐4") ,
                      Tab(text: "推荐5"),
                      Tab(text: "推荐6"),
                      Tab(text: "推荐7"),
                      Tab(text: "推荐8")
                    ],
                  ),
                )
              ],
            ),
          ),
          body: TabBarView(
            controller: this._tabController,//controller 必须配置
            children: <Widget>[
              ListView(
                children: <Widget>[
                  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"))
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(title: Text("第3个tab")),
                  ListTile(title: Text("第3个tab")),
                  ListTile(title: Text("第一个tab"))
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(title: Text("第4个tab")),
                  ListTile(title: Text("第二个tab")),
                  ListTile(title: Text("第二个tab"))
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(title: Text("第5个tab")),
                  ListTile(title: Text("第二个tab")),
                  ListTile(title: Text("第二个tab"))
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(title: Text("第6个tab")),
                  ListTile(title: Text("第二个tab")),
                  ListTile(title: Text("第二个tab"))
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(title: Text("第7个tab")),
                  ListTile(title: Text("第二个tab")),
                  ListTile(title: Text("第二个tab"))
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(title: Text("第8个tab")),
                  ListTile(title: Text("第二个tab")),
                  ListTile(title: Text("第二个tab"))
                ],
              )
            ],
          )
    );
  }
}