flutter应用开发--Expanded组件作用:1.子组件尽可能地填充主轴方向上剩余的空间；2.通过 flex 属性调整 Expanded 组件的填充比例

在 Flutter 里，Expanded 组件是 Flexible 组件的子类，它可让子组件尽可能地填充主轴方向上剩余的空间。你能够通过 flex 属性调整 Expanded 组件的填充比例。下面为你详细介绍如何操作：

1. `flex` 属性的作用

flex 属性是一个整数，它代表了 Expanded 组件在主轴方向上分配剩余空间的比例。默认情况下，flex 的值为 1。当有多个 Expanded 组件存在于同一个 Row 或 Column 中时，剩余空间会按照它们的 flex 值比例进行分配。

2. 代码示例

以下是一个使用 Row 组件和多个 Expanded 组件的示例，展示了如何调整填充比例：

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('Expanded Flex Ratio'),
        ),
        body: Center(
          child: Row(
            children: [
              // 第一个 Expanded 组件，flex 值为 1
              Expanded(
                flex: 1,
                child: Container(
                  color: Colors.red,
                  height: 100,
                  child: const Center(child: Text('Flex 1')),
                ),
              ),
              // 第二个 Expanded 组件，flex 值为 2
              Expanded(
                flex: 2,
                child: Container(
                  color: Colors.blue,
                  height: 100,
                  child: const Center(child: Text('Flex 2')),
                ),
              ),
              // 第三个 Expanded 组件，flex 值为 3
              Expanded(
                flex: 3,
                child: Container(
                  color: Colors.green,
                  height: 100,
                  child: const Center(child: Text('Flex 3')),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 代码解释

在上述代码中，Row 组件内有三个 Expanded 组件，它们的 flex 值分别为 1、2 和 3。
当 Row 组件分配空间时，会先计算出剩余的可用空间，然后按照 flex 值的比例分配给这三个 Expanded 组件。
这里的比例为 1:2:3，也就是说，第一个 Expanded 组件会占据剩余空间的 1/(1 + 2 + 3) = 1/6，第二个 Expanded 组件会占据 2/6，第三个 Expanded 组件会占据 3/6。