Flutter 学习： AppBar 自定义顶部导航按钮 图标、

一. 复习上一节

1、获取当前日期
var dateTime = new DateTime.now();

2、转化时间戳
second = dateTime.millisecondsSinceEpoch;

3、时间戳转化日期
DateTime.fromMillisecondsSinceEpoch(second)

4、日期选择组件
showDatePicker( context: context, initialDate:,firstDate:lastDate: )

5、时间选择组件
showTimePicker( context: context, initialDate: )

二.标题栏左侧添加按钮

 appBar: AppBar(
            title: Text("标题"),
            leading: IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {

              },
            ),
          )

AppBar中添加leading 和ListTitle很像， IconButton就是可以点击的 icon，设置leading后。

三.标题栏右侧添加按钮

appBar: AppBar(
            title: Text("标题${currentIndex}"),
            centerTitle: true,
            leading: IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {},
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.add),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.art_track),
                onPressed: () {},
              )
            ],
          ),

• 效果图

image.png

• 注意

Android 中默认title 不居中可以在AppBar中设置centerTitle属性。

四.去掉debug图标

MaterialApp(
      debugShowCheckedModeBanner: false,)

五.实现顶部tab切换

• Flutter中通过使用TabBar实现顶部切换。

常见属性

• tabs :显示标签内容，一般使用Tab队形，也可以是其他的组件。
• controller：TabController对象
• isScrollable：内容多时是否可以滚动
• indicatorColor：指示器颜色
• indicatorWeight：指示器高度
• indicatorPadding：底部指示器的Padding

class MyButtonWidget extends State<Mypage2> {
  int count = 0;
  List list = new List();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: <Widget>[
              Tab(
                text: "热门",
              ),
              Tab(
                text: "推荐",
              )
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("tab1==1"),
                ),
                ListTile(
                  title: Text("tab1==2"),
                ),
                ListTile(
                  title: Text("tab1==3"),
                ),
                ListTile(
                  title: Text("tab1==4"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("tab2==1"),
                ),
                ListTile(
                  title: Text("tab2==2"),
                ),
                ListTile(
                  title: Text("tab2==3"),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

• 注意

使用tabBar
1、使用DefaultTabController包裹Scaffold ，并且必须设置length。
2、在AppBar上添加bottom属性，添加TabBar里面一般添加Tab组件。
3、在Scaffold body中添加TabBarView，注意和TabBar 的数量对应上。
4、因为我们在首页添加了TabBar 所以Scaffold是可以嵌套Scaffold的。

• 效果图

  
  image.png

• 中间 预留了 AppBar中title 所以我们吧TabBar往上提 提到title 上 。

title: TabBar(
            indicatorColor: Colors.red,
            labelColor: Colors.red,
            unselectedLabelColor: Colors.white,
            tabs: <Widget>[
              Tab(
                text: "热门",
              ),
              Tab(
                text: "推荐",
              )
            ],
          )

• 注意

indicatorColor:设置指示器颜色。
labelColor :设置tab 选中颜色。
unselectedLabelColor :设置tab 未 选中颜色。

• 效果图

  
  tabBar.gif

五.总结

1. 标题左侧右侧添加按钮

AppBar(title: Text("标题${currentIndex}"),
              centerTitle: true,
              leading: 
              actions: <Widget>[])

2.去除debug图标

MaterialApp(debugShowCheckedModeBanner: false,)

3.TabBar 实现顶部切换

class MyButtonWidget extends State<Mypage2> {
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar( title: TabBar(tabs: <Widget>[ ]),),
        body: TabBarView( children: <Widget>[],
        ),
      ),
    );
  }
}