Flutter 初识：布局控件

Flutter 提供了丰富的布局控件，用于构建复杂而灵活的用户界面。为了更好地理解和使用这些控件，我们可以将它们按照功能和用途进行分类。以下是详细的分类及其对应的控件介绍。

Container

Container 是 Flutter 中一个常用的控件，用于创建具有指定属性的小部件。

属性解析

Container({
    super.key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• alignment: 控制子控件在容器中的对齐方式。例如，可以将子控件放置在容器的中心、顶部、底部等。
• padding: 容器内边距，即内容与容器边界之间的空白区域。可以使用 EdgeInsets 来设置具体的边距值。
• color: 容器的背景颜色。如果同时设置了 decoration 属性，且 decoration 中也包含了颜色，color 会被忽略。
• decoration: 容器的装饰，例如背景色、边框、阴影等。BoxDecoration 是一个常见的实现类。
• foregroundDecoration: 前景装饰，与 decoration 类似，但会绘制在子控件的前面。
• width: 容器的宽度，类型为 double?，即可选的双精度浮点数。
• height: 容器的高度，类型同样为 double。
• constraints: 盒子约束条件，例如最大宽度、最小宽度、最大高度、最小高度等。可以使用 BoxConstraints 来设置具体的约束条件。
• margin: 容器外边距，即容器与外部元素之间的空白区域。同样可以使用 EdgeInsets 来设置具体的边距值。
• transform: 应用到容器上的变换矩阵，例如旋转、缩放、平移等。可以使用 Matrix4 来设置具体的变换。
• transformAlignment: 变换的对齐方式，即变换操作相对于哪个点进行。例如，可以以容器的中心点作为变换的基准点。
• child: 容器内部的子控件，可以是任意类型的小部件。
• clipBehavior: 定义如何剪裁容器的内容。默认值为 Clip.none，不进行剪裁。可以选择其他值如 Clip.hardEdge、Clip.antiAlias、Clip.antiAliasWithSaveLayer 等。

示例

class ContainerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Container Example')),
      body: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(20.0),
        // color: Colors.blueAccent,
        width: 300.0,
        height: 300.0,
        constraints: BoxConstraints(
          maxWidth: 350.0,
          maxHeight: 350.0,
        ),
        margin: EdgeInsets.all(10.0),
        transform: Matrix4.rotationZ(0.1),
        transformAlignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(15.0),
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              offset: Offset(4, 4),
              blurRadius: 10.0,
            ),
          ],
        ),
        foregroundDecoration: BoxDecoration(
          border: Border.all(color: Colors.white, width: 3.0),
        ),
        clipBehavior: Clip.hardEdge,
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(color: Colors.white, fontSize: 24.0),
        ),
      ),
    );
  }
}

备注Container的Color不能和decoration的Color同时配置，否则报错，只需配置一个即可。
 
 

SizedBox

SizedBox 是 Flutter 中的一个常用控件，用于创建固定尺寸的空白区域或限制子控件的尺寸

属性解析

const SizedBox({
  super.key,
  this.width,
  this.height,
  super.child,
})

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• width: 设置 SizedBox 的宽度，类型为 double?，表示可以为空。如果未设置，默认为无限制宽度。
• height: 设置 SizedBox 的高度，类型为 double?，表示可以为空。如果未设置，默认为无限制高度。
• child: SizedBox 内部的子控件，可以是任意类型的小部件。如果未设置，SizedBox 将展示一个固定尺寸的空白区域。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Container Example')),
      body: SizedBox(
        width: 200.0,
        height: 50.0,
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Button with SizedBox'),
        ),
      ),
    );
  }
}

 
 

Padding

Padding 是 Flutter 中的一个常用控件，用于在其子控件周围添加内边距（padding）

属性解析

const Padding({
    super.key,
    required this.padding,
    super.child,
  })

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• padding: 内边距（padding），类型为 EdgeInsets，用于指定子控件相对于容器边界的距离。这个参数是必填项。
• child: Padding 内部的子控件，可以是任意类型的小部件。如果未设置，则仅显示内边距。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Padding Example')),
      body: Padding(
        padding: EdgeInsets.all(20.0), // 设置四个方向的内边距均为 20 像素
        child: Container(
          color: Colors.blue,
          child: Text(
            'Hello, Padding!',
            style: TextStyle(color: Colors.white, fontSize: 24.0),
          ),
        ),
      ),
    );
  }
}

 
 

Center

Center 是 Flutter 中的一个常用控件，用于将其子控件放置在父容器的中心

属性解析

const Center({
  super.key,
  this.widthFactor,
  this.heightFactor,
  super.child,
})

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• widthFactor: 一个可选的倍数，用于设置子控件相对于父容器宽度的比例。如果未设置，则宽度将自适应子控件。
• heightFactor: 一个可选的倍数，用于设置子控件相对于父容器高度的比例。如果未设置，则高度将自适应子控件。
• child: Center 内部的子控件，可以是任意类型的小部件。如果未设置，则 Center 将只生成一个空白区域。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Center Example')),
      body: Center(
        widthFactor: 2.0,
        heightFactor: 2.0,
        child: Container(
          color: Colors.green,
          width: 50.0,
          height: 50.0,
          child: Center(
            child: Text(
              'Scaled Center!',
              style: TextStyle(color: Colors.white, fontSize: 12.0),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

 
 

Align

Align 是 Flutter 中的一个常用控件，用于将其子控件对齐到指定的位置。

属性解析

  const Align({
    super.key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    super.child,
  })

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• alignment: 一个 Alignment 对象，指定子控件在父容器中的对齐方式。默认值为 Alignment.center，即居中对齐。其他常见的对齐方式有 Alignment.topLeft、Alignment.topRight、Alignment.bottomLeft、Alignment.bottomRight 等。
• widthFactor: 一个可选的倍数，用于设置子控件相对于父容器宽度的比例。如果未设置，则宽度将自适应子控件。
• heightFactor: 一个可选的倍数，用于设置子控件相对于父容器高度的比例。如果未设置，则高度将自适应子控件。
• child: Align 内部的子控件，可以是任意类型的小部件。如果未设置，则 Align 仅提供对齐功能。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Align Example')),
      // 右下角对齐，带宽高比例因子
      body: Container(
        color: Colors.red[50],
        width: 200.0,
        height: 200.0,
        child: Align(
          alignment: Alignment.bottomRight,
          widthFactor: 2.0,
          heightFactor: 2.0,
          child: Container(
            color: Colors.red,
            width: 50.0,
            height: 50.0,
            child: Center(child: Text('Bottom Right')),
          ),
        ),
      ),
    );
  }
}

 
 

Row

Row 是 Flutter 中的一个常用控件，用于将其子控件水平排列

属性解析

const Row({
    super.key,
    super.mainAxisAlignment,
    super.mainAxisSize,
    super.crossAxisAlignment,
    super.textDirection,
    super.verticalDirection,
    super.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    super.children,
  })

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• mainAxisAlignment: 指定主轴（水平轴）上的对齐方式，类型为 MainAxisAlignment。默认值为 MainAxisAlignment.start。常见的对齐方式有：
  • MainAxisAlignment.start: 子控件靠近行的起始边缘。
  • MainAxisAlignment.end: 子控件靠近行的结束边缘。
  • MainAxisAlignment.center: 子控件在行的中间对齐。
  • MainAxisAlignment.spaceBetween: 子控件之间均匀分布，第一个子控件在起始位置，最后一个子控件在结束位置。
  • MainAxisAlignment.spaceAround: 子控件之间均匀分布，每个子控件之前和之后都有相等的空隙。
  • MainAxisAlignment.spaceEvenly: 子控件之间以及子控件与行的两端之间均匀分布。
• mainAxisSize: 指定行在主轴（水平轴）方向上的大小，类型为 MainAxisSize。默认值为 MainAxisSize.max。可选值有：
  • MainAxisSize.max: 行占据最大可能的空间。
  • MainAxisSize.min: 行只占据足够显示所有子控件的最小空间。
• crossAxisAlignment: 指定交叉轴（垂直轴）上的对齐方式，类型为 CrossAxisAlignment。默认值为 CrossAxisAlignment.center。常见的对齐方式有：
  • CrossAxisAlignment.start: 子控件在交叉轴的起始边缘对齐。
  • CrossAxisAlignment.end: 子控件在交叉轴的结束边缘对齐。
  • CrossAxisAlignment.center: 子控件在交叉轴的中间对齐。
  • CrossAxisAlignment.stretch: 拉伸子控件以填充交叉轴。
  • CrossAxisAlignment.baseline: 根据基线对齐文本子控件，需要指定 textBaseline。
• textDirection: 指定水平方向的文字书写顺序，类型为 TextDirection。可选值有 TextDirection.ltr（从左到右）和 TextDirection.rtl（从右到左）。
• verticalDirection: 指定垂直方向的布局顺序，类型为 VerticalDirection。默认值为 VerticalDirection.down。可选值有 VerticalDirection.up 和 VerticalDirection.down。
• textBaseline: 指定文本基线的类型，类型为 TextBaseline，仅在使用 CrossAxisAlignment.baseline 时需要设置。可选值有 TextBaseline.alphabetic 和 TextBaseline.ideographic。
• children: 一个小部件列表，表示行中的子控件。默认值为空列表 const []。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Row Example'),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.blue,
              width: 50.0,
              height: 50.0,
              child: Center(child: Text('A')),
            ),
            Container(
              color: Colors.green,
              width: 50.0,
              height: 100.0,
              child: Center(child: Text('B')),
            ),
            Container(
              color: Colors.red,
              width: 50.0,
              height: 75.0,
              child: Center(child: Text('C')),
            ),
          ],
        ),
      ),
    );
  }
}

 
 

Column

Column 是 Flutter 中的一个常用控件，用于将其子控件垂直排列

属性解析

const Column({
  super.key,
  this.mainAxisAlignment = MainAxisAlignment.start,
  this.mainAxisSize = MainAxisSize.max,
  this.crossAxisAlignment = CrossAxisAlignment.center,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  this.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
  this.children = const <Widget>[],
})

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• mainAxisAlignment: 指定主轴（垂直轴）上的对齐方式，类型为 MainAxisAlignment。默认值为 MainAxisAlignment.start。常见的对齐方式有：
  • MainAxisAlignment.start: 子控件靠近列的起始边缘。
  • MainAxisAlignment.end: 子控件靠近列的结束边缘。
  • MainAxisAlignment.center: 子控件在列的中间对齐。
    MainAxisAlignment.spaceBetween: 子控件之间均匀分布，第一个子控件在起始位置，最后一个子控件在结束位置。
  • MainAxisAlignment.spaceAround: 子控件之间均匀分布，每个子控件之前和之后都有相等的空隙。
  • MainAxisAlignment.spaceEvenly: 子控件之间以及子控件与列的两端之间均匀分布。
    mainAxisSize: 指定列在主轴（垂直轴）方向上的大小，类型为 MainAxisSize。默认值为 MainAxisSize.max。可选值有：
  • MainAxisSize.max: 列占据最大可能的空间。
  • MainAxisSize.min: 列只占据足够显示所有子控件的最小空间。
• crossAxisAlignment: 指定交叉轴（水平方向）上的对齐方式，类型为 CrossAxisAlignment。默认值为 CrossAxisAlignment.center。常见的对齐方式有：
  • CrossAxisAlignment.start: 子控件在交叉轴的起始边缘对齐。
  • CrossAxisAlignment.end: 子控件在交叉轴的结束边缘对齐。
  • CrossAxisAlignment.center: 子控件在交叉轴的中间对齐。
  • CrossAxisAlignment.stretch: 拉伸子控件以填充交叉轴。
  • CrossAxisAlignment.baseline: 根据基线对齐文本子控件，需要指定 textBaseline。
• textDirection: 指定水平方向的文字书写顺序，类型为 TextDirection。可选值有 TextDirection.ltr（从左到右）和 TextDirection.rtl（从右到左）。
• verticalDirection: 指定垂直方向的布局顺序，类型为 VerticalDirection。默认值为 VerticalDirection.down。可选值有 VerticalDirection.up 和 VerticalDirection.down。
• textBaseline: 指定文本基线的类型，类型为 TextBaseline，仅在使用 CrossAxisAlignment.baseline 时需要设置。可选值有 TextBaseline.alphabetic 和 TextBaseline.ideographic。
• children: 一个小部件列表，表示列中的子控件。默认值为空列表 const []。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Row Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Row with main axis alignment and cross axis alignment
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  width: 50.0,
                  height: 50.0,
                  child: Center(child: Text('A')),
                ),
                Container(
                  color: Colors.green,
                  width: 50.0,
                  height: 100.0,
                  child: Center(child: Text('B')),
                ),
                Container(
                  color: Colors.red,
                  width: 50.0,
                  height: 75.0,
                  child: Center(child: Text('C')),
                ),
              ],
            ),
            SizedBox(height: 20.0), // Add some vertical space
            // Row with text direction and vertical direction
            Row(
              textDirection: TextDirection.rtl,
              verticalDirection: VerticalDirection.up,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  width: 50.0,
                  height: 50.0,
                  child: Center(child: Text('A')),
                ),
                Container(
                  color: Colors.green,
                  width: 50.0,
                  height: 100.0,
                  child: Center(child: Text('B')),
                ),
                Container(
                  color: Colors.red,
                  width: 50.0,
                  height: 75.0,
                  child: Center(child: Text('C')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 
 

Expanded

Expanded 是 Flutter 中的一个常用控件，用于在 Flex 布局（如 Row 和 Column）中扩展子控件以填充可用空间

属性解析

 const Expanded({
    super.key,
    super.flex,
    required super.child,
  }) 

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• flex: 一个整数，指定子控件占用剩余空间的份数。默认值为 1。例如，如果有两个 Expanded 子控件，它们的 flex 值分别为 1 和 2，那么第一个子控件将占用三分之一的可用空间，第二个子控件将占用三分之二的可用空间。
• child: Expanded 内部的子控件，是必填项，可以是任意类型的小部件。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Align Example')),
      // 右下角对齐，带宽高比例因子
      body: Scaffold(
        appBar: AppBar(
          title: Text('Expanded Example'),
        ),
        body: Column(
          children: <Widget>[
            // Row 布局示例
            Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Container(
                    color: Colors.blue,
                    height: 100.0,
                    child: Center(child: Text('1 Flex')),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    color: Colors.green,
                    height: 100.0,
                    child: Center(child: Text('2 Flex')),
                  ),
                ),
              ],
            ),
            SizedBox(height: 20.0), // 添加垂直间距
            // Column 布局示例
            Expanded(
              child: Column(
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.red,
                      child: Center(child: Text('1 Flex')),
                    ),
                  ),
                  Expanded(
                    flex: 2,
                    child: Container(
                      color: Colors.orange,
                      child: Center(child: Text('2 Flex')),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 
 

Stack

Stack 是 Flutter 中的一个常用控件，用于将其子控件堆叠在一起

属性解析

const Stack({
    super.key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.clipBehavior = Clip.hardEdge,
    super.children,
  })

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• alignment: 指定如何对齐没有定位（未设置 Positioned 小部件）的子控件，类型为 AlignmentGeometry。默认值为 AlignmentDirectional.topStart。常见的对齐方式有：
  • AlignmentDirectional.topStart: 子控件对齐到顶部开始位置。
  • AlignmentDirectional.topEnd: 子控件对齐到顶部结束位置。
  • AlignmentDirectional.center: 子控件居中对齐。
  • AlignmentDirectional.bottomStart: 子控件对齐到底部开始位置。
  • AlignmentDirectional.bottomEnd: 子控件对齐到底部结束位置。
• textDirection: 指定水平方向的文字书写顺序，类型为 TextDirection。可选值有 TextDirection.ltr（从左到右）和 TextDirection.rtl（从右到左）。此参数影响 AlignmentDirectional 和 TextDirection 的解释方式。
• fit: 指定 Stack 如何调整其非定位子控件的大小，类型为 StackFit。默认值为 StackFit.loose。可选值有：
  • StackFit.loose: 非定位子控件可以根据其自身大小进行布局。
  • StackFit.expand: 非定位子控件扩展以填充 Stack。
  • StackFit.passthrough: 非定位子控件允许其父级传递约束。
• clipBehavior: 指定如何裁剪 Stack 的内容，类型为 Clip。默认值为 Clip.hardEdge。可选值有：
  • Clip.none: 不裁剪。
  • Clip.hardEdge: 使用硬边缘裁剪。
  • Clip.antiAlias: 使用抗锯齿裁剪。
  • Clip.antiAliasWithSaveLayer: 使用抗锯齿裁剪并保存图层。
• children: 一个小部件列表，表示 Stack 中的子控件。默认值为空列表 const []。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stack Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Stack with default alignment and fit
            Stack(
              alignment: Alignment.center,
              children: <Widget>[
                Container(
                  width: 200.0,
                  height: 200.0,
                  color: Colors.blue,
                ),
                Container(
                  width: 150.0,
                  height: 150.0,
                  color: Colors.green,
                ),
                Container(
                  width: 100.0,
                  height: 100.0,
                  color: Colors.red,
                ),
              ],
            ),
            SizedBox(height: 20.0), // Add some vertical space
            // Stack with Positioned widgets
            Stack(
              clipBehavior: Clip.none,
              children: <Widget>[
                Container(
                  width: 200.0,
                  height: 200.0,
                  color: Colors.blue,
                ),
                Positioned(
                  left: 50.0,
                  top: 50.0,
                  child: Container(
                    width: 150.0,
                    height: 150.0,
                    color: Colors.green,
                  ),
                ),
                Positioned(
                  right: -25.0,
                  bottom: -25.0,
                  child: Container(
                    width: 100.0,
                    height: 100.0,
                    color: Colors.red,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 
 

Wrap

Wrap 是 Flutter 中的一个控件，用于在水平或垂直方向上自动换行排列其子控件

属性解析

const Wrap({
    super.key,
    this.direction = Axis.horizontal,
    this.alignment = WrapAlignment.start,
    this.spacing = 0.0,
    this.runAlignment = WrapAlignment.start,
    this.runSpacing = 0.0,
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.clipBehavior = Clip.none,
    super.children,
  })

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• direction: 指定子控件排列的方向，类型为 Axis。默认值为 Axis.horizontal。可选值有：
  • Axis.horizontal: 子控件水平方向排列，当一行放不下时会自动换行。
  • Axis.vertical: 子控件垂直方向排列，当一列放不下时会自动换列。
• alignment: 指定子控件在主轴（排列方向）上的对齐方式，类型为 WrapAlignment。默认值为 WrapAlignment.start。常见的对齐方式有：
  • WrapAlignment.start: 子控件靠近起始边缘对齐。
  • WrapAlignment.end: 子控件靠近结束边缘对齐。
  • WrapAlignment.center: 子控件在中间对齐。
  • WrapAlignment.spaceBetween: 子控件之间均匀分布，第一个子控件在起始位置，最后一个子控件在结束位置。
  • WrapAlignment.spaceAround: 子控件之间均匀分布，每个子控件之前和之后都有相等的空隙。
  • WrapAlignment.spaceEvenly: 子控件之间以及子控件与容器的两端之间均匀分布。
• spacing: 指定子控件之间的间距，类型为 double。默认值为 0.0。
• runAlignment: 指定每一行或每一列在交叉轴上的对齐方式，类型为 WrapAlignment。默认值为 WrapAlignment.start。
• runSpacing: 指定行或列之间的间距，类型为 double。默认值为 0.0。
• crossAxisAlignment: 指定子控件在交叉轴上的对齐方式，类型为 WrapCrossAlignment。默认值为 WrapCrossAlignment.start。常见的对齐方式有：
  • WrapCrossAlignment.start: 子控件在交叉轴的起始边缘对齐。
  • WrapCrossAlignment.end: 子控件在交叉轴的结束边缘对齐。
  • WrapCrossAlignment.center: 子控件在交叉轴的中间对齐。
• textDirection: 指定水平方向的文字书写顺序，类型为 TextDirection。可选值有 TextDirection.ltr（从左到右）和 TextDirection.rtl（从右到左）。
• verticalDirection: 指定垂直方向的布局顺序，类型为 VerticalDirection。默认值为 VerticalDirection.down。可选值有 VerticalDirection.up 和 VerticalDirection.down。
• clipBehavior: 指定如何裁剪 Wrap 的内容，类型为 Clip。默认值为 Clip.none。可选值有：
  • Clip.none: 不裁剪。
  • Clip.hardEdge: 使用硬边缘裁剪。
  • Clip.antiAlias: 使用抗锯齿裁剪。
  • Clip.antiAliasWithSaveLayer: 使用抗锯齿裁剪并保存图层。
• children: 一个小部件列表，表示 Wrap 中的子控件。默认值为空列表 const []。

示例

此示例中用到的Chip后面后有详细讲解

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wrap Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Wrap with horizontal direction and spacing
            Wrap(
              direction: Axis.horizontal,
              alignment: WrapAlignment.center,
              spacing: 8.0,
              runSpacing: 4.0,
              children: <Widget>[
                Chip(
                  avatar: CircleAvatar(
                      backgroundColor: Colors.blue, child: Text('A')),
                  label: Text('Chip A'),
                ),
                Chip(
                  avatar: CircleAvatar(
                      backgroundColor: Colors.green, child: Text('B')),
                  label: Text('Chip B'),
                ),
                Chip(
                  avatar: CircleAvatar(
                      backgroundColor: Colors.red, child: Text('C')),
                  label: Text('Chip C'),
                ),
                Chip(
                  avatar: CircleAvatar(
                      backgroundColor: Colors.orange, child: Text('D')),
                  label: Text('Chip D'),
                ),
                Chip(
                  avatar: CircleAvatar(
                      backgroundColor: Colors.purple, child: Text('E')),
                  label: Text('Chip E'),
                ),
              ],
            ),
            SizedBox(height: 20.0), // Add some vertical space
            // Wrap with vertical direction and different alignments
            Wrap(
              direction: Axis.vertical,
              alignment: WrapAlignment.start,
              crossAxisAlignment: WrapCrossAlignment.center,
              spacing: 8.0,
              runSpacing: 4.0,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  width: 100.0,
                  height: 50.0,
                  child: Center(child: Text('Box 1')),
                ),
                Container(
                  color: Colors.green,
                  width: 100.0,
                  height: 50.0,
                  child: Center(child: Text('Box 2')),
                ),
                Container(
                  color: Colors.red,
                  width: 100.0,
                  height: 50.0,
                  child: Center(child: Text('Box 3')),
                ),
                Container(
                  color: Colors.orange,
                  width: 100.0,
                  height: 50.0,
                  child: Center(child: Text('Box 4')),
                ),
                Container(
                  color: Colors.purple,
                  width: 100.0,
                  height: 50.0,
                  child: Center(child: Text('Box 5')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 
 

Positioned

Positioned 是 Flutter 中用于在 Stack 小部件内定位子小部件的控件。它允许你使用绝对定位将子控件放置在 Stack 的特定位置

属性解析

const Positioned({
  super.key,
  this.left,
  this.top,
  this.right,
  this.bottom,
  this.width,
  this.height,
  required super.child,
})

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• left: 子控件左边缘到 Stack 左边缘的距离，类型为 double。
• top: 子控件上边缘到 Stack 上边缘的距离，类型为 double。
• right: 子控件右边缘到 Stack 右边缘的距离，类型为 double。
• bottom: 子控件下边缘到 Stack 下边缘的距离，类型为 double。
• width: 子控件的宽度，类型为 double。
• height: 子控件的高度，类型为 double。
• child: 需要定位的子控件，类型为 Widget，这个参数是必须的。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Positioned Example'),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            Container(
              width: 300.0,
              height: 300.0,
              color: Colors.blue[50],
            ),
            Positioned(
              left: 20.0,
              top: 20.0,
              child: Container(
                width: 100.0,
                height: 100.0,
                color: Colors.red,
                child: Center(child: Text('A')),
              ),
            ),
            Positioned(
              right: 20.0,
              bottom: 20.0,
              child: Container(
                width: 100.0,
                height: 100.0,
                color: Colors.green,
                child: Center(child: Text('B')),
              ),
            ),
            Positioned(
              left: 50.0,
              bottom: 50.0,
              child: Container(
                width: 100.0,
                height: 100.0,
                color: Colors.orange,
                child: Center(child: Text('C')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 
 

FractionallySizedBox

FractionallySizedBox 是 Flutter 中的一个控件，用于按照一定比例调整其子控件的大小。它允许你设置子控件相对于父控件的宽度和高度的比例

属性解析

const FractionallySizedBox({
    super.key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    super.child,
  })

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• alignment: 指定子控件的对齐方式，类型为 AlignmentGeometry。默认值为 Alignment.center。常见的对齐方式有：
  • Alignment.topLeft: 子控件对齐到容器的左上角。
  • Alignment.topRight: 子控件对齐到容器的右上角。
  • Alignment.bottomLeft: 子控件对齐到容器的左下角。
  • Alignment.bottomRight: 子控件对齐到容器的右下角。
  • Alignment.center: 子控件居中对齐。
• widthFactor: 子控件相对于父控件宽度的比例，类型为 double。例如，widthFactor: 0.5 表示子控件的宽度是父控件宽度的一半。如果该值为 null，则表示不限制宽度。
• heightFactor: 子控件相对于父控件高度的比例，类型为 double。例如，heightFactor: 0.5 表示子控件的高度是父控件高度的一半。如果该值为 null，则表示不限制高度。
• child: 需要调整大小的子控件，类型为 Widget。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FractionallySizedBox Example'),
      ),
      body: Center(
        child: Container(
          width: 300.0,
          height: 300.0,
          color: Colors.grey[300],
          child: FractionallySizedBox(
            widthFactor: 0.5, // 子控件宽度是父控件宽度的一半
            heightFactor: 0.5, // 子控件高度是父控件高度的一半
            alignment: Alignment.center,
            child: Container(
              color: Colors.blue,
              child: Center(
                child: Text(
                  '50%',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

 
 

FittedBox

属性解析

const FittedBox({
    super.key,
    this.fit = BoxFit.contain,
    this.alignment = Alignment.center,
    this.clipBehavior = Clip.none,
    super.child,
  })

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• fit: 指定如何缩放子控件以适应父控件的大小，类型为 BoxFit。默认值为 BoxFit.contain。常见的缩放模式有：
  • BoxFit.fill: 子控件完全填充父控件，不保持宽高比。
  • BoxFit.contain: 子控件保持宽高比，并尽可能大地放置在父控件内。
  • BoxFit.cover: 子控件保持宽高比，并完全覆盖父控件。
  • BoxFit.fitWidth: 子控件保持宽高比，并将宽度调整到父控件的宽度，高度随之变化。
  • BoxFit.fitHeight: 子控件保持宽高比，并将高度调整到父控件的高度，宽度随之变化。
  • BoxFit.none: 不调整子控件的大小。
  • BoxFit.scaleDown: 子控件保持宽高比，并尽可能大地放置在父控件内，但不会超过原始大小。
• alignment: 指定子控件的对齐方式，类型为 AlignmentGeometry。默认值为 Alignment.center。常见的对齐方式有：
  • Alignment.topLeft: 子控件对齐到容器的左上角。
  • Alignment.topRight: 子控件对齐到容器的右上角。
  • Alignment.bottomLeft: 子控件对齐到容器的左下角。
  • Alignment.bottomRight: 子控件对齐到容器的右下角。
  • Alignment.center: 子控件居中对齐。
• clipBehavior: 指定如何裁剪子控件超出父控件边界的部分，类型为 Clip。默认值为 Clip.none。常见的裁剪行为有：
  • Clip.none: 不裁剪。
  • Clip.hardEdge: 使用硬边缘裁剪。
  • Clip.antiAlias: 使用抗锯齿裁剪。
  • Clip.antiAliasWithSaveLayer: 使用抗锯齿裁剪并保存图层。
• child: 需要调整大小和位置的子控件，类型为 Widget。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FittedBox Example'),
      ),
      body: Center(
        child: Container(
          width: 200.0,
          height: 200.0,
          color: Colors.grey[300],
          child: FittedBox(
            fit: BoxFit.contain, // 保持宽高比，并尽可能大地放置在父控件内
            alignment: Alignment.center,
            child: Container(
              color: Colors.blue,
              child: Text(
                'Flutter',
                style: TextStyle(fontSize: 30.0, color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

 
 

Spacer

Spacer 是 Flutter 中用于在 Flex 布局（如 Row 和 Column）中创建可调整大小的空白空间的控件。它通过占据部分可用空间来帮助子控件之间的间距保持一致

属性解析

const Spacer({
  super.key,
  this.flex = 1,
})

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• flex: 一个整数，指定 Spacer 占据的比例，类型为 int。默认值为 1。flex 值越大，该 Spacer 占据的空间就越多，相对于同一布局中的其他 Spacer 或 Flex 子控件。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Spacer Example'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 50.0,
            width: double.infinity,
            child: Center(child: Text('Top')),
          ),
          Spacer(flex: 2), // 占据2倍的可用空间
          Container(
            color: Colors.green,
            height: 50.0,
            width: double.infinity,
            child: Center(child: Text('Middle')),
          ),
          Spacer(), // 默认 flex 为 1， 占据 1倍的可用空间
          Container(
            color: Colors.red,
            height: 50.0,
            width: double.infinity,
            child: Center(child: Text('Bottom')),
          ),
        ],
      ),
    );
  }
}