Flutter主轴（Main Axis）和交叉轴（Cross Axis）的概念理解

在Flutter中，容器类控件（如Row、Column、Container等）在布局时会涉及到主轴和交叉轴的概念。主轴指的是容器在其方向上用于排列子控件的轴线，而交叉轴则是相对于主轴的垂直轴或水平轴。

对于Row来说，主轴通常是水平轴，交叉轴是垂直轴；对于Column来说，主轴是垂直轴，交叉轴是水平轴。

以下是一个简单的示例，展示如何使用Row和Column来理解主轴和交叉轴的概念：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: <Widget>[
              Expanded(
                child: Column(
                  children: <Widget>[
                    Text('主轴是水平'),
                    Expanded(
                      child: Container(
                        color: Colors.blue,
                      ),
                    ),
                    Text('交叉轴是垂直'),
                  ],
                ),
              ),
              Expanded(
                child: Column(
                  children: <Widget>[
                    Text('主轴是水平'),
                    Expanded(
                      child: Container(
                        color: Colors.red,
                      ),
                    ),
                    Text('交叉轴是垂直'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们有一个Row，它的主轴是水平的。Row内部有两个Expanded子Widget，每个Expanded又包含一个Column。Column的主轴也是水平的，而交叉轴则是垂直的，这就意味着Text('主轴是水平')和Container将在水平方向上依次排列，而每个Expanded占据的空间则会在垂直方向上扩展。因此，在Row的主轴方向上，Container和Text将水平排列，而每个Container和Text下方的Expanded将垂直排列。