组件1：MaterialApp、Container、Text、Image、Icon
组件2：ListView、GridView
组件3：Padding、Row 、Column、Stack、Align、Positioned
组件4：AspectRatio、Row 、Button
组件5：Wrap、StatelessWidget 、StatefulWidget、Dialog、PageView、TextField
3.8 Padding
Padding用来为子元素添加填充，也就是指定子元素与容器边界的距离，作用基本上与Android中ViewGroup的padding属性差不多
| 名称 | 功能 |
|---|---|
| padding | 使用EdgeInsets 填充值 |
| child | 子组件 |
EdgeInsets提供了一些方法
-
fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充。
-
all(double value) : 所有方向均使用相同数值的填充。
-
only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
-
symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。
3.9 线性布局（Row 和 Column）
3.9.1 Row
| 名称 | 功能 |
|---|---|
| mainAxisAlignment | 主轴（横向）的排序方式，MainAxisAlignment |
| crossAxisAlignment | 次轴（纵向）的排序方式，是组件相对于外层的容器的位置 |
image-20221010205653939-5406617.png
3.9.2 Column
与Row基本一致，就是排列顺序变成 纵向
3.10 弹性布局（Flex Expanded）
参考内容 ： https://blog.csdn.net/Misdirection_XG/article/details/122885897
Row 和 Column 都继承Flex
| 名称 | 功能 |
|---|---|
| direction | Axis.vertical 纵向，内部元素高度没有效果 Axis.horizontal 横向，内部元素宽度没有效果 |
| mainAxisSize | MainAxisSize.max：主轴的大小是父容器的大小 MainAxisSize.min：主轴的大小是其子 Widget 大小之和 |
| mainAxisAlignment | MainAxisAlignment.start：左对齐，默认值; MainAxisAlignment.end：右对齐 MainAxisAlignment.center：居中对齐 MainAxisAlignment.spaceBetween：两端对齐 MainAxisAlignment.spaceAround：每个 Widget 两侧的间隔相等，与屏幕边缘的间隔是其他 Widget 之间间隔的一半 MainAxisAlignment.spaceEvently：平均分布各个 Widget，与屏幕边缘的间隔与其他 Widget 之间的间隔相等 |
| crossAxisAlignment | CrossAxisAlignment.start：与交叉轴的起始位置对齐； CrossAxisAlignment.end：与交叉轴的结束位置对齐； CrossAxisAlignment.center：居中对齐； CrossAxisAlignment.stretch：填充整个交叉轴； CrossAxisAlignment.baseline：按照第一行文字基线对齐 |
| verticalDirection | VerticalDirection.down：start 在顶部，end 在底部 VerticalDirection.up：start 在底部，end 在顶部 |
| textBaseline | TextBaseline.alphabetic：与字母基线对齐； TextBaseline.ideographic：与表意字符基线对齐； |
Expanded 可以使 Row、Column、Flex 里面的组件填充沿着主轴可利用的空间，如果多个 Widget 都使用了 Expanded 组件，可以使用 Expanded 的 flex 属性按照比例分配主轴空间，flex 属性相当于 Android LinearLayout 的 weight 属性
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
// 占一行的1份
Expanded(flex: 1, child: IconContainer(Icons.home, Colors.cyan)),
// 占一行的2份
Expanded(flex: 2, child: IconContainer(Icons.percent, Colors.red))
],
/*
children: [
// 左边占满
Expanded(flex: 1, child: IconContainer(Icons.home, Colors.cyan)),
// 右边固定宽度
IconContainer(Icons.percent, Colors.red),
],
*/
);
}
}
3.11 层叠布局（Stack、Align、Positioned）
3.11.1 stack
Stack即层叠布局控件，能够将子控件层叠排列。
Stack控件的每一个子控件都是定位或不定位，定位的子控件是被Positioned控件包裹的。Stack控件本身包含所有不定位的子控件，其根据alignment定位（默认为左上角）。然后根据定位的子控件的top、right、bottom和left属性将它们放置在Stack控件上。
| 名称 | 功能 |
|---|---|
| alignment | 指的是子Widget的对其方式，默认情况是以左上角为开始点 |
3.11.2 Positioned
这个使用控制Widget的位置，通过他可以随意摆放一个组件，有点像绝对布局
| 名称 | 功能 |
|---|---|
| left | 表示离Stack 左 边的距离 |
| top | 表示离Stack 上 边的距离 |
| right | 表示离Stack 右 边的距离 |
| bottom | 表示离Stack 下 边的距离 |
| width | 如果里面是Row组件，需要设置宽度 |
| height | 如果里面是Row组件，需要设置高度 |
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 400,
height: 400,
color: Colors.red,
child: Stack(
children: [
// 放到左下位置，
Positioned(
left: 0,
bottom: 0,
child: Container(
height: 100,
width: 100,
color: Colors.yellow,
),
),
// 放到右上位置
const Positioned(top: 10, right: 10, child: Text("你好Flutter"))
],
),
);
}
}
3.11.3 Align
相对布局的组件：Align，Align组件允许我们通过修改它的属性来调整子组件的位置，并且可以根据子组件的宽高来确定Align自身的的宽高。
Align属性用于定义如何对齐子项。Align默认值是 Alignment.center
使用时，既可以使用定义好的方位，也可以自定义位置例如：
alignment: Alignment(0, 1)
或者
alignment: Alignment.center
063529_29022-5416397.png
网友评论