提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
一、单孩子布局组件
直接或间接地继承自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类,它是一个可以将其承载的子元素堆叠布局的组件,它的常用属性和功能说明如表所示。