行与列

Row 和 Column 都继承自 Flex 组件

Row

Row 可以在水平方向排列其子 widget。定义如下:

Row({
  ...
  TextDirection textDirection,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  VerticalDirection verticalDirection = VerticalDirection.down,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  List<Widget> children = const <Widget>[],
})

Column

Column 可以在垂直方向排列其子组件。参数和 Row 一样,不同的是布局方向为垂直,主轴和交叉轴正好相反

参数

Row 和 Column 的参数相同, 都有以下常用参数:

textDirection

主轴排列方式

取值:

  • TextDirection.ltr (默认)
  • TextDirection.rtl

mainAxisSize

主轴宽度

取值:

  • MainAxisSize.max (默认)
  • MainAxisSize.min

mainAxisAlignment

主轴对齐方式

取值:

  • MainAxisAlignment.start (默认)
  • MainAxisAlignment.end
  • MainAxisAlignment.center

如果 mainAxisSize 取值为 MainAxisSize.min, 则此属性无效

mainAxisAlignmenttextDirection 有关

  • textDirectionTextDirection.ltr, 则 row: start 为左, end 为右; column: start 为上, end 为下
  • textDirectionTextDirection.rtl, 则 row: start 为右, end 为左; column: start 为下, end 为上

verticalDirection

交叉轴排列方式

取值:

  • VerticalDirection.down (默认)
  • VerticalDirection.up

crossAxisAlignment

交叉轴对齐方式

取值:

  • CrossAxisAlignment.start
  • CrossAxisAlignment.center (默认)
  • CrossAxisAlignment.start

crossAxisAlignmentverticalDirection 有关

  • verticalDirectionVerticalDirection.down, 则 row: start 为上, end 为下; column: start 为左, end 为右
  • verticalDirectionVerticalDirection.up, 则 row: start 为下, end 为上; column: start 为右, end 为左

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress