面试题：Flutter布局中Expanded的基本原理与应用

Question

请解释在Flutter布局中Expanded组件的作用，以及它是如何分配剩余空间的。并举例说明在一个Row或Column布局中如何合理使用Expanded来实现两部分按比例分配空间。

Answer 1

Expanded组件的作用

Expanded组件用于在Flutter布局中灵活分配剩余空间。它通常包裹在一个弹性布局（如Row、Column或Flex）的子组件上，以控制子组件如何占用布局中的剩余空间。

如何分配剩余空间

1. 计算剩余空间：当Row、Column或Flex布局确定了所有非弹性子组件（即没有被Expanded包裹的子组件）的大小后，计算出剩余空间。
2. 按比例分配：如果有多个Expanded子组件，剩余空间会根据它们的flex属性值（默认为1）按比例分配。例如，有两个Expanded子组件，一个flex为2，另一个flex为1，那么flex为2的子组件将获得剩余空间的2/3，flex为1的子组件将获得剩余空间的1/3。

示例 - 在Row布局中按比例分配空间

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('Expanded Example in Row'),
        ),
        body: Row(
          children: [
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.blue,
                child: Center(child: Text('Flex 2')),
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.green,
                child: Center(child: Text('Flex 1')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在上述代码中，Row布局包含两个Expanded子组件。第一个Expanded的flex为2，第二个Expanded的flex为1。因此，蓝色区域（Flex 2）将占据Row布局剩余空间的2/3，绿色区域（Flex 1）将占据剩余空间的1/3。

示例 - 在Column布局中按比例分配空间

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('Expanded Example in Column'),
        ),
        body: Column(
          children: [
            Expanded(
              flex: 3,
              child: Container(
                color: Colors.red,
                child: Center(child: Text('Flex 3')),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.yellow,
                child: Center(child: Text('Flex 2')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

此代码中，Column布局有两个Expanded子组件。红色区域（Flex 3）的flex为3，黄色区域（Flex 2）的flex为2。所以红色区域将占据Column布局剩余空间的3/5，黄色区域将占据剩余空间的2/5。