Flutter行列基础教程（线性布局）

线性布局是指子组件在水平或垂直方向上的排列方式。 Flutter 中线性布局是通过 Row 和 Column 实现的，类似于 Android 中的 LinearLayout 控件。 Row 和 Column 均继承自 Flex（弹性布局）。我们稍后会详细解释Flex。 。

主轴和垂直轴

对于线性布局，有主轴和垂直轴。如果布局是沿水平方向（如：Row），则主轴显示水平方向，垂直轴则显示垂直方向；如果布局是垂直方向（如：Column），则主轴表示垂直方向，垂直轴表示水平方向。线性布局中，有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment，分别代表主轴和垂直轴对齐方式。

Row

Row可以在水平方向上排列子组件，定义如下：

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

• textDirection：表示子组件在水平方向左侧或右侧或右侧的布局顺序。 left ），默认为系统当前Locale环境的文本方向（例如中文和英文从左到右，阿拉伯语从右到左）。 ？子部件实际占用多少主轴空间，Row的宽度始终等于主轴方向的最大宽度；而MainAxisSize.min表示占用一点主轴空间，例如，当子组件Row不占用主轴的剩余空间时。 Row

Column(
    //测试Row对齐方式，排除Column默认居中对齐的干扰
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("Hello World"),
          Text("I am Zane")
        ],
      ),
      Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("Hello World"),
          Text("I am Zane")
        ],
      ),
      Row(
        textDirection: TextDirection.rtl,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Text("Hello World"),
          Text("I am Zane")
        ],
      ),
      Row(
        verticalDirection: VerticalDirection.up,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text("Hello World", style: TextStyle(fontSize: 30.0),),
          Text("I am Zane"),
        ],
      ),
    ],
  ),
复制代码

Column

Column可以垂直排列子组件。参数与Row相同。不同的是子组件布局方向是垂直的。主轴线和垂直轴与Row 正好相反。读者可以类比 Row 来理解，我们举个例子：

import 'package:flutter/material.dart';

class CenterColumnRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text("Hi"),
        Text("World"),
      ],
    );
  }
}
复制代码

操作的效果如下：

看图说：♹确定mainAxisSize 来自 Column，使用默认值 MainAxisSize。

将在垂直方向上占用尽可能多的空间，在本例中为屏幕的高度。

因为我们将属性crossAxisAlignment定义为CrossAxisAlignment.center，那么子组件

就在

中 垂直轴方向（当前水平方向）将居中。注意水平方向对齐是有限的，空间实际宽度的总宽度被Column占据，实际宽度取决于子组件中宽度最大的组件。在本例中，Column有两个子组件，而显示“World”的Text具有最大宽度，因此❀❀ Text("World")的宽度，所以中心对齐后，Text("Hi")会显示在中间 Text("World")

其实都是Row和Column只会在主轴方向和最大垂直轴的长度上占据尽可能多的空间。子元素。

如果我们想让本例中的两个文本控件在整个屏幕的中心对齐，我们有两种方法：

1. 定义Column的宽度为屏幕；您可以通过 ConstrainedBox 或 SizedBox 强制其更改宽度限制，例如：

   ConstrainedBox(
     constraints: BoxConstraints(minWidth: double.infinity),
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.center,
       children: <Widget>[
         Text("Hi"),
         Text("World")
       ],
     ),
   ),
   
   SizedBox(
     width: double.infinity,
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.center,
       children: <Widget>[
         Text("Hi"),
         Text("World")
       ],
     ),
   ),
   复制代码

   set ♶ 双无穷大，你可以使宽度占据尽可能多的空间。

2. 使用组件中心，例如：

   Center(
     child: Column(
       children: <Widget>[
         Text("Hi"),
         Text("World")
       ],
     ),
   ),
   复制代码

特殊情况

如果行位于行，或列列放在里面，那么只有最外面的Row或才是最外面的空间，并且尽可能多的Row或Column所占据的空间是合适的尺寸。以Column为例：

Container(
  color: Colors.blue,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      mainAxisSize: MainAxisSize.max, //有效，外层Colum高度为整个屏幕
      children: <Widget>[
        Container(
          color: Colors.white,
          child: Column(
            mainAxisSize: MainAxisSize.max, //无效，内层Colum高度为实际高度
            children: <Widget>[
              Text("Hello world"),
              Text("I am Zane")
            ],
          ),
        ),
      ],
    ),
  ),
),
复制代码

运行效果如下：

如果想要内部Column

外部

Container(
  color: Colors.blue,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      mainAxisSize: MainAxisSize.max, //有效，外层Colum高度为整个屏幕
      children: <Widget>[
        Expanded(  //使用Expanded
          child: Container(
            color: Colors.white,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max, //有效，内层Colum高度占满外部Column
              children: <Widget>[
                Text("Hello world"),
                Text("I am Zane")
              ],
            ),
          ),
        ),
      ],
    ),
  ),
),
复制代码