Flutter-AppBar(顶端栏)

先上个图，直观感受一下AppBar的内部结构
AppBar是一个顶端栏，对应着 Android 的 Toolbar。

image

AppBar 有以下常用属性：

leading → Widget - 在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮。如果省略了 leading ，但 AppBar 在带有 Drawer 的 Scaffold 中，则会插入一个 button 以打开 Drawer。如果没有Drawer ，默认的是个返回箭头，可以通过设置来关闭automaticallyImplyLeading 为false ，

automaticallyImplyLeading → bool- 设置automaticallyImplyLeading= true：如果有 leading 这个不会管用；如果没有leading ，当有侧边栏的时候， false：不会显示默认的图片，true 会显示默认图片，并响应打开侧边栏的事件

title → Widget - Toolbar 中主要内容，通常显示为当前界面的标题文字。

actions → List - 一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单。

bottom → PreferredSizeWidget - 一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏。

elevation → double - 控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当 SliverAppBar 和内容同级的时候，该值为 0，当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值。

flexibleSpace → Widget - 一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用。

backgroundColor → Color - Appbar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用。

brightness → Brightness - Appbar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness。

iconTheme → IconThemeData - Appbar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme。

textTheme → TextTheme - Appbar 上的文字样式。

centerTitle → bool - 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样。

toolbarOpacity → double

bottomOpacity → double

image

demo

class _StatisticsPageState extends State  with SingleTickerProviderStateMixin{

  final List _tabs = [
    Tab(text: '关注'),
    Tab(text: '推按'),
    Tab(text: '视频'),
    Tab(text: '游戏'),
    Tab(text: '音乐'),
    Tab(text: '体育'),
    Tab(text: '生活'),
    Tab(text: '图片'),
  ];

  var _tabController;
  @override
  void initState() {
    // TODO: implement initState
    _tabController = TabController(vsync: this, length: _tabs.length);
    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: _drawer(context),
        body: TabBarView(
        controller: _tabController,
            children: _tabs.map((Tab tab) {
              return Center(child:Text(tab.text));
            }).toList(),
        ),
        appBar: AppBar(
            leading: Icon(Icons.home),
            // 如果没有设置这项， 二级页面 会默认是返回箭头  ， 有侧边栏的页面默认有图标（用来打开侧边栏）
            automaticallyImplyLeading: true,
            // 如果有 leading  这个不会管用 ； 如果没有leading ，当有侧边栏的时候， false：不会显示默认的图片，true 会显示 默认图片，并响应打开侧边栏的事件
            title: Text("标题"),
            centerTitle: true,
            // 标题是否在居中
            actions: [
              IconButton(
                  icon: Icon(Icons.save), tooltip: 'Add Alarm', onPressed: () {
                    // 不写onPressed 默认，这个图片不能点击 且会有不可点击的样式（和 写了这个有不同的样式）
      // 如果有 onPressed 但是值是null 也会是不可点击的样式
                  }),
              PopupMenuButton(
              itemBuilder: (BuildContext context) => >[
              _selectView(Icons.message, '发起群聊', 'A'),
              _selectView(Icons.group_add, '添加服务', 'B'),
              _selectView(Icons.cast_connected, '扫一扫码', 'C'),
              ],
                onSelected: (String action) {
                // 点击选项的时候
                  switch (action) {
                    case 'A': break;
                    case 'B': break;
                    case 'C': break;
                    }
                  },
              ),
            ],
            bottom: TabBar(
                isScrollable: true,
                labelColor: Colors.redAccent, // 选中的Widget颜色
            indicatorColor:Colors.redAccent, // 选中的指示器颜色
            labelStyle:   TextStyle(fontSize: 15.0),// 必须设置，设置 color 没用的，因为 labelColor 已经设置了
            unselectedLabelColor: Colors.white,
            unselectedLabelStyle:   TextStyle(
                fontSize: 15.0), // 设置 color 没用的，因为unselectedLabelColor已经设置了
            controller: _tabController,
            // tabbar 必须设置 controller 否则报错
            indicatorSize: TabBarIndicatorSize.label,
            // 有 tab 和 label 两种
            tabs: _tabs,
        ),
        elevation: 0.1,
        // 导航栏Z轴的高度，默认是1  默认就是有高度 阴影的
        //backgroundColor: Colors.red,// 导航栏的颜色  默认是 ThemeData 的颜色
//          flexibleSpace: FlexibleSpaceBar(title: Text("你号"),),//这个堆叠在工具栏上面  一般 appbar不用  主要用在 SliverAppBar上
          brightness: Brightness.light, //状态栏的深度 有白色和黑色两种主题
          titleSpacing: 10,//flexibleSpace 和 title 的距离  默认是重合的
          toolbarOpacity: 0.5,// 导航栏透明度 默认是1 ，不包括flexibleSpace
          bottomOpacity: 0.5,
    ),

    );
  }
}

// 返回每个隐藏的菜单项
_selectView(IconData icon, String text, String id) {
  return PopupMenuItem(
      value: id,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
           Icon(icon, color: Colors.blue),
           Text(text),
        ],
      )
  );
}
//返回bottomTabbar项
 _drawer(BuildContext context) {
  
  return Drawer(
       child: ListView(
         padding: EdgeInsets.zero,
         children: [
           DrawerHeader(
             decoration: BoxDecoration(
               color: Colors.lightBlueAccent,
             ),
             child: Center(
               child: SizedBox(
                 width: 60.0,
                 height: 60.0,
                 child: CircleAvatar(
                   child: Text('头像'),
                 ),
               ),
             ),
           ),
           ListTile(
             title: Text('Item 1'),
             leading:   CircleAvatar(
               child:   Icon(Icons.school),
             ),
             onTap: () {
               Navigator.pop(context);
               },
           ),
           ListTile(
             title: Text('Item 2'),
             leading:   CircleAvatar(
               child:   Text('B2'),
             ),
             onTap: () {
               Navigator.pop(context);
               },
),
           ListTile(
             title: Text('Item 3'),
             leading: CircleAvatar(
               child: Icon(Icons.list),
             ),
             onTap: () {
               Navigator.pop(context);
               },
           ),
         ],
       ),
  );
}

关于SliverAppBar全解析请参看
https://blog.csdn.net/yechaoa/article/details/90701321
TabBar、TabBarView的使用请参看
https://blog.csdn.net/yechaoa/article/details/90482127

Flutter-AppBar(顶端栏)

你可能感兴趣的:(Flutter-AppBar(顶端栏))