Flutter学习之AppBar

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情

本文主要介绍下AppBar的介绍和使用

1. AppBar

AppBar是material风格的应用程序栏，查看下其属性如下：

AppBar({
    Key key,
    this.leading, //widget类型，即可任意设计样式，表示左侧leading区域，通常为icon，如返回icon
    this.automaticallyImplyLeading = true, // 如果leading!=null，该属性不生效；如果leading==null且为true，左侧leading区域留白；如果leading==null且为false，左侧leading区域扩展给title区域使用
    this.title,//widget类型，即可任意设计样式，表示中间title区域，通常为标题栏
    this.actions,// List<Widget>类型，即可任意设计样式，表示右侧actions区域，可放置多个widget，通常为icon，如搜索icon、菜单icon
    this.flexibleSpace,
    this.bottom, //PreferredSizeWidget类型，appbar底部区域，通常为Tab控件
    this.elevation, //阴影高度，默认为4
    this.shape,//ShapeBorder 类型，表示描边形状
    this.backgroundColor, //Color类型，背景色
    this.brightness,//Brightness类型，表示当前appbar主题是亮或暗色调，有dark和light两个值，可影响系统状态栏的图标颜色
    this.iconTheme, //IconThemeData类型，可影响包括leading、title、actions中icon的颜色、透明度，及leading中的icon大小。
    this.actionsIconTheme,
    this.textTheme,// TextTheme类型，文本主题样式，可设置appbar中文本的许多样式，如字体大小、颜色、前景色、背景色等...
    this.primary = true,//true时，appBar会以系统状态栏高度为间距显示在下方；false时，会和状态栏重叠，相当于全屏显示。
    this.centerTitle, // boolean 类型，表示标题是否居中显示
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,//title区域水平方向与leading和actions的间距(padding)
    this.toolbarOpacity = 1.0,//toolbar区域透明度
    this.bottomOpacity = 1.0,//bottom区域透明度
  }

2. 使用

• normal

class BYAppBarNormal extends AppBar {
  BYAppBarNormal(BuildContext context, {Key? key}) : super(key: key,
      title: const Text("标题"),
      automaticallyImplyLeading:true,
  );
}

• 按钮

class BYAppBarTwo extends AppBar  {
  BYAppBarTwo(BuildContext context, {Key? key}) : super(key: key,
      title: const Text("左侧按钮"),
      actions: [
        IconButton(icon: const Icon(Icons.add_a_photo),onPressed: (){},),
        const SizedBox(width: 5,),
        IconButton(icon: const Icon(Icons.add_alarm),onPressed: (){},),
      ]

     );
}

• 阴影主题

class BYAppBarThree extends AppBar {
  BYAppBarThree(BuildContext context, {Key? key}) : super(key: key,
    iconTheme:const IconThemeData(size: 24),
    actionsIconTheme: const IconThemeData(size: 24),
    shape: BeveledRectangleBorder(
        side: const BorderSide(width: 1, color: Colors.red),
        borderRadius: BorderRadius.circular(10)),
    backgroundColor: Colors.orange,
    title: const Text('阴影主题'), toolbarTextStyle: const TextTheme(subtitle1: const TextStyle(color: Colors.red)).bodyText2, titleTextStyle: const TextTheme(subtitle1: TextStyle(color: Colors.red)).headline6,
  );
}

• 透明

class BYAppBarFour extends AppBar {
  BYAppBarFour(BuildContext context, {Key? key}) : super(key: key,
      title: const Text("透明"),
      toolbarOpacity: 0.4,
      bottomOpacity: 0.6
  );
}

• TabBar

可以设置bottom的属性

 Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orangeAccent,
          title: const Text('AppBar'),
          bottom:TabBar(
            tabs: const <Widget>[
              Text('1'),
              Text('2'),
              Text('3'),
              Text('4'),
              Text('5'),
            ],
            controller: TabController(length: 5,vsync: this),
          )
      )
  );