面试题：Flutter布局管理之弹性布局原理与应用

Question

在Flutter中，弹性布局（Flex布局，如Row和Column）是非常常用的布局方式。请详细阐述Flex布局的原理，包括主轴和交叉轴的概念、flex参数的作用。并且举例说明如何使用Flex布局实现一个水平方向均匀分布三个按钮，且每个按钮宽度占总宽度三分之一的界面。

Answer 1

Flex布局原理

1. 主轴和交叉轴：
   • 主轴：Flex布局沿着主轴方向排列子组件。对于Row布局，主轴是水平方向；对于Column布局，主轴是垂直方向。
   • 交叉轴：与主轴垂直的方向就是交叉轴。例如在Row布局中，交叉轴是垂直方向；在Column布局中，交叉轴是水平方向。
2. flex参数作用：
   • flex参数用于定义子组件在主轴方向上的伸缩比例。当有剩余空间时，拥有flex值的子组件会按照其flex值比例分配剩余空间。例如有两个子组件，一个flex为1，另一个flex为2，那么第二个子组件将获得的剩余空间是第一个子组件的两倍。如果没有剩余空间，flex值并不会影响子组件的大小。

示例代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flex布局示例'),
        ),
        body: Row(
          children: [
            Expanded(
              flex: 1,
              child: ElevatedButton(
                onPressed: () {},
                child: Text('按钮1'),
              ),
            ),
            Expanded(
              flex: 1,
              child: ElevatedButton(
                onPressed: () {},
                child: Text('按钮2'),
              ),
            ),
            Expanded(
              flex: 1,
              child: ElevatedButton(
                onPressed: () {},
                child: Text('按钮3'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在上述代码中，使用Row作为水平方向的弹性布局容器，内部使用三个Expanded包裹ElevatedButton。Expanded组件会自动根据flex值（这里都为1）来分配主轴方向（水平方向）上的剩余空间，从而实现每个按钮宽度占总宽度三分之一的效果。