flutter输入框底部下拉框

使用CompositedTransformFollower实现浮层交互

最新推荐文章于 2025-06-06 14:57:50 发布

原创

最新推荐文章于 2025-06-06 14:57:50 发布 · 980 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

这篇博客介绍了如何利用CompositedTransformFollower在Flutter中创建一个跟随输入框焦点变化的浮层提示组件。当输入框获得焦点时，浮层显示三条提示信息；失去焦点时，浮层自动关闭。示例代码展示了浮层的定位、大小计算及与输入框的联动效果。

final GlobalKey _noticeKey = GlobalKey();
  OverlayEntry _overlayEntry;
  final LayerLink _layerLink = LayerLink();
 @override
  void initState() {
   
   
  _linkFocusNode.addListener(() {
   
   
      if (_linkFocusNode.hasFocus ) {
   
   
        _showOverlay(context);
      } else {
   
   
        _dismissOverlay();
      }
    });
}
_showOverlay(BuildContext context) {
   
   
    final overlay = Overlay.of(context);
    _overlayEntry = OverlayEntry(builder: (ctx) {
   
   
      final renderBox =
      _noticeKey?.currentContext?.findRenderObject() as RenderBox;
      final size = renderBox.size;
      final offset = renderBox.localToGlobal(Offset.zero);

      //使用CompositedTransformFollower,可以不对Positioned 设置left,top
      return Positioned(
        // left: offset.dx,
        // top: offset.dy + size.height,
        width: size