組件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用來(lái)為子元素添加填充洛口，也就是指定子元素與容器邊界的距離矫付，作用基本上與Android中ViewGroup的padding屬性差不多
| 名稱 | 功能 |
|---|---|
| padding | 使用EdgeInsets 填充值 |
| child | 子組件 |
EdgeInsets提供了一些方法
fromLTRB(double left, double top, double right, double bottom)：分別指定四個(gè)方向的填充。
all(double value) : 所有方向均使用相同數(shù)值的填充第焰。
only({left, top, right ,bottom })：可以設(shè)置具體某個(gè)方向的填充(可以同時(shí)指定多個(gè)方向)买优。
symmetric({ vertical, horizontal })：用于設(shè)置對(duì)稱方向的填充，vertical指top和bottom挺举，horizontal指left和right杀赢。
3.9 線性布局（Row 和 Column）
3.9.1 Row
| 名稱 | 功能 |
|---|---|
| mainAxisAlignment | 主軸（橫向）的排序方式，MainAxisAlignment |
| crossAxisAlignment | 次軸（縱向）的排序方式湘纵，是組件相對(duì)于外層的容器的位置 |
3.9.2 Column
與Row基本一致脂崔，就是排列順序變成 縱向
3.10 彈性布局（Flex Expanded）
參考內(nèi)容 ： https://blog.csdn.net/Misdirection_XG/article/details/122885897
Row 和 Column 都繼承Flex
| 名稱 | 功能 |
|---|---|
| direction | Axis.vertical 縱向，內(nèi)部元素高度沒(méi)有效果 Axis.horizontal 橫向梧喷，內(nèi)部元素寬度沒(méi)有效果 |
| mainAxisSize | MainAxisSize.max：主軸的大小是父容器的大小 MainAxisSize.min：主軸的大小是其子 Widget 大小之和 |
| mainAxisAlignment | MainAxisAlignment.start：左對(duì)齊砌左，默認(rèn)值; MainAxisAlignment.end：右對(duì)齊 MainAxisAlignment.center：居中對(duì)齊 MainAxisAlignment.spaceBetween：兩端對(duì)齊 MainAxisAlignment.spaceAround：每個(gè) Widget 兩側(cè)的間隔相等，與屏幕邊緣的間隔是其他 Widget 之間間隔的一半 MainAxisAlignment.spaceEvently：平均分布各個(gè) Widget铺敌，與屏幕邊緣的間隔與其他 Widget 之間的間隔相等 |
| crossAxisAlignment | CrossAxisAlignment.start：與交叉軸的起始位置對(duì)齊汇歹； CrossAxisAlignment.end：與交叉軸的結(jié)束位置對(duì)齊； CrossAxisAlignment.center：居中對(duì)齊偿凭； CrossAxisAlignment.stretch：填充整個(gè)交叉軸产弹； CrossAxisAlignment.baseline：按照第一行文字基線對(duì)齊 |
| verticalDirection | VerticalDirection.down：start 在頂部，end 在底部 VerticalDirection.up：start 在底部弯囊，end 在頂部 |
| textBaseline | TextBaseline.alphabetic：與字母基線對(duì)齊取视； TextBaseline.ideographic：與表意字符基線對(duì)齊硝皂； |
Expanded 可以使 Row、Column作谭、Flex 里面的組件填充沿著主軸可利用的空間稽物，如果多個(gè) Widget 都使用了 Expanded 組件，可以使用 Expanded 的 flex 屬性按照比例分配主軸空間折欠，flex 屬性相當(dāng)于 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即層疊布局控件锐秦，能夠?qū)⒆涌丶盈B排列咪奖。
Stack控件的每一個(gè)子控件都是定位或不定位，定位的子控件是被Positioned控件包裹的酱床。Stack控件本身包含所有不定位的子控件羊赵，其根據(jù)alignment定位（默認(rèn)為左上角）。然后根據(jù)定位的子控件的top扇谣、right昧捷、bottom和left屬性將它們放置在Stack控件上。
| 名稱 | 功能 |
|---|---|
| alignment | 指的是子Widget的對(duì)其方式罐寨，默認(rèn)情況是以左上角為開(kāi)始點(diǎn) |
3.11.2 Positioned
這個(gè)使用控制Widget的位置靡挥，通過(guò)他可以隨意擺放一個(gè)組件，有點(diǎn)像絕對(duì)布局
| 名稱 | 功能 |
|---|---|
| left | 表示離Stack 左 邊的距離 |
| top | 表示離Stack 上 邊的距離 |
| right | 表示離Stack 右 邊的距離 |
| bottom | 表示離Stack 下 邊的距離 |
| width | 如果里面是Row組件鸯绿，需要設(shè)置寬度 |
| height | 如果里面是Row組件跋破，需要設(shè)置高度 |
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
相對(duì)布局的組件：Align瓶蝴，Align組件允許我們通過(guò)修改它的屬性來(lái)調(diào)整子組件的位置毒返，并且可以根據(jù)子組件的寬高來(lái)確定Align自身的的寬高。
Align屬性用于定義如何對(duì)齊子項(xiàng)舷手。Align默認(rèn)值是 Alignment.center
使用時(shí)饿悬，既可以使用定義好的方位，也可以自定義位置例如：
alignment: Alignment(0, 1)
或者
alignment: Alignment.center
