面试题：Flutter 中 Spacer 如何在布局中优化间距

Question

请描述在 Flutter 布局中使用 Spacer 优化 Widget 间距的原理，并给出一个示例代码，展示如何通过 Spacer 使两个按钮在水平方向上均匀分布。

Answer 1

Spacer 优化 Widget 间距的原理

在 Flutter 布局中，Spacer 是一个特殊的 Widget，它会尽可能地占用剩余空间。当布局中有多个 Spacer 时，它们会根据布局方向（水平或垂直）按比例分配剩余空间，从而优化 Widget 之间的间距。例如在水平布局中，多个 Spacer 会平分主轴（水平方向）上的剩余空间，使得位于它们之间的 Widget 能够均匀分布。

示例代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Spacer 示例'),
        ),
        body: Row(
          children: [
            Spacer(),
            ElevatedButton(
              onPressed: () {},
              child: const Text('按钮 1'),
            ),
            Spacer(),
            ElevatedButton(
              onPressed: () {},
              child: const Text('按钮 2'),
            ),
            Spacer(),
          ],
        ),
      ),
    );
  }
}

在上述代码中，通过在两个 ElevatedButton 之间以及按钮两侧添加 Spacer，使得按钮在水平方向上均匀分布。Row 作为水平方向的布局容器，Spacer 会将主轴上的剩余空间进行分配，从而实现按钮均匀分布的效果。