面试题：Flutter中Row和Column主轴与交叉轴的基础应用

Question

假设你需要在一个Column中水平居中且垂直居中放置两个文本组件，文本分别为'Left'和'Right'，请使用Row和Column结合主轴与交叉轴相关属性实现该布局，并解释你设置的主轴和交叉轴方向及相关对齐属性的作用。

Answer 1

以下是使用Flutter实现该布局的代码示例及解释：

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: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Left'),
                  SizedBox(width: 16),
                  Text('Right'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

主轴和交叉轴方向及相关对齐属性的作用解释：

1. 外层Column：

   • 主轴方向：在Column中，主轴方向是垂直方向（从上到下）。
   • mainAxisAlignment: MainAxisAlignment.center：这个属性决定了主轴上子Widget的对齐方式。设置为MainAxisAlignment.center，表示子Widget在主轴（垂直方向）上居中对齐。
   • 交叉轴方向：对于Column，交叉轴方向是水平方向（从左到右）。
   • crossAxisAlignment: CrossAxisAlignment.center：此属性设置交叉轴上子Widget的对齐方式。设置为CrossAxisAlignment.center，意味着子Widget在交叉轴（水平方向）上居中对齐。

2. 内层Row：

   • 主轴方向：在Row中，主轴方向是水平方向（从左到右）。
   • mainAxisAlignment: MainAxisAlignment.center：该属性决定了主轴上子Widget（即'Left'和'Right'两个Text组件）的对齐方式。设置为MainAxisAlignment.center，表示这两个Text组件在主轴（水平方向）上居中对齐。
   • 交叉轴方向：对于Row，交叉轴方向是垂直方向（从上到下）。这里并没有显式设置交叉轴对齐属性，因为默认的CrossAxisAlignment.center已经满足需求，即子Widget在交叉轴（垂直方向）上居中对齐。

这样就实现了在一个Column中水平居中且垂直居中放置两个文本组件'Left'和'Right'的布局。