Row
继承
Object-> Diagnosticable ->DiagnosticableTree-> Widget ->RenderObjectWidget ->MultiChildRenderObjectWidget-> Flex-> Row
介绍
一个小部件,用于在水平数组中显示其子项。要使子项扩展以填充可用的水平空间,请将子项包装在Expanded小部件中。“ 行”窗口小部件不会滚动(并且通常将行中的子项多于可用空间中的子项被视为错误)。如果您有一系列小部件并希望它们能够在没有足够空间时滚动,请考虑使用ListView。有关垂直变体,请参见列。如果您只有一个孩子,请考虑使用Align或Center来定位孩子。
Code
此示例将可用空间划分为三个(水平),并将文本放在前两个单元格中心,将Flutter徽标放在第三个中心:
Row( children: <Widget>[ Expanded( child: Text('Deliver features faster', textAlign: TextAlign.center), ), Expanded( child: Text('Craft beautiful UIs', textAlign: TextAlign.center), ), Expanded( child: FittedBox( fit: BoxFit.contain, // otherwise the logo will be tiny child: const FlutterLogo(), ), ), ], )
构造方法
Row({ Key key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, MainAxisSize mainAxisSize = MainAxisSize.max, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection = VerticalDirection.down, TextBaseline textBaseline, List<Widget> children = const <Widget>[], }) : super( children: children, key: key, direction: Axis.horizontal, mainAxisAlignment: mainAxisAlignment, mainAxisSize: mainAxisSize, crossAxisAlignment: crossAxisAlignment, textDirection: textDirection, verticalDirection: verticalDirection, textBaseline: textBaseline, ); }
主轴
横向排列 水平主轴,纵向侧轴
侧轴
MainAxisAlignment
子控件主轴放置方式
enum MainAxisAlignment { start, // 尽可能靠近主轴的起点 end, // 尽可能靠近主轴末端的地方 center, // 尽可能近主轴中间的地方 spaceBetween, // 在子控件中间均匀地放置自由空间,第一个前和最后一个后无空间 spaceAround, // 在子控件中间均匀地放置自由空间,同时也放置一半空间在第一个前和最后一个控件后。 spaceEvenly, // 在第一个控件和最后一个控件之前和之后均匀地放置自由空间 }
MainAxisSize
enum MainAxisSize { min, // 控件尽可能小(取此值时,上面的MainAxisAlignment 无效) max, // 控件尽可能大 }
CrossAxisAlignment
侧轴方向的放置方式
enum CrossAxisAlignment { start, // 子控件都父控件的项部 end, // 子控件都在父控件的底部 center, // 子控件居父控件的中部 stretch, // 子控件填满主轴,( 使用此值时,子控件一定要设置width或height) baseline, // 当子控件是Text时有效,并要设置下面的TextBaseLine属性 }
黄色和黑色警告条纹
解决方法是将子项包装在Expanded小部件中,该小部件告诉行应该为子项提供剩余空间:
Column
Flexible
this.fit = FlexFit.loose
Expanded 继承与Flexible
会尽可能的充满分布在Row, Column, or Flex的主轴方向上;或者会按照flex等比例平分剩余空间
强制子组件填充可用空间
this.fit = FlexFit.tight
FlexFit
tight(紧) 子元素被要求填补可用的空间。
loose(宽松) 子元素最多可以与可用的空间一样大(但允许更小)。
ListView
可滚动的widget 相当于andorid中的 scrollview和listview合体