天天看點

Flutter Row 或者 Column 的拉伸效果,CrossAxisAlignment.stretch

CrossAxisAlignment.stretch 不生效?

Flutter 版本:​

​2.5.1​

​​ 布局代碼如下,加 ​

​Container​

​ 是為了設定個背景顔色,看效果,單獨使用 ​

​Row​

​ 也一樣:

ElevatedButton(onPressed: buttonAction, child: const Text("切換布局樣式")),
Text(text),
Container(
  // height: 100,
  color: Colors.black12,
  child: Row(
  ......      
Flutter Row 或者 Column 的拉伸效果,CrossAxisAlignment.stretch

實際效果:​

​沒有拉伸!​

Flutter Row 或者 Column 的拉伸效果,CrossAxisAlignment.stretch

指定高度

當給 ​

​Container​

​ 設定指定高度時,這時才生效

ElevatedButton(onPressed: buttonAction, child: const Text("切換布局樣式")),
Text(text),
Container(
  height: 100,
  color: Colors.black12,
  child: Row(
  ......      
Flutter Row 或者 Column 的拉伸效果,CrossAxisAlignment.stretch

實際效果:​

​拉伸!​

Flutter Row 或者 Column 的拉伸效果,CrossAxisAlignment.stretch

由于 ​

​Row​

​​ 的預設高度是取 ​

​高度最大​

​​ 的子 ​

​Widget​

​ 的高度

當要拉伸所有子 ​

​Widget​

​​ 時,由于父 ​

​Widget​

​ 沒有指定高度

/// This causes the constraints passed to the children to be tight in the
  /// cross axis.