Flutter中如何让Text组件垂直缩放适配Expanded组件？

问题分析 #

你当前的代码里，Align组件会让其子组件尽可能占据最小空间，导致FittedBox无法获取Expanded提供的完整垂直约束，因此Text只能水平缩放，没法利用垂直空间。另外多余的ConstrainedBox也没起到预期作用。

解决方案 #

移除Align和ConstrainedBox，让FittedBox直接作为Container的子组件，这样FittedBox就能继承Expanded传递的完整宽高约束。同时确保Text开启自动换行，让FittedBox可以同时在水平和垂直方向缩放文本，适配可用空间。

修改后的代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Scale Example'),
        ),
        body: Column(
          children: [
            WidgetA(),
            Expanded(
              child: Container(
                color: Colors.blue,
                child: FittedBox(
                  fit: BoxFit.contain,
                  alignment: Alignment.center,
                  child: Text(
                    "samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample ",
                    style: TextStyle(color: Colors.white),
                    textAlign: TextAlign.center,
                    softWrap: true,
                  ),
                ),
              ),
            ),
            WidgetA(),
          ],
        ),
      ),
    );
  }
}

class WidgetA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      color: Colors.red,
      child: Center(child: Text('Widget A', style: TextStyle(color: Colors.white))),
    );
  }
}

关键调整说明 #

1. 移除Align和ConstrainedBox：让FittedBox直接接收Container的完整宽高约束，确保它能基于整个可用空间计算缩放比例。
2. 设置BoxFit.contain：让Text按比例缩放，同时保证文本完全显示在可用空间内，不会超出边界。如果需要文本填满整个空间（允许裁剪边缘），可以改用BoxFit.cover。
3. 开启softWrap: true：确保Text在达到宽度限制时自动换行，生成的文本块能利用垂直空间，让FittedBox可以同时在垂直方向缩放。

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