Flutter中OverlayEntry状态变更后内容不更新的问题求助

问题核心是OverlayEntry不属于当前Widget树的一部分，调用setState更新inputText时，只会刷新CustomTextField的UI，不会触发已插入的OverlayEntry重新构建。你当前在获取焦点时一次性创建OverlayEntry并传入当时的inputText，后续输入变化时，这个静态的OverlayEntry内容自然不会更新。

解决方案 #

要实现实时更新，需要两个关键修改：

• 让OverlayEntry的builder直接引用当前State的inputText变量，而非创建时传入固定值
• 在inputText变化时，手动调用_overlayEntry?.markNeedsBuild()强制OverlayEntry重建

修改后的完整代码 #

class CustomTextField extends StatefulWidget {
  CustomTextField({Key? key}) : super(key: key);

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField>
    with TickerProviderStateMixin {
  TextEditingController controlador = TextEditingController();
  FocusNode nodeUno = FocusNode();
  OverlayEntry? _overlayEntry;
  final LayerLink _layerLink = LayerLink();
  String inputText = '';

  @override
  void initState() {
    super.initState();
    // 延迟绑定焦点监听，避免initState时context未初始化完成
    WidgetsBinding.instance.addPostFrameCallback((_) {
      nodeUno.addListener(_handleFocusChange);
    });
  }

  void _handleFocusChange() {
    final overlayState = Overlay.of(context);
    if (nodeUno.hasFocus) {
      _overlayEntry = _createOverlay();
      overlayState?.insert(_overlayEntry!);
    } else {
      _overlayEntry?.remove();
      _overlayEntry = null;
    }
  }

  OverlayEntry _createOverlay() {
    RenderBox renderBox = context.findRenderObject() as RenderBox;
    var size = renderBox.size;
    return OverlayEntry(
      builder: (context) => Positioned(
        width: size.width,
        child: CompositedTransformFollower(
          link: _layerLink,
          showWhenUnlinked: false,
          offset: const Offset(0.0, 5.0), // 仅需设置下方间距，Follower会自动跟随TextField位置
          child: Material(
            elevation: 5.0,
            child: Column(
              mainAxisSize: MainAxisSize.min, // 避免Column占满屏幕高度
              children: [
                ListTile(
                  title: inputText.isNotEmpty ? Text(inputText) : const Text('data'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 250,
      child: CompositedTransformTarget(
        link: _layerLink,
        child: TextField(
          focusNode: nodeUno,
          controller: controlador,
          onChanged: (value) {
            setState(() {
              inputText = value;
            });
            // 强制OverlayEntry重建，同步更新内容
            _overlayEntry?.markNeedsBuild();
          },
        ),
      ),
    );
  }

  @override
  void dispose() {
    nodeUno.removeListener(_handleFocusChange);
    nodeUno.dispose();
    controlador.dispose();
    _overlayEntry?.remove();
    super.dispose();
  }
}

额外优化点说明 #

• 将焦点监听逻辑移至addPostFrameCallback，避免initState阶段Overlay.of(context)返回null
• 给Column添加mainAxisSize: MainAxisSize.min，防止Overlay区域不必要地占满屏幕高度
• 调整CompositedTransformFollower的offset参数，利用组件自身的跟随特性简化位置计算
• 在dispose方法中清理监听和OverlayEntry，避免内存泄漏

内容的提问来源于stack exchange，提问作者juan jose perez hernandez