Flutter中的单孩子和多孩子布局组件

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、单孩子布局组件

直接或间接地继承自SingleChildRenderObjectWidget类，既能提供丰富的装饰能力，也能提供部分特定的布局能力。

1. Container组件

Container组件继承自StatelessWidget类，它由基本的绘制、位置和大小组件组成。Container组件的常用属性和功能说明如表所示。

示例代码：

实现效果：

2. Padding组件

Padding组件直接继承自SingleChildRenderObjectWidget类，它是用于设置内边距的组件．该组件的常用属性和功能说明如表所示。

3. Align组件

Align组件直接继承自SingleChildRenderObjectWidget类，它是用于设置子元素的对齐方式.孩组件的常用属性和功能说明如表所示。

class Align extends SingleChildRenderObjectWidget {
  /// Creates an alignment widget.
  ///
  /// The alignment defaults to [Alignment.center].
  const Align({
    super.key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    super.child,
  }

4. Center组件

Center组件直接继承自Align类，它是用于设置子元素的居中方式.该组件的常用属性和功能说明如表所示。

class Center extends Align {
  /// Creates a widget that centers its child.
  const Center({ super.key, super.widthFactor, super.heightFactor, super.child });
}

二、多孩子布局组件

大多数直接或间接地继承自MultiChildRenderObjectWidget类，这些组件能够提供特定的布局能力，如将多个组件按水平(行)方向排列、按垂直(列)方向排列等.

1. Row组件

Row组件直接继承自Flex类，间接继承自MultiChildRenderObjectWidget类，它是一个可以沿水平方向展示子元素的布局组件。Row组件的常用属性和功能说明如表所示。

2.Column组件

Column组件直接继承自Flex类，间接继承自MultiChildRenderObjectWidget类，它是一个可以沿垂直方向展示子元素的布局组件。Column组件的常用属性和功能说明如表所示。

3. Flex组件

Flex组件直接继承自MultiChildRenderObjectWidget类，它是一个可以沿主轴方向展示子元素的布局组件，Flex组件的常用属性和功能说明如表所示.。

当direction的值为Axis.horizontal时，同Row组件的功能；当direction的值为Axis.vertical时，同Column组件的功能。

4. Expanded组件

Expanded组件直接继承自Flexible类，它用于展开Row、Column或Flex组件承载的子元素，也就是将子元素的宽度或高度扩展至充满主轴方向的空白空间。Expanded组件虽然不是多孩子布局组件，但是它经常与多孩子布局组件组合使用。Expanded组件的常用属性和功能说明如表所示。

const Expanded({
    super.key,
    super.flex,//控制孩子组件所占份数
    required super.child,
  })

5. Wrap组件

Wrap组件直接继承自MultiChildRenderObjectWidget类，它是一个可以将其承载的子元素自动换行的组件．在Row、Column或Flex组件承载的子元素时，如果子元素超过屏幕范围，则会报溢出错误.Wrap组件的direction、crossAxisAlignment、 textDirection、verticalDirection、children属性与Row(包括Column和Flex)组件的意义、用法相同，其他常用属性和功能说明如表所示。

6. Stack组件

Stack组件直接继承自MultiChildRenderObjectWidget类，它是一个可以将其承载的子元素堆叠布局的组件，它的常用属性和功能说明如表所示。