Flutter中Stack与FittedBox的使用：仅让单个Icon占满空间

问题的核心在于：Stack默认会根据子组件的最大尺寸来确定自身大小，直接给第一个Icon套FittedBox时，因为没有明确的空间约束，FittedBox不知道要缩放到多大，所以图标会保持原始尺寸；而给整个Stack套FittedBox会让所有子组件同步缩放。

要实现仅第一个Icon占满可用空间，第二个Icon保持原尺寸的效果，可以通过以下方式修改代码：

1. 用LayoutBuilder获取父级（Expanded提供的）可用空间约束
2. 让Stack基于这个约束确定自身大小，而非子组件尺寸
3. 给第一个Icon套Positioned.fill + FittedBox，使其占满Stack的全部空间
4. 第二个Icon保留原有尺寸设置，不受缩放影响

修改后的完整代码：

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(
      home: MyHomePage(),
    ));

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: Row(
          children: [
            Expanded(
              child: LayoutBuilder(
                builder: (context, constraints) {
                  return Stack(
                    children: [
                      Positioned.fill(
                        child: FittedBox(
                          child: Icon(Icons.abc),
                        ),
                      ),
                      SizedBox(
                        width: 10,
                        height: 10,
                        child: Icon(Icons.access_alarm),
                      ),
                    ],
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这里的关键是Positioned.fill会让第一个Icon的布局范围充满整个Stack，再配合FittedBox就能让图标自动缩放以占满所有可用空间；而第二个Icon被SizedBox固定了尺寸，不会受到缩放影响。

内容的提问来源于stack exchange，提问作者Andrey