Flutter Tips 01

1 AppBar

官方示意图

1.1 被限制了宽度的leading属性

在官方的这个图中，leading是被限制了宽度，且是个正方形。

leading=ConstrainedBox(constraints:constBoxConstraints.tightFor(width:_kLeadingWidth),
child:leading,);

constdouble_kLeadingWidth=kToolbarHeight;

constdoublekToolbarHeight=56.0;

从源码上看，leading的宽度被设置为了56PX。

1.2自定义AppBar

class ThemeAppBar extends StatefulWidget implements PreferredSizeWidget {

  @override
  _ThemeAppBarState createState() => _ThemeAppBarState();

  @override
  //设置AppBar的宽度
  Size get preferredSize => Size.fromHeight(160);
}

class _ThemeAppBarState extends State {
  @override
  Widget build(BuildContext context) {
    return Container(
      //SafeArea 外面再包一个Container组件并且对Container设置背景色，
      // 则背景色覆盖了SafeArea的白色背景
      color: Color(lnThemeLightColor),
      child: SafeArea(
          child: Container(
        color: Color(lnThemeLightColor),
        child: Column(
          children: [
            GestureDetector(
              child: Icon(
                Icons.arrow_back_ios,
                color: Color(lnBackArrowColor),
              ),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            Container(),
          ],
        ),
      )),
    );
  }
}

1.3自定义StatusBar

状态栏一般分为light浅色和dark深色两种，在自定义AppBar的时候，如果AppBar的背景色为浅色系的，则需要设置深色的StatusBar，反之亦然。

设置背景色也分两种情况，其一是没有使用Scaffold组件，也就是上面自定义AppBar的情况

1.3.1 无scaffold组件的情况

Widget build(BuildContext context) {
   
    return AnnotatedRegion(
        //SystemUiOverlayStyle.dark
        //SystemUiOverlayStyle.light
        value: SystemUiOverlayStyle.dark,
        child: Container(
        
        child: SafeArea(
            child: Container(),)));}

1.3.2 使用scaffold组件的情况

return  Material(
        child: Scaffold(
          appBar: AppBar(
            title: Text(),
           //Brightness.light  黑色文字
           //Brightness.dark   白色文字
            brightness: Brightness.light,
          ),
          body: Text()),
    );

1.3.3 AppBar属性

AppBar({
    Key key,
    this.leading,//一般是个按钮组件
    this.automaticallyImplyLeading = true,//自动设置leading，根据scaffold组件是否存在drawer或者是否可以会退来决定leading中的按钮组件的显示
    this.title,//页面级标题
    this.actions,//标题右边的按钮，传一个数组进去，多个IconButton组件，或一个PopupMenuButton组件。
    this.flexibleSpace,//FlexibleSpaceBar组件。
    this.bottom,//典型的用法是TabBar组件。必须继承PreferredSizeWidget组件。
    this.elevation,//AppBar的阴影
    this.shape,//当AppBar的阴影大于零时，展示
    this.backgroundColor,//背景色，设置的时候要协同设置[brightness], [iconTheme], [textTheme]，如果没有设置则使用[ThemeData.appBarTheme.color] 或[ThemeData.primaryColor]。
    this.brightness,
    this.iconTheme,
    this.actionsIconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
  }) : assert(automaticallyImplyLeading != null),
       assert(elevation == null || elevation >= 0.0),
       assert(primary != null),
       assert(titleSpacing != null),
       assert(toolbarOpacity != null),
       assert(bottomOpacity != null),
       preferredSize = Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),
       super(key: key);