如何在Flutter中同时使用FittedBox与Text的softWrap属性

问题背景 #

当把Text组件作为FittedBox的子组件时，Text的softWrap属性会失效——文本不会按预期自动换行，而是直接缩小字号适配容器。根源在于FittedBox会向子组件传递无限宽高的约束，Text会默认认为自己有足够空间展示全部内容，因此不会触发换行逻辑。

测试代码及问题现象如下：

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(
      title: 'Fitted Box Test',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Fitted Box Test'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Fitted Box Test')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    const Text('W/O FittedBox (GOOD)'),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          border: Border.all(width: 2.0, color: Colors.black),
                          color: Colors.lightGreen),
                      child: const Center(
                        child: Text(
                          'Short Text',
                          softWrap: true,
                          textAlign: TextAlign.center,
                          maxLines: 4,
                        ),
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    const Text('With FittedBox (GOOD)'),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          border: Border.all(width: 2.0, color: Colors.black),
                          color: Colors.lightGreen),
                      child: const FittedBox(
                        fit: BoxFit.scaleDown,
                        child: Text(
                          'Short Text',
                          softWrap: true,
                          textAlign: TextAlign.center,
                          maxLines: 4,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    const Text('W/O FittedBox (GOOD)'),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          border: Border.all(width: 2.0, color: Colors.black),
                          color: Colors.lightGreen),
                      child: const Center(
                        child: Text(
                          'verbose longer text',
                          softWrap: true,
                          textAlign: TextAlign.center,
                          maxLines: 4,
                        ),
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    const Text('With FittedBox (BAD)\nShould use two lines'),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          border: Border.all(width: 2.0, color: Colors.black), color: Colors.pink),
                      child: const FittedBox(
                        fit: BoxFit.scaleDown,
                        child: Text(
                          'Verbose Longer Text',
                          softWrap: true,
                          textAlign: TextAlign.center,
                          maxLines: 4,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    const Text('W/O FittedBox (BAD)\nLoses a line', textAlign: TextAlign.center),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          border: Border.all(width: 2.0, color: Colors.black),
                          color: Colors.pink),
                      child: const Center(
                        child: Text('Really Really Really Over Verbose Text',
                            softWrap: true, textAlign: TextAlign.center, maxLines: 4),
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    const Text(
                      'With FittedBox (BAD)\nShould use more lines',
                      textAlign: TextAlign.center,
                    ),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          border: Border.all(width: 2.0, color: Colors.black), color: Colors.pink),
                      child: const FittedBox(
                        fit: BoxFit.scaleDown,
                        child: Text(
                          'Really Really Really Over Verbose Text',
                          softWrap: true,
                          textAlign: TextAlign.center,
                          maxLines: 4,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

问题现象截图：

解决方案 #

核心思路是：让Text先在有限的约束范围内完成换行，再将处理后的文本交给FittedBox进行缩放。以下是两种可行方案：

方案一：用ConstrainedBox限制Text的最大尺寸 #

给Text套上ConstrainedBox，明确设置最大宽高为父容器的尺寸，让Text在这个范围内先换行，再由FittedBox整体缩放。

修改后的关键代码片段：

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
      border: Border.all(width: 2.0, color: Colors.black), color: Colors.lightGreen),
  child: FittedBox(
    fit: BoxFit.scaleDown,
    child: ConstrainedBox(
      constraints: const BoxConstraints(maxWidth: 100, maxHeight: 100),
      child: const Text(
        'Really Really Really Over Verbose Text',
        softWrap: true,
        textAlign: TextAlign.center,
        maxLines: 4,
      ),
    ),
  ),
),

方案二：使用LayoutBuilder动态获取父容器约束 #

通过LayoutBuilder获取父容器的实际约束，将其传递给Text，确保Text在父容器的尺寸内先完成换行逻辑：

修改后的关键代码片段：

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
      border: Border.all(width: 2.0, color: Colors.black), color: Colors.lightGreen),
  child: LayoutBuilder(
    builder: (context, constraints) {
      return FittedBox(
        fit: BoxFit.scaleDown,
        child: ConstrainedBox(
          constraints: constraints,
          child: const Text(
            'Really Really Really Over Verbose Text',
            softWrap: true,
            textAlign: TextAlign.center,
            maxLines: 4,
          ),
        ),
      );
    },
  ),
),

两种方案都能实现“先换行、再缩放”的效果：文本会先在容器尺寸内自动换行，当换行后仍超出容器时，再通过FittedBox缩小字号适配，完美兼顾softWrap和FittedBox的需求。

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