列布局column flutter布局篇-1

Column

从今开始连载了,先来介绍下常用的不常用的widgets,从最简单的column开始。


1、mainAxisAlignment:主轴布局方式,column主轴方向是垂直的方向

3463020-a3b60d2c8a8606d3.png

默认值:MainAxisAlignment.start:

  1. start ,沿着主轴方向(垂直方向)顶部对齐;
  2. end,沿着主轴方向(垂直方向)底部对齐;
  3. center,沿着主轴方向(垂直方向)居中对齐;
  4. spaceBetween ,沿着主轴方向(垂直方向)平分剩余空间
  5. spaceAround,把剩余空间平分成n份,n是子widget的数量,然后把其中一份空间分成2份,放在第一个child的前面,和最后一个child的后面;
    6.spaceEvenly,把剩余空间平分n+1份,然后平分所有的空间,请注意和spaceAround的区别;

2、crossAxisAlignment: 交叉轴的布局方式,对于column来说就是水平方向的布局方式

3463020-6873f19a51ff8857.png


默认值:CrossAxisAlignment.center,默认是水平居中

  1. start ,垂直主轴方向(水平方向)左侧对齐;
  2. end,垂直主轴方向(水平方向)右侧对齐;
  3. center,垂直主轴方向(水平方向)居中对齐;
  4. stretch ,垂直主轴方向(水平方向)拉伸子child;
  5. baseline,这个要和textBaseline一起使用,;

3、textBaseline:字体的基线(基线这东西一直没搞懂,具体详见下一章Row,效果更明显,垂直方向没啥用,不明显)

默认值:是空的

  1. alphabetic ,用于对齐字母字符底部的水平线;
  2. ideographic,用于对齐表意字符的水平线;

4、textDirection:文字布局方向

默认值:没有,但在row的布局上是左到右的,请看Row的章节

  1. TextDirection.ltr ,从左到右;
  2. TextDirection.rtl,从右到做布局;

5、verticalDirection:就是字child的垂直布局方向,向上还是向下

3463020-c0d0fd7f99c53fc6.png


new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          verticalDirection: VerticalDirection.down,
          // textDirection:,
          textBaseline: TextBaseline.alphabetic,
          children: <Widget>[
            Container(
              color: Colors.red,
              height: 30,
              width: 30,
            ),
            Container(
              color: Colors.blue,
              height: 30,
              width: 30,
            ),
            Container(
              color: Colors.yellow,
              height: 30,
              width: 30,
            ),
          ],
        ),
      ),




默认值:VerticalDirection.down 也就是从上到下的布局

  1. down ,从上向下布局,上图示例我的代码是红、蓝、黄;
  2. up,反过来从下向上布局,反过来就是黄、蓝、红;
本博客所有文章如无特别注明均为原创。作者:flutter教程网复制或转载请以超链接形式注明转自 Flutter教程网
原文地址《列布局column flutter布局篇-1
分享到:更多

相关推荐


Flutter教程网 官方QQ群:874592746

扫描下面二维码 加入Flutter教程网微信群:


发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)