Трепетать внутрьRowа такжеColumn

а такжевертикальная осьТочки.

Если макет находится в горизонтальном направлении, то главная ось относится к горизонтальному направлению, а вертикальная ось относится к вертикальному направлению;

Если макет находится в вертикальном направлении, шпиндель является вертикальным направлением, а продольная ось является горизонтальным направлением.

В линейной компоновке есть два класса перечисления, которые определяют выравнивание.MainAxisAlignmentа такжеCrossAxisAlignment, которые представляют выравнивание по главной оси и выравнивание по вертикальной оси соответственно.

Row

Ряд можно найти вгоризонтальное направлениеупорядочить его дочерние компоненты

Конструктор следующим образом:

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>[],
})

Интерпретация атрибутов

textDirection

Уровень подсборочного уровня на направлении планировки (слева направо или справа налево), слева направо по умолчанию

mainAxisSize

Ряд представляет занимаемое пространство в направлении шпинделя (горизонтальном),
По умолчаниюMainAxisSize.maxПредставляя, сколько горизонтального пространства занято
а такжеMainAxisSize.min

mainAxisAlignment

(эквивалент избыточного пространства для обработки элементов в макете Flex в H5 ---Учебное пособие по гибкому макету)

Представляет собой подсайдете в горизонтальном выравнивании космического занятого ряда (только еслиmainAxisSizeценностьMainAxisSize.max, это свойство имеет смысл)

MainAxisAlignment.startУказывает текстовое содержимое вдольtextDirectionвыравнивается с начальной ориентацией , (например,textDirectionстоимостьTextDirection.ltr, это означает выравнивание по левому краю,textDirectionстоимостьTextDirection.rtlозначает правильное выравнивание. )
MainAxisAlignment.endа такжеMainAxisAlignment.startровно наоборот;
MainAxisAlignment.centerУказывает, что текстовое содержимое расположено по центру
MainAxisAlignment.spaceAroundУказывает, что свободное пространство с обеих сторон каждого компонента равно
MainAxisAlignment.spaceBetweenУказывает, что расширенное пространство разделено поровну на сегменты (content-1).
MainAxisAlignment.spaceEvenlyУказывает, что расширенное пространство поровну разделено на (контент + 1) сегменты (часто используемые)

Пример кода:

child: Column(
  children: <Widget>[
	Row(
	  mainAxisAlignment: MainAxisAlignment.start,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),  //表示一条横线
	Row(
	  mainAxisAlignment: MainAxisAlignment.end,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),
	Row(
	  mainAxisAlignment: MainAxisAlignment.center,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),
	Row(
	  mainAxisAlignment: MainAxisAlignment.spaceAround,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),
	Row(
	  mainAxisAlignment: MainAxisAlignment.spaceBetween,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),
	Row(
	  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
  ],
),

текущий результат:

verticalDirection

Строка представляет продольную ось (вертикальное) направление выравнивания, по умолчаниюVerticalDirection.down, что означает сверху вниз.

crossAxisAlignment

Указывает выравнивание подсборки в направлении продольной оси, высота ROW равна наибольшей высоте дочернего элемента в подкомпоненте, а ее значение иMainAxisAlignmentто же (включаяstart,end,centerтри значения),

разница в томcrossAxisAlignmentСистема отсчетаverticalDirection,

которыйverticalDirectionзначениеVerticalDirection.downВремяcrossAxisAlignment.startозначает выравнивание сверху,

verticalDirectionзначениеVerticalDirection.upчас,crossAxisAlignment.startотносится к выравниванию по дну;
а такжеcrossAxisAlignment.endа такжеcrossAxisAlignment.startровно наоборот;

children

массив дочерних компонентов

Column

Columnдопустимыйвертикальное направлениеУпорядочивает свои дочерние компоненты.
Ряд и те же параметры, за исключением того, что направление компоновки перпендикулярно продольной оси шпинделя противоположно.

Конструктор следующим образом:

Column({
	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>[],
})

Примечание:Rowа такжеColumn

БудуColumnConstrainedBoxилиSizedBoxчтобы принудительно изменить ограничение ширины,

Например:

ConstrainedBox(
  constraints: BoxConstraints(minWidth: double.infinity), 
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text("Hello"),
      Text("World"),
    ],
  ),
);

БудуminWidthустановить какdouble.infinity, чтобы ширина занимала как можно больше места.

использоватьCenterвиджет;

контроль вложенности

еслиRowвложенный внутрьRow,илиColumnСнова вложенный внутрьColumn,

тогда только для самого дальнегоRowилиColumnзаймет как можно больше места внутриRowилиColumnЗанятое пространство является фактическим размером,

Пример:

Container(
  color: Colors.green,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max, //有效，外层Colum高度为整个屏幕
      children: <Widget>[
        Container(
          color: Colors.red,
          child: Column(
            mainAxisSize: MainAxisSize.max,//无效，内层Colum高度为实际高度  
            children: <Widget>[
              Text("hello world "),
              Text("I am Jack "),
            ],
          ),
        )
      ],
    ),
  ),
);

Если вы хотите, чтобы внутриColumnColumn,можно использоватьExpandedКомпоненты:

Expanded( 
  child: Container(
    color: Colors.red,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center, //垂直方向居中对齐
      children: <Widget>[
        Text("hello world "),
        Text("I am Jack "),
      ],
    ),
  ),
)

оExpanded

портал

Элементы управления Flutter Layout -> Wrap, Flow

Флаттерние макета управления Глава -> Flex, расширено

Элементы управления макетом Flutter -> Строка, столбец

Row