Flutter笔记 Column和Row

MainAxisSize:  控制自己的布局方式
  MainAxisSize.min  默认值,Column和Row自适应children;
  MainAxisSize.max  Column填充父控件竖屏,Row填充父控件横屏;需要搭配MainAxisAlignment使用才有效果;
 
 
MainAxisAlignment:  控制子集的对齐方式,Column上下对齐,Row左右对齐
  MainAxisAlignment.start  默认值,Column靠上,Row靠左;
  MainAxisAlignment.center  Column,Row居中;
  MainAxisAlignment.end  Column靠下,Row靠右;
  MainAxisAlignment.spaceAround  自己填充,等份分配空间给子集,子集各自居中对齐;
  MainAxisAlignment.spaceBetween  自己填充,等份分配空间给子集,子集两侧对齐;
  MainAxisAlignment.spaceEvenly  自己填充,等份分配空间给子集,子集同一中线居中对齐;
  注:当设置MainAxisSize.max时才该值有效果。
 
 
CrossAxisAlignment:   控制子集各自的对齐方式,Column左右对齐,Row上下对齐
  CrossAxisAlignment.strech        Column中会使子控件宽度调到最大,Row则使子控件高度调到最大
  CrossAxisAlignment.start      Column中会使子控件向左对齐,Row中会使子控件向上对齐
  CrossAxisAlignment.center   默认值,子控件居中
  CrossAxisAlignment.end    Column中会使子控件向右对齐,Row中会使子控件向下对齐
  CrossAxisAlignment.baseline  按文本水平线对齐。与TextBaseline搭配使用
 
 
TextBaseline:
  TextBaseline.alphabetic    用于对齐字母字符底部的水平线。
  TextBaseline.ideographic  用于对齐表意字符的水平线。
 
 
VerticalDirection:  控制子控件对齐方式是否相反方式
  VerticalDirection.down  默认值,按照默认方式
  VerticalDirection.up   CrossAxisAlignment.start跟CrossAxisAlignment.end对反
 
参考代码:
return Scaffold(
      body: Column(
        children: <Widget>[
          Column(
            children: <Widget>[
              Container(color: Colors.greenAccent,  width: 100,  height: 50,),
              Container(color: Colors.yellow,       width: 80,  height: 70,),
              Container(color: Colors.purpleAccent, width: 120,  height: 60,),
            ],
          ),
          Container(height: 40,),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(color: Colors.greenAccent,  width: 100,  height: 50,),
              Container(color: Colors.yellow,       width: 80,  height: 70,),
              Container(color: Colors.purpleAccent, width: 120,  height: 60,),
            ],
          ),
          Container(height: 40,),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment:  MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Container(color: Colors.greenAccent,  width: 100,  height: 50,),
              Container(color: Colors.yellow,       width: 80,  height: 70,),
              Container(color: Colors.purpleAccent, width: 120,  height: 60,),
            ],
          ),
          Container(height: 40,),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(color: Colors.greenAccent,  width: 100,  height: 50,),
              Container(color: Colors.yellow,       width: 80,  height: 70,),
              Container(color: Colors.purpleAccent, width: 120,  height: 60,),
            ],
          ),
          Container(height: 40,),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(color: Colors.greenAccent,  width: 100,  height: 50,),
              Container(color: Colors.yellow,       width: 80,  height: 70,),
              Container(color: Colors.purpleAccent, width: 120,  height: 60,),
            ],
          ),
          Container(height: 40,),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.start,
            verticalDirection: VerticalDirection.up,
            children: <Widget>[
              Container(color: Colors.greenAccent,  width: 100,  height: 50,),
              Container(color: Colors.yellow,       width: 80,  height: 70,),
              Container(color: Colors.purpleAccent, width: 120,  height: 60,),
            ],
          ),
        ],
      ),
    );
View Code

 

         Row
 

转载于:https://www.cnblogs.com/RedSky/p/10443869.html

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值