当使用Flutter中的Column和Row布局时，您可以使用各种属性来控制子部件的位置、对齐方式和占用空间等。下面是常用的属性：

共同属性（Both Column and Row）：

1. mainAxisAlignment：用于控制子部件在主轴（垂直对于Column，水平对于Row）上的对齐方式。

   • MainAxisAlignment.start：从主轴的起始位置开始排列。
   • MainAxisAlignment.end：从主轴的末尾位置开始排列。
   • MainAxisAlignment.center：在主轴上居中排列。
   • MainAxisAlignment.spaceEvenly：平均分布子部件，包括首尾位置。
   • MainAxisAlignment.spaceAround：在每个子部件前后留有空间。
   • MainAxisAlignment.spaceBetween：平均分布子部件，但首尾部件与父容器的边缘对齐。

2. crossAxisAlignment：用于控制子部件在交叉轴（水平对于Column，垂直对于Row）上的对齐方式。

   • CrossAxisAlignment.start：从交叉轴的起始位置开始排列。
   • CrossAxisAlignment.end：从交叉轴的末尾位置开始排列。
   • CrossAxisAlignment.center：在交叉轴上居中排列。
   • CrossAxisAlignment.stretch：子部件沿交叉轴拉伸以填满可用空间。
   • CrossAxisAlignment.baseline：子部件的基线与父容器的基线对齐（仅在子部件有文本时有效）。

3. mainAxisSize：用于确定主轴上的可用空间。

   • MainAxisSize.max：尽量占用所有可用空间。
   • MainAxisSize.min：仅占用子部件所需的最小空间。

4. textDirection：用于指定文本的方向，影响子部件的排列方向。默认为从左到右（TextDirection.ltr）。

   • TextDirection.rtl：从右到左排列子部件。

Column 特有属性：

1. verticalDirection：用于控制子部件的排列顺序，是从上到下（VerticalDirection.down）还是从下到上（VerticalDirection.up）。

Row 特有属性：

1. textBaseline：用于在 CrossAxisAlignment.baseline 模式下，指定与哪个基线对齐。
   • TextBaseline.alphabetic：与字母基线对齐（默认）。
   • TextBaseline.ideographic：与表意字符基线对齐。

我们先来了解一下， double.infinity 属性：

在Flutter中，double.infinity是一个特殊的常量值，用于表示一个无穷大的双精度浮点数。它通常用于设置宽度或高度的属性，以便在布局中占据尽可能多的可用空间。

当您将宽度或高度设置为double.infinity时，Flutter会尝试将相应的组件或部件拉伸以填充其父容器的所有可用空间。

 实现上面这个效果，可以看看下面的代码

Widget build(BuildContext context) {
    return Container(
      width: double.infinity,     //  宽度最大
      height: double.infinity,   //  高度最大
      color: Colors.green,
      child: Column(
        children: [
          Text("this is a test"),
        ],
      ),
    );
  }

其他的一些属性就自己参考上面的解释来熟悉就行了，还是挺好理解的。
 

下面我们来了解一些 Expanded 部件

在Flutter中，Expanded是一个常用的布局部件，用于将子部件包装在一个可以拉伸（填充）剩余空间的容器中。Expanded通常用在Column、Row或Flex等具有弹性空间的父部件中，以便子部件可以按比例分配可用空间。

Expanded具有以下属性：

1. flex：用于指定子部件在可用空间分配中所占的比例。例如，如果有两个子部件，其中一个的flex值为2，另一个为1，则前者将获得后者的两倍可用空间。默认值为1。

2. child：要包装的子部件。

看看下面的代码

Container(
      width: double.infinity,     //  宽度最大
      height: double.infinity,   //  高度最大
      color: Colors.green,
      child:Row(
        children: <Widget>[
          // 这个子部件占据剩余空间的1/3
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.red,
              height: 100,
            ),
          ),
          // 这个子部件占据剩余空间的2/3
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.blue,
              height: 100,
            ),
          ),
        ],
      )
    );

效果如下：

 如果要实现下面的效果呢？

代码如下：

class Page extends StatelessWidget {
  Page({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Container(
          width: 200,
          height: 200,
          color: Colors.deepPurpleAccent,
        ),
        SizedBox(
          height: 5,
        ),
        Row(
          children: [
            Expanded(
              flex: 2,
              child: SizedBox(
                height: 180,
                child: Image.network(
                  "https://th.bing.com/th/id/R.c16aba96e91130f59e4f0f22ec20d24c?rik=uFvShqJG1t%2ff5w&riu=http%3a%2f%2fk2.jsqq.net%2fuploads%2fallimg%2f1706%2f7_170617165807_4.jpg&ehk=VPX8aUOUfjGTAwdBF3VgdQbjb7jfYC2MKw3j1t36exY%3d&risl=&pid=ImgRaw&r=0",
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Expanded(
              flex: 1,
              child: SizedBox(
                height: 180,
                child: Column(
                  children: [
                    Expanded(
                      flex: 1,
                      child: Image.network(
                        "https://pic2.zhimg.com/v2-e2e61645e2efedda095e988dcbb42b7f_r.jpg?source=1940ef5c",
                        fit: BoxFit.cover,
                      ),
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    Expanded(
                      flex: 1,
                      child: Image.network(
                        "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/0A/ChMkJlbKzzSIPFs-ACFkHJ_3YpkAALJSwEqqbgAIWQ0936.jpg",
                        fit: BoxFit.cover,
                      ),
                    )
                  ],
                ),
              ),
            ),
            SizedBox(
              width: 10,
            )
          ],

        )
      ],
    );
  }
}