flutter开发Row嵌套Row,Column嵌套Column,Row嵌套Column widget占空间大小

如果Row里面嵌套Row,或者Column里面再嵌套Column,那么只有对最外面的Row或Column会占用尽可能大的空间,里面Row或Column所占用的空间为实际大小,下面以Column为例说明:

Container(
  color: Colors.green,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max, //有效,外层Colum高度为整个屏幕
      children: <Widget>[
        Container(
          color: Colors.red,
          child: Column(
            mainAxisSize: MainAxisSize.max,//无效,内层Colum高度为实际高度  
            children: <Widget>[
              Text("hello world "),
              Text("I am Jack "),
            ],
          ),
        )
      ],
    ),
  ),
);

在这里插入图片描述
如果是Row嵌套Cloumn,Cloumn会占用Row最大的高度,Row嵌套Cloumn不会影响到Cloumn空间占比,不方便我们widget排放,如果需要使Cloumn占用最小空间,进行设置 mainAxisSize: MainAxisSize.min,

Widget getUserInfo(PetCardViewModel model) {
    return Container(
      height: 150,
      margin: EdgeInsets.only(top: 16,bottom: 16),
      padding: EdgeInsets.symmetric(horizontal: 16),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Row(
            children: <Widget>[
              CircleAvatar(

                radius: 20,
                backgroundImage: NetworkImage(model.userImgUrl),
                backgroundColor: Colors.red,
              ),
              Padding(padding: EdgeInsets.only(left: 8)),
            Container(
              color: Colors.orange,
              child:     Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(
                    model.userName,
                    style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                        color: Colors.black),
                  ),
                  Padding(padding: EdgeInsets.only(top: 6)),
                  Text(
                    model.description,
                    style: TextStyle(fontSize: 12, color: Colors.black38),
                  )
                ],
              ),
            )
            ],
          ),
          Text(
            model.publishTime,
            style: TextStyle(fontSize: 12, color: Colors.black38),
          ),
        ],
      ),
    );
  }

设置最小占用空间
在这里插入图片描述

Row嵌套Column,会默认占用Row最大高度
在这里插入图片描述

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值