1 单子布局Widget

(1) Align

  1. const Align({
  2.   Key key,
  3.   this.alignment: Alignment.center, // 对齐方式，默认居中对齐
  4.   this.widthFactor, // 宽度因子，不设置的情况，会尽可能大
  5.   this.heightFactor, // 高度因子，不设置的情况，会尽可能大
  6.   Widget child // 要布局的子Widget
  7. })

image.png

  2. class MyHomeBody extends StatelessWidget {
  3.   @override
  4.   Widget build(BuildContext context) {
  5.     return Align(
  6.       child: Icon(Icons.pets, size: 36, color: Colors.red),
  7.       alignment: Alignment.bottomRight,
  8.       widthFactor: 6,
  9.       heightFactor: 3,
  10.     );
  11.   }
  12. }

(2) Center

Center组件继承自Align，只是将alignment设置为Alignment.center
image.png

  1. class Center extends Align {
  2.   const Center({
  3.     Key key,
  4.     double widthFactor,
  5.     double heightFactor,
  6.     Widget child
  7.   }) : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
  8. }

(3) Padding

盒子模型中padding是内边距, margin是外边距,
但在flutter中, padding是一个容器, 内外边距均可由padding实现

  1. const Padding({
  2.   Key key,
  3.   @requiredthis.padding, // EdgeInsetsGeometry类型（抽象类），使用EdgeInsets
  4.   Widget child,
  5. })

image.png

  1. class MyHomeBody extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return Padding(
  5.       padding: EdgeInsets.all(20),
  6.       child: Text(
  7.         "莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。",
  8.         style: TextStyle(
  9.             color: Colors.redAccent,
  10.             fontSize: 18
  11.         ),
  12.       ),
  13.     );
  14.   }
  15. }

(4) Container

Container组件类似于Android中的View，iOS中的UIView。
如果你需要一个视图，有一个背景颜色、图像、有固定的尺寸、需要一个边框、圆角等效果，那么就可以使用Container组件。

  1. Container({
  2.   this.alignment,
  3.   this.padding, //容器内补白，属于decoration的装饰范围
  4.   Color color, // 背景色
  5.   Decoration decoration, // 背景装饰
  6.   Decoration foregroundDecoration, //前景装饰
  7.   double width,//容器的宽度
  8.   double height, //容器的高度
  9.   BoxConstraints constraints, //容器大小的限制条件
  10.   this.margin,//容器外补白，不属于decoration的装饰范围
  11.   this.transform, //变换
  12.   this.child,
  13. })

image.png

  1. class MyHomeBody extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return Center(
  5.       child: Container(
  6.         color: Color.fromRGBO(3, 3, 255, .5),
  7.         width: 100,
  8.         height: 100,
  9.         child: Icon(Icons.pets, size: 32, color: Colors.white),
  10.       ),
  11.     );
  12.   }
  13. }

1) BoxDecoration

Container有一个非常重要的属性 decoration：
他对应的类型是Decoration类型，但是它是一个抽象类。
在开发中，我们经常使用它的实现类BoxDecoration来进行实例化。

  1. const BoxDecoration({
  2.     this.color, // 颜色，会和Container中的color属性冲突
  3.     this.image, // 背景图片
  4.     this.border, // 边框，对应类型是Border类型，里面每一个边框使用BorderSide
  5.     this.borderRadius, // 圆角效果
  6.     this.boxShadow, // 阴影效果
  7.     this.gradient, // 渐变效果
  8.     this.backgroundBlendMode, // 背景混合
  9.     this.shape = BoxShape.rectangle, // 形变
  10.   })
  1. class MyHomePage extends StatelessWidget {
  2.   const MyHomePage({Key? key}) : super(key: key);
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Scaffold(
  7.         appBar: AppBar(
  8.           title: Text("hello"),
  9.         ),
  10.         body: Container(
  11.           width: 100,
  12.           height: 100,
  13.           child: Icon(
  14.             Icons.pets,
  15.             size: 30,
  16.             color: Colors.white,
  17.           ),
  18.           decoration: BoxDecoration(
  19.               color: Colors.amber,
  20.               // 背景颜色
  21.               border: Border.all(
  22.                   color: Colors.redAccent, width: 3, style: BorderStyle.solid),
  23.               borderRadius: BorderRadius.circular(20),
  24.               boxShadow: [
  25.                 BoxShadow(
  26.                     offset: Offset(5, 5), color: Colors.purple, blurRadius: 5)
  27.               ],
  28.               gradient: LinearGradient(colors: [Colors.green, Colors.red])),
  29.         ));
  30.   }
  31. }

image.png

(5) Expand

用于填充满剩余空间

  1. Widget build(BuildContext context) {
  2.     return Row(
  3.       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  4.       crossAxisAlignment: CrossAxisAlignment.end,
  5.       mainAxisSize: MainAxisSize.min,
  6.       children: <Widget>[
  7.         Expanded(
  8.           flex: 1,
  9.           child: Container(color: Colors.red, height: 60),
  10.         ),
  11.         Container(color: Colors.blue, width: 80, height: 80),
  12.         Container(color: Colors.green, width: 70, height: 70),
  13.         Expanded(
  14.           flex: 1,
  15.           child: Container(color: Colors.orange, height: 100),
  16.         )
  17.       ],
  18.     );
  19.   }

image.png

2 多子布局Widget

在开发中，我们经常需要将多个Widget放在一起进行布局，比如水平方向、垂直方向排列，甚至有时候需要他们进行层叠，比如图片上面放一段文字等；
这个时候我们需要使用多子布局组件（Multi-child layout widgets）。
比较常用的多子布局组件是Row、Column、Stack

(1) Flex组件

Row组件和Column组件都继承自Flex组件。
Flex组件和Row、Column属性主要的区别就是多一个direction。
当direction的值为Axis.horizontal的时候，则是Row。
当direction的值为Axis.vertical的时候，则是Column。
在学习Row和Column之前，我们先学习主轴和交叉轴的概念。
因为Row是一行排布，Column是一列排布，那么它们都存在两个方向，并且两个Widget排列的方向应该是对立的。
它们之中都有主轴（MainAxis）和交叉轴（CrossAxis）的概念：

  • 对于Row来说，主轴（MainAxis）和交叉轴（CrossAxis）分别是下图

image.png

  • 对于Column来说，主轴（MainAxis）是竖直的

    (2) Row组件

    1. Row({
    2. Key key,
    3. MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, // 主轴对齐方式
    4. MainAxisSize mainAxisSize = MainAxisSize.max, // 水平方向尽可能大
    5. CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 交叉处对齐方式
    6. TextDirection textDirection, // 水平方向子widget的布局顺序（默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左））
    7. VerticalDirection verticalDirection = VerticalDirection.down, // 表示Row纵轴（垂直）的对齐方向
    8. TextBaseline textBaseline, // 如果上面是CrossAxisAlignment.baseline对齐方式，那么选择什么模式（有两种可选）
    9. List<Widget> children = const <Widget>[],
    10. })

    mainAxisSize：

  • 表示Row在主轴(水平)方向占用的空间，默认是MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子widgets实际占用多少水平空间，Row的宽度始终等于水平方向的最大宽度

  • 而MainAxisSize.min表示尽可能少的占用水平空间，当子widgets没有占满水平剩余空间，则Row的实际宽度等于所有子widgets占用的的水平空间；

mainAxisAlignment：表示子Widgets在Row所占用的水平空间内对齐方式

  • 如果mainAxisSize值为MainAxisSize.min，则此属性无意义，因为子widgets的宽度等于Row的宽度
  • 只有当mainAxisSize的值为MainAxisSize.max时，此属性才有意义
  • MainAxisAlignment.start表示沿textDirection的初始方向对齐，
  • 如textDirection取值为TextDirection.ltr时，则MainAxisAlignment.start表示左对齐，textDirection取值为TextDirection.rtl时表示从右对齐。
  • 而MainAxisAlignment.end和MainAxisAlignment.start正好相反；
  • MainAxisAlignment.center表示居中对齐。

crossAxisAlignment：表示子Widgets在纵轴方向的对齐方式

  • Row的高度等于子Widgets中最高的子元素高度
  • 它的取值和MainAxisAlignment一样(包含start、end、 center三个值)

  • 不同的是crossAxisAlignment的参考系是verticalDirection，即verticalDirection值为VerticalDirection.down时crossAxisAlignment.start指顶部对齐，verticalDirection值为VerticalDirection.up时，crossAxisAlignment.start指底部对齐；而crossAxisAlignment.end和crossAxisAlignment.start正好相反；

    1. class MyHomeBody extends StatelessWidget {
    2. const MyHomeBody({Key? key}) : super(key: key);
    4. @override
    5. Widget build(BuildContext context) {
    6.   return Row(
    7.     mainAxisAlignment: MainAxisAlignment.spaceBetween,
    8.     crossAxisAlignment: CrossAxisAlignment.center,
    9.     mainAxisSize: MainAxisSize.max,
    10.     children: <Widget>[
    11.       Container(color: Colors.red, width: 60, height: 60),
    12.       Container(color: Colors.blue, width: 80, height: 80),
    13.       Container(color: Colors.green, width: 70, height: 70),
    14.       Container(color: Colors.orange, width: 100, height: 100),
    15.     ],
    16.   );
    17. }
    18. }

    image.png
    image.png

    (3) Column组件

    同Row组件, 不再赘述

(4) Stack组件

在开发中，我们多个组件很有可能需要重叠显示，比如在一张图片上显示文字或者一个按钮等。
在Flutter中我们需要使用层叠布局Stack。

  1. Stack({
  2.   Key key,
  3.   this.alignment = AlignmentDirectional.topStart,
  4.   this.textDirection,
  5.   this.fit = StackFit.loose,
  6.   this.overflow = Overflow.clip,
  7.   List<Widget> children = const <Widget>[],
  8. })
  • alignment：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子widget。所谓部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
  • textDirection：和Row、Wrap的textDirection功能一样，都用于决定alignment对齐的参考系即：textDirection的值为TextDirection.ltr，则alignment的start代表左，end代表右；textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左。
  • fit：此参数用于决定没有定位的子widget如何去适应Stack的大小。StackFit.loose表示使用子widget的大小，StackFit.expand表示扩伸到Stack的大小。

  • overflow：此属性决定如何显示超出Stack显示空间的子widget，值为Overflow.clip时，超出部分会被剪裁（隐藏），值为Overflow.visible 时则不会。

    1. class MyHomeBody extends StatelessWidget {
    2. const MyHomeBody({Key? key}) : super(key: key);
    4. @override
    5. Widget build(BuildContext context) {
    6.   return Stack(
    7.     children: <Widget>[
    8.       Container(
    9.         color: Colors.purple,
    10.         width: 300,
    11.         height: 300,
    12.       ),
    13.       Positioned(
    14.           left: 20,
    15.           top: 20,
    16.           child: Icon(Icons.favorite, size: 50, color: Colors.white)
    17.       ),
    18.       Positioned(
    19.         bottom: 20,
    20.         right: 20,
    21.         child: Text("Hello, My Love", style: TextStyle(fontSize: 20, color: Colors.white)),
    22.       )
    23.     ],
    24.   );
    25. }
    26. }

    Stack会经常和Positioned一起来使用，Positioned可以决定组件在Stack中的位置，用于实现类似于Web中的绝对定位效果。Positioned组件只能在Stack中使用。
    image.png