Flutter 中的 Expanded 小部件：全面指南

在Flutter中，Expanded小部件是一个灵活的布局小部件，它允许子小部件填充父容器的空间。Expanded通常用在Row, Column, 或 Flex小部件中，在这些小部件中，Expanded可以扩展来填充所有可用的空间。

以下是一个简单的使用Expanded的例子，其中Expanded用于在Column中填充空间：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.red,
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，Column的两个Expanded子元素各自拥有相等的可用空间，因为它们都被分配了相同的flex因子（默认为1）。每个Expanded小部件包含一个Container，颜色不同，以便于区分。

请注意，如果在一个Column中有多个Expanded小部件，它们将平均分配空间。如果你想要某些子部件占据更多的空间，你可以给它们设置不同的flex因子。例如：

Column(
  children: <Widget>[
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
),

在这个例子中，红色的Container将占据两倍的空间，而蓝色的Container将占据一半的空间。