正文

Flutter布局4--Row

IP云
IP云V管理员/3 阅读
12/01
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

Row
  • 简介

  • mainAxisAlignment：主轴布局方式，row主轴方向是水平方向

  • crossAxisAlignment: 交叉轴的布局方式，对于row来说就是垂直方向的布局方式

  • Row 是一个将其child显示在水平数组的widget
  • ·将其child填充可用的横向水平空间，一行高度是childs的最大高度（即：总是满足传入的垂直约束）
  • ·如果你只有一个child，只需要考虑使用对其或者中间位置，如果多个child，注意扩展水平空间（Expanded），可以将child封装在一个扩展部件里面
  • ·当我们看到行有黄色和黑色条纹警告时候，说明行已经溢出，当行溢出，行之间空间将没有任何空间可供扩展。
  • 基本用法

  • 水平布局，设置位置对齐方式
    mainAxisSize 属性
    ·一行的高度是有mainAxisSize属性控制，默认是max mainAxisAlignment属性
    ·将children放置在主轴某位置
    CrossAxisAlignment 属性
    ·crossAxisAlignment:crossAxisAlignment.center/end/start，
    ·即，根据设定的位置交叉对齐

  • 默认值：MainAxisAlignment.start：

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

  6. 默认值：CrossAxisAlignment.center，默认是水平居中

    1. start ，垂直主轴方向(垂直方向)顶部对齐；
    2. end，垂直主轴方向(垂直方向)底部对齐；
    3. center，垂直主轴方向(垂直方向)居中对齐；
    4. stretch ，垂直主轴方向(垂直方向)拉伸子child；
    5. baseline，这个要和textBaseline一起使用，；

  7. mainAxisAlignment：主轴布局方式如下:

  • crossAxisAlignment: 交叉轴的布局方式，对于row来说就是垂直方向的布局方式,如下:

    • 相关阅读

    目录[+]