Flutter中窗口resize时如何更新OverlayEntry的尺寸（无需重新渲染Overlay）

我完全懂你现在的困扰——自己手写的自定义下拉Overlay，跟着TextField走本来好好的，但窗口一resize，TextField能自适应变宽变窄，可Overlay就卡在原来的尺寸不动了。用系统自带的AutoComplete吧，又没法给Overlay加padding，真的挺闹心的。我来给你几个靠谱的方案，不用重新渲染Overlay内容，就能让它的尺寸跟TextField同步更新：

方案一：用ValueNotifier+LayoutBuilder监听尺寸变化（推荐） #

这个方案的核心是实时监听TextField的尺寸变化，然后只更新Overlay的位置和宽度，完全不碰列表内容，避免不必要的重绘。

步骤1：添加尺寸监听的ValueNotifier #

在你的_MyHomePageState里定义一个ValueNotifier来保存TextField的实时尺寸：

final ValueNotifier<Size> _textFieldSize = ValueNotifier(const Size(0, 0));
final ScrollController _scrollController = ScrollController();

步骤2：用LayoutBuilder包裹TextField，实时更新尺寸 #

把原来的CompositedTransformTarget用LayoutBuilder包起来，每次TextField尺寸变化时，更新ValueNotifier的值：

CompositedTransformTarget(
  link: _layerLink,
  child: LayoutBuilder(
    builder: (context, constraints) {
      // 利用postFrameCallback确保获取到最新的渲染尺寸
      WidgetsBinding.instance.addPostFrameCallback((_) {
        final renderBox = context.findRenderObject() as RenderBox;
        _textFieldSize.value = renderBox.size;
      });
      return TextFormField(
        decoration: InputDecoration(
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.black.withOpacity(0.8),
            ),
          ),
          border: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.red),
          ),
        ),
        onTap: () {
          if (_overlayEntry.mounted) {
            _overlayEntry.remove();
          }
          Overlay.of(context).insert(_overlayEntry);
        },
        onChanged: (query) {},
      );
    },
  ),
),

步骤3：修改OverlayEntry，用ValueListenableBuilder更新尺寸 #

把原来的_createOverlay改成用ValueListenableBuilder监听尺寸变化，只更新Positioned的宽度，列表内容只创建一次：

// 先把列表做成成员变量，避免重复创建
final Widget _listWidget = Container(
  height: 5 * 40,
  child: Scrollbar(
    controller: _scrollController,
    thumbVisibility: true,
    child: ListView.builder(
      controller: _scrollController,
      padding: EdgeInsets.zero,
      itemCount: 20,
      itemBuilder: (context, index) => ListTile(
        title: Text('item $index'),
        onTap: () {
          _overlayEntry.remove();
        },
      ),
    ),
  ),
);

OverlayEntry _createOverlay() {
  return OverlayEntry(
    builder: (context) => ValueListenableBuilder<Size>(
      valueListenable: _textFieldSize,
      builder: (context, size, child) {
        // 获取TextField的全局偏移，解决外部有padding的问题
        final textFieldRenderBox = context.findRenderObject() as RenderBox;
        final textFieldOffset = textFieldRenderBox.localToGlobal(Offset.zero);
        
        return Positioned(
          left: textFieldOffset.dx,
          width: size.width,
          top: textFieldOffset.dy + size.height + 8, // 调整下拉框和TextField的间距
          child: CompositedTransformFollower(
            link: _layerLink,
            child: child, // 这里的child是预先创建好的_listWidget，不会重新渲染
          ),
        );
      },
      child: Material(color: Colors.red, child: _listWidget),
    ),
  );
}

这样一来，每次TextField尺寸变化，只会更新Positioned的参数，列表内容完全不会重绘，既流畅又准确，还能完美适配外部有padding的场景。

方案二：监听窗口resize，手动触发OverlayEntry重建 #

如果觉得方案一有点复杂，也可以用更直接的方式：监听窗口尺寸变化，手动标记OverlayEntry需要重建，让它的builder重新执行，获取最新的TextField尺寸。

步骤1：添加窗口resize监听 #

在initState和dispose里添加/移除监听：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _overlayEntry = _createOverlay();
  });
  // 监听窗口尺寸变化
  WidgetsBinding.instance.addListener(_onWindowResize);
}

@override
void dispose() {
  WidgetsBinding.instance.removeListener(_onWindowResize);
  _scrollController.dispose();
  super.dispose();
}

void _onWindowResize() {
  // 标记OverlayEntry需要重建，这样builder会重新执行，获取最新尺寸
  if (_overlayEntry.mounted) {
    _overlayEntry.markNeedsBuild();
  }
}

步骤2：修改OverlayEntry的builder，实时获取尺寸 #

让_createOverlay的builder每次执行时都获取最新的TextField尺寸：

OverlayEntry _createOverlay() {
  return OverlayEntry(
    builder: (context) {
      final textFieldRenderBox = context.findRenderObject() as RenderBox;
      final textFieldSize = textFieldRenderBox.size;
      final textFieldOffset = textFieldRenderBox.localToGlobal(Offset.zero);
      
      return Positioned(
        left: textFieldOffset.dx,
        width: textFieldSize.width,
        top: textFieldOffset.dy + textFieldSize.height + 8,
        child: CompositedTransformFollower(
          link: _layerLink,
          child: Material(color: Colors.red, child: _listWidget), // 同样用预先创建的列表
        ),
      );
    },
  );
}

这个方案更简单，但要注意必须把列表做成成员变量，不然每次builder执行都会重新创建列表，导致重绘。

为什么之前的didChangeMetrics有延迟？ #

你之前尝试的didChangeMetrics是在窗口变化完成后才会触发通知，而上面的两种方案：

• 方案一用LayoutBuilder，会在TextField的父组件尺寸变化时立刻回调，响应更及时；
• 方案二的addListener监听的是WidgetsBinding的窗口变化，比didChangeMetrics的通知时机更早，再加上markNeedsBuild能立刻触发Overlay的builder重建，所以不会有延迟。

备注：内容来源于stack exchange，提问作者Mahesh Jamdade