zoukankan      html  css  js  c++  java
  • 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,   100,  height: 50,),
                  Container(color: Colors.yellow,        80,  height: 70,),
                  Container(color: Colors.purpleAccent,  120,  height: 60,),
                ],
              ),
              Container(height: 40,),
              Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(color: Colors.greenAccent,   100,  height: 50,),
                  Container(color: Colors.yellow,        80,  height: 70,),
                  Container(color: Colors.purpleAccent,  120,  height: 60,),
                ],
              ),
              Container(height: 40,),
              Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment:  MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Container(color: Colors.greenAccent,   100,  height: 50,),
                  Container(color: Colors.yellow,        80,  height: 70,),
                  Container(color: Colors.purpleAccent,  120,  height: 60,),
                ],
              ),
              Container(height: 40,),
              Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(color: Colors.greenAccent,   100,  height: 50,),
                  Container(color: Colors.yellow,        80,  height: 70,),
                  Container(color: Colors.purpleAccent,  120,  height: 60,),
                ],
              ),
              Container(height: 40,),
              Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(color: Colors.greenAccent,   100,  height: 50,),
                  Container(color: Colors.yellow,        80,  height: 70,),
                  Container(color: Colors.purpleAccent,  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,   100,  height: 50,),
                  Container(color: Colors.yellow,        80,  height: 70,),
                  Container(color: Colors.purpleAccent,  120,  height: 60,),
                ],
              ),
            ],
          ),
        );
    View Code
            Row
     
  • 相关阅读:
    C++中重载,重写,隐藏的区别
    以太网(局域网)交换机工作原理
    IP地址、MAC地址、ARP地址解析协议
    Metasploitable渗透测试实战——Windows漏洞 MS08-067复现
    一次对真实网站的SQL注入———SQLmap使用
    多字节与宽字节转换
    char*、string、CString各种字符串之间转换
    国密SM4分组加密算法实现 (C++)
    网络编程——基于UDP的网络化CPU性能检测
    U盘小偷——C++实现U盘插入检测和文件扫描拷贝
  • 原文地址:https://www.cnblogs.com/RedSky/p/10443869.html
Copyright © 2011-2022 走看看