Flutter技术疑问：未指定父组件尺寸时FittedBox表现差异原因

代码示例对比 #

(A) 会在300*300范围内拉伸文本的代码 #

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Icons',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.blue,
        width: 300.0,
        height: 300.0,
        child: FittedBox(
          fit: BoxFit.fill,
          child: Text(
            'Some Example Text.',
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
        ),
      ),
    );
  }
}

(B) 不会拉伸文本的代码 #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: FittedBox(
        fit: BoxFit.fill,
        child: Text(
          'Some Example Text.',
          style: TextStyle(
            fontSize: 20.0,
          ),
        ),
      ),
    );
  }
}

核心原因：Flutter的约束传递逻辑 #

Flutter布局遵循**「约束向下传，尺寸向上返」**的规则，关键差异在于父组件给子组件的约束类型：

1. 代码(A)的逻辑：

   • 固定宽高的Container给子组件FittedBox传递的是严格约束（必须是300x300，不能大也不能小）。
   • FittedBox拿到这个约束后，先让内部的Text以自身原始尺寸（fontSize=20的文本大小）渲染，再将文本缩放至填满300x300的容器，所以文本被拉伸。

2. 代码(B)的逻辑：

   • Scaffold的body收到的是父组件传递的宽松约束（允许子组件选择不超过屏幕剩余空间的任意尺寸）。
   • FittedBox的特性是：当它收到宽松约束时，会优先匹配子组件的原始尺寸——先让Text以fontSize=20的大小渲染，然后FittedBox自身尺寸就等于这个文本的原始大小，自然不会触发拉伸（因为它根本没占满屏幕空间）。

如何让代码(B)实现拉伸效果？ #

要让FittedBox拉伸文本，必须给它传递严格约束，比如用Container包裹并设置宽高为double.infinity：

body: Container(
  width: double.infinity,
  height: double.infinity,
  child: FittedBox(
    fit: BoxFit.fill,
    child: Text('Some Example Text.', style: TextStyle(fontSize: 20.0)),
  ),
)

这样Container会把屏幕剩余空间的严格约束传递给FittedBox，它就会将文本拉伸至填满整个可用区域。

内容的提问来源于stack exchange，提问作者森口万太郎