Flutter中PreferredSize是什么？官方文档困惑与测试问题解析

1. PreferredSize到底是什么？ #

它本质是一个尺寸声明工具，本身不直接约束子组件的大小，只是向父组件“报备”自己期望的尺寸。官方文档那句描述翻译过来就是：它只负责告知父组件自己的偏好尺寸，至于父组件会不会采纳这个尺寸，完全取决于父组件的布局逻辑。

2. 为什么你的测试代码里Container铺满屏幕？ #

你把PreferredSize放在Center组件里，但Center根本不会读取PreferredSize的preferredSize属性——只有特定的父组件（比如Scaffold的appBar参数接收的组件）才会主动读取这个偏好尺寸来调整布局。

你的代码里，Container只设置了width:300，没有设置高度，而Scaffold的body默认充满整个屏幕，Center的子组件在没有明确高度约束时，会尽可能占据可用空间，所以Container就铺满了屏幕。此时PreferredSize的尺寸声明相当于“无效报备”，因为父组件Center不处理这个信息。

3. PreferredSize的正确使用场景 #

它最常用的场景是自定义AppBar：因为Scaffold的appBar要求子组件必须实现PreferredSizeWidget接口（AppBar本身就实现了这个接口），当你需要自定义非标准高度的AppBar时，就可以用PreferredSize包裹自定义组件，向Scaffold声明它的高度，Scaffold会根据这个高度预留顶部空间，避免页面内容被遮挡。

比如自定义高100的AppBar：

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(
      home: Scaffold(
        // Scaffold会读取PreferredSize的preferredSize来预留顶部空间
        appBar: PreferredSize(
          preferredSize: const Size.fromHeight(100.0),
          child: Container(
            width: double.infinity,
            height: 100, // 建议明确设置子组件高度，与preferredSize对应
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text("自定义AppBar"),
          ),
        ),
        body: const Center(child: Text("页面内容")),
      ),
    );
  }
}

总结 #

• PreferredSize是给父组件看的尺寸声明，不是用来直接约束子组件的
• 只有当父组件会主动读取这个声明时（比如Scaffold的appBar），它才会生效
• 子组件的大小还是由自身的布局属性和父组件的约束决定，PreferredSize不直接控制子组件尺寸

内容的提问来源于stack exchange，提问作者shingo.nakanishi