Flutter布局-appbar

appbar组件的常用属性

属性名	说明
leading	在标题前面显示一个控件，在首页通常显示应用的logo；在其他界面显示为返回按钮
title	标题
actions	通常使用iconButton来表示，可以放按钮组
bottom	通常放tabbar，标题下面实现tab导航栏
backgroundColor	导航背景颜色
iconTheme	图标样式
textTheme	文字样式
centerTitle	标题是否居中显示

dart

Scaffold(
  appBar: AppBar(
    leading: IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {
          print('111');
        }),
    backgroundColor: Colors.red,
    title: Text('title'),
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            print('222');
          }),
    ],
  ),
);

自定义appBar定义顶部Tab切换

dart

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('xx'),
              ),
              ListTile(
                title: Text('xx'),
              ),
            ],
          ),
          ListView(
            children: <Widget>[
              ListTile(
                title: Text('qq'),
              ),
              ListTile(
                title: Text('qq'),
              ),
            ],
          ),
        ]),
      ),
    );