如何在Wrap组件内使用FittedBox并维持换行布局

我在Wrap组件里放置了多个子组件，原本红色容器占满屏幕宽度。现在要适配其他动态组件，得缩小红色正方形区域，但希望保留Wrap的换行布局，只对整体做缩放。试了FittedBox后，布局变成单行，换行效果完全消失了。

初始代码 #

class TestWidget extends StatefulWidget {
  const TestWidget({super.key});

  @override
  State<TestWidget> createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test'),
      ),
      body: Container(
        color: Colors.red,
        child: SizedBox.square(
          dimension: MediaQuery.of(context).size.width,
          child: Container(
            child: Wrap(
              children: [
                FlutterLogo(size: 100),
                FlutterLogo(size: 100),
                FlutterLogo(size: 100),
                FlutterLogo(size: 100),
                FlutterLogo(size: 100),
                FlutterLogo(size: 100),
                FlutterLogo(size: 100),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

初始布局效果：

使用FittedBox后的代码 #

class _TestWidgetState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test'),
      ),
      body: Row(
        children: [
          Expanded(
            child: Container(
              color: Colors.red,
              child: AspectRatio(
                aspectRatio: 1,
                child: FittedBox(
                  child: Wrap(
                    children: [
                      FlutterLogo(size: 100),
                      FlutterLogo(size: 100),
                      FlutterLogo(size: 100),
                      FlutterLogo(size: 100),
                      FlutterLogo(size: 100),
                      FlutterLogo(size: 100),
                      FlutterLogo(size: 100),
                    ],
                  ),
                ),
              ),
            ),
          ),
          Text("Something else"),
        ],
      ),
    );
  }
}

使用FittedBox后的布局效果：

问题根源是FittedBox会让子组件尽可能拉伸，导致Wrap的可用宽度被无限放大，直接失去换行逻辑。要保留换行同时缩放整体，得让Wrap先在原始宽度下完成换行布局，再对整个容器做缩放，而不是用FittedBox套Wrap。

推荐两种可行方案：

方案一：固定缩放比例（Transform.scale） #

给Wrap所在的容器套Transform.scale，指定缩放比例，同时保持Wrap的原始宽度（比如原屏幕宽度）。这样Wrap会先按原始宽度换行，再整体缩放到目标大小。

示例代码：

class _TestWidgetState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    // 自定义缩放比例，比如缩放到原大小的70%
    final scale = 0.7;

    return Scaffold(
      appBar: AppBar(title: const Text('Test')),
      body: Row(
        children: [
          // 用SizedBox控制缩放后红色容器的大小
          SizedBox(
            width: screenWidth * scale,
            height: screenWidth * scale,
            child: Transform.scale(
              scale: scale,
              alignment: Alignment.topLeft,
              child: Container(
                color: Colors.red,
                width: screenWidth,
                child: Wrap(
                  children: List.generate(7, (_) => const FlutterLogo(size: 100)),
                ),
              ),
            ),
          ),
          const Text("Something else"),
        ],
      ),
    );
  }
}

方案二：自适应父容器大小（LayoutBuilder + Matrix4） #

如果红色正方形需要自适应Row剩余空间的大小，可以用LayoutBuilder获取父容器的可用尺寸，计算缩放比例后用Matrix4做变换：

示例代码：

class _TestWidgetState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(title: const Text('Test')),
      body: Row(
        children: [
          Expanded(
            child: AspectRatio(
              aspectRatio: 1,
              child: LayoutBuilder(
                builder: (context, constraints) {
                  // 计算缩放比例：父容器可用宽度 / 原始屏幕宽度
                  final scale = constraints.maxWidth / screenWidth;
                  return Transform(
                    transform: Matrix4.diagonal3Values(scale, scale, 1),
                    alignment: Alignment.topLeft,
                    child: Container(
                      color: Colors.red,
                      width: screenWidth,
                      child: Wrap(
                        children: List.generate(7, (_) => const FlutterLogo(size: 100)),
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
          const Text("Something else"),
        ],
      ),
    );
  }
}

这两种方案都能先让Wrap完成换行布局，再整体缩放容器，既保留了换行效果，又实现了红色区域缩小的需求。

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