flutter - AppBar 参数设置布局效果

class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(// backgroundColor: Colors.red,// backgroundColor: Color(0xff45ff41),leading: Cont

素燃

3024人浏览 · 2020-10-20 11:28:30

素燃 · 2020-10-20 11:28:30 发布

在这里插入图片描述

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // backgroundColor: Colors.red,
        // backgroundColor: Color(0xff45ff41),
        leading: Container(
          padding: EdgeInsets.all(8),
          child: ClipOval(
            child: Image.network(
              "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab5870542e8d4479bfb899ea7a195e4d~tplv-k3u1fbpfcp-watermark.image",
              fit: BoxFit.cover,
            ),
          ),
        ),
        title: Text("首页"),
        centerTitle: true,
        actions: [
          Row(
            children: [
              Text("右1"),
              SizedBox(width: 10),
              Text("右2"),
              SizedBox(width: 10),
              Text("右3"),
              SizedBox(width: 10),
            ],
          )
        ],
        elevation: 0.0
      ),
    );
  }
}

常用属性	说明
leading	左侧元素自定义，是一个widget部件
leadingWidth	AppBar 的leading的宽度，假如leading 里是文字的话，如果不设置这个属性，当你的文字很多时，会换行的
title	AppBar 的标题，也是一个widget
titleSpacing	设置AppBar 的标题撑开左右两边的距离
centerTitle	控制AppBar 的标题是否居中，布尔值，默认false，
actins	AppBar 右侧附加的部分，比如一个按钮，一个文字等，需要传入一个List（数组）
backgroundColor	AppBar 的背景色，传入一个Color类型的颜色，如 Colors.red, Color(0xff45ff41)
elevation	AppBar 的底部的阴影区大小，默认是4.0, 设置为0.0 会和 body 里的元素连在一起
shadowColor	AppBar 的底部的阴影颜色，同 backgroundColor 参数用法
toolbarHeight	设置AppBar 部件的高度，传入 double 类型的值，如 25, 40.2