A, Row linear layout of the layout component (its children widgets in a horizontal array)
Attributes:Row({
TextDirection textDirection,
表示水平方向子组件的布局顺序(是从左往右还是从右往左),默认为系统当前Locale环境的文本方向 MainAxisSize mainAxisSize = MainAxisSize.max,
表示Row
在主轴(水平)方向占用的空间,默认是MainAxisSize.max
,表示尽可能多的占用水平方向的空间,此时无论子widgets实际占用多少水平空间,Row
的宽度始终等于水平方向的最大宽度;而MainAxisSize.min
表示尽可能少的占用水平空间,当子组件没有占满水平剩余空间,则Row
的实际宽度等于所有子组件占用的的水平空间 MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
表示子组件在Row
所占用的水平空间内对齐方式,当MaxinAxisSize定义为min时,次属性无意义;其可选属性可以参考Text控件,其start的位置参考TextDirection的定义,
可以理解为:
textDirection
是mainAxisAlignment
的参考系。
VerticalDirection verticalDirection = VerticalDirection.down,表示
Row
纵轴(垂直)的对齐方向,默认是VerticalDirection.down
,表示从上到下。
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
List <Widget> children = const < Widget> [],
表示子组件在纵轴方向的对齐方式,Row
的高度等于子组件中最高的子元素高度,它的取值和MainAxisAlignment
一样(包含start
、end
、center
三个值)
the subassembly array.
})
Supplement 1: Common attributes are: MainAxisAlignment children
Supplementary 2: Row controls can be divided into two flexible non-aligned and flexible arrangement
1). Ineffective horizontal layout (not flexible is based on the size of the Row child elements, layout. If the child is less than it would have a gap, if the child element is exceeded, it will warn)
code show as below:
child:Row(
children: <Widget>[
RaisedButton(
onPressed: (){},
color: Colors.redAccent,
child: Text ( 'red button'),
),
RaisedButton(
onPressed: (){},
color: Colors.blueAccent,
child: Text ( 'blue button'),
),
RaisedButton(
onPressed: (){},
color: Colors.grey,
child: Text ( 'gray button'),
),
],
),
NOTE: The row inflexible layout size according to the size of the child element, and not the size of the adaptive parent element.
2) Flexible horizontal layout (there are gaps to solve the above problems, can be used Expanded
to solve, that is, we say flexible layout)
Usage: Expanded (child :); row will need to be flexible layout of child controls placed under the Expanded the child, the child elements can be flexible layout.
Example snippet:
Expanded(child:RaisedButton(
onPressed: (){},
color: Colors.redAccent,
child: Text ( 'red button'),
),
Renderings:
Two, Row linear layout of the layout component (subassembly which may be arranged in the vertical direction)
And parameters Row
like different layout direction perpendicular to the longitudinal axis of the spindle opposite analogy Row
to understand, from the attribute not be repeated. Its flexible layout can also be analogies row
Flexible layout and renderings: