美文网首页Flutter学习日记
Flutter常用widget 'Row、Column&

Flutter常用widget 'Row、Column&

作者: 坑吭吭 | 来源:发表于2018-07-19 11:12 被阅读25次

    Row

    用于水平显示子项
    A widget that displays its children in a horizontal array.
    注:这个控件本身不可以滚动,并且如果里面包含了太多的子项或者子项长度超过可用空间的话会被视为错误。如果想要滚动的话可以考虑用ListView
    对应的,垂直显示子项用Column
    如果只有一个子项,建议用AlignCenter布局
    示例eg:

    new Row(
      children: <Widget>[
        new Expanded(
          child: new Text('Deliver features faster', textAlign: TextAlign.center),
        ),
        new Expanded(
          child: new Text('Craft beautiful UIs', textAlign: TextAlign.center),
        ),
        new Expanded(
          child: new FittedBox(
            fit: BoxFit.contain, // otherwise the logo will be tiny
            child: const FlutterLogo(),
          ),
        ),
      ],
    )
    
    Row效果

    tips

    如果你的子项长度过长,可以和示例代码中一样,用一个Expanded或其他的灵活有韧性的控件来包裹一下

    属性

    • mainAxisSize 决定row自身的宽度
      它含有两个值,分别是maxmin,默认为max
    可选属性 含义
    max 就像安卓里的match_parent ,尽可能的大
    min 就像安卓里的wrap_content ,根据所有子项宽度的和来决定宽度
    • mainAxisAlignment 决定子项的对齐方式(主轴),默认为start
    可选属性 含义
    center 居中对齐
    end 结尾对齐
    spaceAround 使每个子项占的空间一样大
    spaceBetween 两端对齐
    spaceEvenly 使每个子项之间的间隔一样大
    start 开头对齐
    values 一个List常量,用来存储所有的对齐方式枚举
    • CrossAxisAlignment 决定子项的对齐方式(垂直于主轴的那个轴),默认为start
    可选属性 含义
    center 居中对齐
    end 结尾对齐
    stretch 使子项充满这个轴
    baseline 子项的准线和交叉轴对齐(前提是对应的子项有准线,比如Text
    start 开头对齐
    • TextBaseline 一条线,用来对齐文字的
    可选属性 含义
    alphabetic 默认的字母基线
    ideographic 对齐表意字符
    • textDirection 子项的排列方向
    可选属性 含义
    rtl 从右往左←
    ltr 从左往右→(默认)
    • List<Widget> children 这是一个用来装子项的数组

    布局规则

    • 如果子项是可伸展的(被Expanded包裹),则会按照它的灵活系数(flex)进行分布,例如:在Row中,flex系数为2.0的子项宽度将会是flex系数为1.0的宽度的二倍。
    • Row的高度会和子项的的最大高度相同
    • Row的宽度和mainAxisSize有关,具体情况请看上面表格
    • 子项的具体位置和mainAxisSizecrossAxisAlignment相互左右有关
    • 子项如果是可伸缩的,那带Flexible.fitFlexible.tight的将会将强制填满分配的空间,带Flexible.loose的则不会强制填满

    Column 垂直排列

    基本属性和Row的用法相似,都是从Flex派生来的,最终都会把自己本身的参数传给Flex的构造方法。

    相关文章

      网友评论

        本文标题:Flutter常用widget 'Row、Column&

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