MainAxisAlignment?是一個枚舉類，用于控制主軸（Main Axis）?方向上子組件的排列和對齊方式。
MainAxisAlignment?的常用取值及效果：
MainAxisAlignment.start
子組件沿主軸的起點對齊（Row 左對齊，Column 頂部對齊）MainAxisAlignment.end
子組件沿主軸的終點對齊（Row 右對齊，Column 底部對齊）MainAxisAlignment.center
子組件在主軸方向上居中對齊MainAxisAlignment.spaceBetween
子組件之間均勻分配剩余空間，首尾組件貼近邊緣（無額外間距）MainAxisAlignment.spaceAround
子組件兩側分配相等空間，首尾組件到邊緣的距離是組件間距的一半MainAxisAlignment.spaceEvenly
子組件之間及與邊緣的距離完全相等
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, // 水平方向均勻分布children: [Container(width: 50, height: 50, color: Colors.red),Container(width: 50, height: 50, color: Colors.green),Container(width: 50, height: 50, color: Colors.blue),],
)| 屬性 | 功能描述 | 取值示例 |
|---|---|---|
mainAxisSize | 決定容器在主軸方向上的空間大小： -? max：盡可能占滿父容器的空間-? min：僅包裹子組件，不額外占空間 | MainAxisSize.max（默認）、MainAxisSize.min |
mainAxisAlignment | 決定子組件在容器的主軸空間內如何排列（如對齊方式、間距分配） | start、center、spaceBetween?等 |
情況 1：mainAxisSize: max（容器占滿空間）
Row(mainAxisSize: MainAxisSize.max, // 容器寬度=屏幕寬度mainAxisAlignment: MainAxisAlignment.spaceBetween, // 子組件分散在整個寬度上children: [Container(width: 50, height: 50, color: Colors.red),Container(width: 50, height: 50, color: Colors.green),],
)效果：兩個色塊分別靠向屏幕左右邊緣，中間有大量空隙（利用了容器的全部寬度）。
情況 2：mainAxisSize: min（容器僅包裹子組件）
Row(mainAxisSize: MainAxisSize.min, // 容器寬度=兩個色塊寬度之和（100）mainAxisAlignment: MainAxisAlignment.spaceBetween, // 無效果（沒有額外空間）children: [Container(width: 50, height: 50, color: Colors.red),Container(width: 50, height: 50, color: Colors.green),],
)效果：兩個色塊緊挨著（總寬度 100），spaceBetween?無法產生間距（因為容器沒有多余空間）。
CrossAxisAlignment
Warp
在 Flutter 中，Wrap?是一個布局組件，用于在子組件超出父容器邊界時自動換行（或換列），類似于文本換行的效果。它解決了?Row/Column?中子組件超出界溢出的問題，是處理動態數量子組件布局的常用選擇。
常用屬性：
direction：指定主軸方向（默認水平）Axis.horizontal：水平方向排列，空間不足時換行（默認）Axis.vertical：垂直方向排列，空間不足時換列
spacing：主軸方向上子組件之間的間距runSpacing：行與行（或列與列）之間的間距alignment：主軸方向上的對齊方式（類似?mainAxisAlignment）crossAxisAlignment：交叉軸方向上的對齊方式（類似?CrossAxisAlignment）
示例代碼：
下面是一個水平方向的?Wrap?示例，包含多個按鈕，當屏幕寬度不足時會自動換行：
Wrap(direction: Axis.horizontal, // 水平方向排列（默認）spacing: 8.0, // 按鈕之間的水平間距runSpacing: 8.0, // 行之間的垂直間距alignment: WrapAlignment.start, // 每行左對齊children: [ElevatedButton(onPressed: () {}, child: Text("按鈕1")),ElevatedButton(onPressed: () {}, child: Text("按鈕2")),ElevatedButton(onPressed: () {}, child: Text("按鈕3")),ElevatedButton(onPressed: () {}, child: Text("按鈕4")),ElevatedButton(onPressed: () {}, child: Text("按鈕5")),ElevatedButton(onPressed: () {}, child: Text("按鈕6")),],
)1.?Stack（堆疊容器）
Stack?是一個容器組件，用于將子組件按順序堆疊在一起，后面的子組件會覆蓋在前面的子組件之上（類似 CSS 中的?position: absolute?堆疊效果）。
核心特點：
- 子組件默認左上角對齊（可以通過?
alignment?屬性修改默認對齊方式）。 - 本身不限制大小，默認會根據子組件中最大的尺寸來調整自身大小（也可通過?
fit?屬性控制）。
2.?Positioned（定位組件）
Positioned?只能作為?Stack?的直接子組件，用于精確控制子組件在?Stack?中的位置，通過設置與?Stack?邊緣的距離來定位。
常用屬性（用于定位）：
left：距離?Stack?左邊緣的距離right：距離?Stack?右邊緣的距離top：距離?Stack?上邊緣的距離bottom：距離?Stack?下邊緣的距離width/height：固定子組件的寬高（可選，不設置則由子組件自身大小決定）
示例：圖片上疊加文字和圖標
下面的代碼實現了 “背景圖 + 頂部標題 + 右下角圖標” 的層疊效果：
Stack(// 未使用 Positioned 的子組件會默認左上角對齊（可通過 alignment 修改）alignment: Alignment.center, // 未定位子組件的默認對齊方式（這里無效，因為所有子組件都用了 Positioned）children: [// 底層：背景圖片（占滿 Stack）Positioned.fill( // 快捷方式：讓子組件填滿整個 Stackchild: Image.network('https://picsum.photos/400/300',fit: BoxFit.cover, // 圖片鋪滿容器alt: "示例背景圖",),),// 中層：頂部標題（距離頂部 16 像素，水平居中）Positioned(top: 16,left: 0,right: 0, // left 和 right 都設為 0 可讓組件水平占滿，配合 textAlign 居中child: Text("風景照片",style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),textAlign: TextAlign.center,),),// 上層：右下角圖標（距離右和下各 16 像素）Positioned(right: 16,bottom: 16,child: Icon(Icons.favorite, color: Colors.red, size: 30),),],
)
