Flutter Row 或者 Column 的拉伸效果,CrossAxisAlignment.stretch
  nDUQ4LHdRnl1 2023年11月02日 82 0


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_flutter_02


指定高度

当给 ​​Container​​ 设置指定高度时,这时才生效

ElevatedButton(onPressed: buttonAction, child: const Text("切换布局样式")),
Text(text),
Container(
height: 100,
color: Colors.black12,
child: Row(
......

Flutter Row 或者 Column 的拉伸效果,CrossAxisAlignment.stretch_背景颜色_03

实际效果:​​拉伸!​

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


由于 ​​Row​​​ 的默认高度是取 ​​高度最大​​​ 的子 ​​Widget​​ 的高度

当要拉伸所有子 ​​Widget​​​ 时,由于父 ​​Widget​​ 没有指定高度

所以,就导致拉伸失效吧

官方文档对 ​​stretch​​ 的解释:

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



【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  b1UHV4WKBb2S   2023年11月13日   37   0   0 裁剪ideflutter
  b1UHV4WKBb2S   2023年11月13日   29   0   0 flutterDart
nDUQ4LHdRnl1