Flutter 基础组件-行

本文章主要翻译于Widgets: Row

Row组件主要用来在水平方向显示其子组件, 当组件作为子组件被放置在Row中时,子组件不能滚动

只显示在视图中可见的组件

例如,可以像如下使用一个Row组件

new Row(
    children: <Widget>[
    new Text(‘The first text widget’, textAlign: TextAlign.center),
    new Text(‘The first text widget’, textAlign: TextAlign.center),
    new Text(‘The first text widget’, textAlign: TextAlign.center)
 ],
)

在Row中,子组件按照顺序逐个布局,再看一下下面这个例子

new Row(
    children: <Widget>[
    const FlutterLogo(),
    new Text("This is a text widget to be   
    displayed on the screen, as you can see it is a pretty long text widget, right?"),
    const FlutterLogo()
 ],
)

这个组件的布局顺序如下: - 首先布局FlutterLogo,其占据其大小的屏幕空间

因此对于水平布局组件Row而言,其一个需要注意的问题就是屏幕空间大小的问题,

为了解决这个问题,我们需要引入Expanded组件

new Row(
  children: <Widget>[
    const FlutterLogo(),
    const Expanded(child: const Text("This is a text widget to be   
    displayed on the screen, as you can see it is a pretty long text 
    widget, right?")),
    const FlutterLogo()
  ],
)

修改以后,其布局顺序也发生了改变,首先会计算两个FlutterLogo所占据的屏幕空间,

然后再计算被Expanded包裹的文本组件

布局步骤

  1. 优先布局子组件为null以及不可伸缩组件(相对的可伸缩组件为:Expanded), 对于这些组件在水平方向上没有做限制,在垂直方向上限制为屏幕的大小 如果设定crossAxisAlignment:CrossAxisAlignment.stretch,在水平方向上将会匹配其宽度的最大值

  2. 然后将可伸缩的组件布局于剩下的空间,在这一步的时候,子组件还没有被布局

  3. 当布局可伸缩组件时,采用的规则与第一步的规则相似,只不过不会将已经布局的不可伸缩组件挤出屏幕之外,而是自身超出部分不可见

  4. Row的高度,子组件在水平方向的显示永远是安全的,也就是说水平方向永远可见

  5. Row的宽度取决于mainAxisSize属性

  6. 子组件的位置确定,取决于mainAxisAlignmentcrossAxisAlignment两个组件

属性

参考资料