flutter布局-2-row

作者: liu_520 | 来源:发表于2018-11-04 14:37 被阅读162次

Row

连载:flutter布局-1-column

1、mainAxisAlignment:主轴布局方式,row主轴方向是水平方向

mainaxis.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: 交叉轴的布局方式,对于row来说就是垂直方向的布局方式

mainaxis.png

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

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

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

WX20181104-143705@2x.png

默认值:是空的

  1. alphabetic ,用于对齐字母字符底部的水平线;
  2. ideographic,用于对齐表意字符的水平线,可以看出刘成下沉一点,abc上浮了,;

4、textDirection:文字布局方向

默认值:没有,

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

5、verticalDirection:就是字child的垂直布局方向,向上还是向下,但是在row下这个不起作用

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

  1. down ,从上向下布局,上图示例我的代码是红、蓝、黄;
  2. up,反过来从下向上布局,反过来就是黄、蓝、红;

相关文章

  • flutter布局-3-center

    Center 居中的布局 连载:flutter布局-1-column连载:flutter布局-2-row 只能有一...

  • flutter布局-4-container

    Container 容器 连载:flutter布局-1-column连载:flutter布局-2-row连载:fl...

  • flutter布局-5-Matrix4矩阵变换

    Matrix4矩阵变化 连载:flutter布局-1-column连载:flutter布局-2-row连载:flu...

  • flutter布局-2-row

    Row 连载:flutter布局-1-column 1、mainAxisAlignment:主轴布局方式,row主...

  • Flutter 布局

    Flutter 布局详解 Flutter 布局(一)- Container详解 Flutter 布局(二)- Pa...

  • Flutter-布局

    一、介绍 flutter布局需要先了解flutter所有布局的widget,首先flutter布局分为Contai...

  • Flutter-汇总

    Flutter(一)--Flutter安装遇到的问题汇总 Flutter(二)--布局机制、布局步骤、水平和垂直布...

  • Flutter旋转位移等操作

    flutter布局-5-Matrix4矩阵变换Flutter 布局(六)- SizedOverflowBox、Tr...

  • Flutter及Dart入门

    目录 Dart语言下的Flutter Flutter Widget Flutter 布局 Flutter 页面 路...

  • flutter(六,页面布局篇)

    Tags: flutter Flutter页面布局篇 [TOC] 1. 布局及装饰组件说明 2. 基础布局处理 2...

网友评论

    本文标题:flutter布局-2-row

    本文链接:https://www.haomeiwen.com/subject/umbrxqtx.html