Flutter：如何无需固定定位实现两个可变容器重叠且不挤压内容

核心可行方案：Overlay + GlobalKey 精准定位悬浮层 #

Overlay是Flutter官方提供的原生悬浮层组件，专门用于在现有界面之上添加独立元素，完全不会影响原有布局的排列。结合GlobalKey获取输入框的真实渲染位置，可以让结果容器精准对齐到激活的TextField下方，完美适配不同屏幕尺寸、字体大小的差异。

实现步骤 #

• 为每个TextField分配GlobalKey，用于获取输入框的屏幕坐标与尺寸信息
• 维护状态变量控制结果容器的显隐，以及当前激活的输入框（确定悬浮层的对齐目标）
• 输入框内容变化或获取焦点时，通过GlobalKey拿到输入框的RenderBox，计算出悬浮层的定位坐标
• 用OverlayEntry构建自适应高度的结果容器，通过Positioned基于计算坐标定位，插入到Overlay中

示例代码 #

import 'package:flutter/material.dart';

class AddressSearchPage extends StatefulWidget {
  const AddressSearchPage({super.key});

  @override
  State<AddressSearchPage> createState() => _AddressSearchPageState();
}

class _AddressSearchPageState extends State<AddressSearchPage> {
  // 两个输入框的GlobalKey，用于获取实时渲染位置
  final _provinceFieldKey = GlobalKey<State<StatefulWidget>>();
  final _streetFieldKey = GlobalKey<State<StatefulWidget>>();
  
  OverlayEntry? _resultOverlay;
  GlobalKey? _activeFieldKey;
  final TextEditingController _provinceController = TextEditingController();
  final TextEditingController _streetController = TextEditingController();

  // 模拟API返回的地址结果列表
  List<String> _addressResults = [];

  @override
  void dispose() {
    _provinceController.dispose();
    _streetController.dispose();
    _removeOverlay();
    super.dispose();
  }

  // 移除悬浮结果层
  void _removeOverlay() {
    _resultOverlay?.remove();
    _resultOverlay = null;
    _activeFieldKey = null;
  }

  // 生成并显示悬浮结果面板
  void _showResultPanel(GlobalKey fieldKey) {
    _removeOverlay();
    _activeFieldKey = fieldKey;
    
    // 获取输入框的屏幕位置与尺寸
    final RenderBox renderBox = fieldKey.currentContext!.findRenderObject() as RenderBox;
    final screenOffset = renderBox.localToGlobal(Offset.zero);
    final fieldSize = renderBox.size;

    // 创建悬浮层条目
    _resultOverlay = OverlayEntry(
      builder: (context) => Positioned(
        left: screenOffset.dx,
        top: screenOffset.dy + fieldSize.height,
        width: fieldSize.width,
        // 限制最大高度为屏幕一半，避免内容溢出
        child: ConstrainedBox(
          constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height * 0.5,
          ),
          child: Material(
            elevation: 4,
            borderRadius: BorderRadius.circular(8),
            child: ListView.builder(
              padding: EdgeInsets.zero,
              shrinkWrap: true, // 自适应内容高度
              itemCount: _addressResults.length,
              itemBuilder: (context, index) => ListTile(
                title: Text(_addressResults[index]),
                onTap: () {
                  // 选中地址后填充到对应输入框
                  if (_activeFieldKey == _provinceFieldKey) {
                    _provinceController.text = _addressResults[index];
                  } else {
                    _streetController.text = _addressResults[index];
                  }
                  _removeOverlay();
                },
              ),
            ),
          ),
        ),
      ),
    );

    // 将悬浮层插入到界面Overlay中
    Overlay.of(context).insert(_resultOverlay!);
  }

  // 模拟地址搜索API请求
  void _triggerSearch(String keyword, GlobalKey fieldKey) {
    if (keyword.isEmpty) {
      _removeOverlay();
      return;
    }
    // 模拟网络延迟
    Future.delayed(const Duration(milliseconds: 300), () {
      if (!mounted) return;
      setState(() {
        _addressResults = List.generate(5, (index) => "$keyword 地址 ${index+1}");
      });
      _showResultPanel(fieldKey);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("地址搜索")),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // 省/市输入框
            TextField(
              key: _provinceFieldKey,
              controller: _provinceController,
              decoration: const InputDecoration(
                labelText: "省/市",
                border: OutlineInputBorder(),
              ),
              onChanged: (value) => _triggerSearch(value, _provinceFieldKey),
              onTap: () => _triggerSearch(_provinceController.text, _provinceFieldKey),
              onEditingComplete: _removeOverlay,
            ),
            const SizedBox(height: 16),
            // 街道/门牌号输入框
            TextField(
              key: _streetFieldKey,
              controller: _streetController,
              decoration: const InputDecoration(
                labelText: "街道/门牌号",
                border: OutlineInputBorder(),
              ),
              onChanged: (value) => _triggerSearch(value, _streetFieldKey),
              onTap: () => _triggerSearch(_streetController.text, _streetFieldKey),
              onEditingComplete: _removeOverlay,
            ),
            // 下方原有内容，完全不会被悬浮层挤压
            const Expanded(
              child: Center(
                child: Text("下方固定内容，不受搜索结果影响"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

方案优势 #

• 精准适配：通过GlobalKey获取输入框的真实渲染数据，无论屏幕尺寸、字体大小如何变化，结果容器都会精准对齐到输入框下方
• 无布局挤压：Overlay悬浮层独立于原有Column布局之外，完全不影响下方内容的位置与尺寸
• 动态尺寸适配：ListView使用shrinkWrap: true自动适配内容高度，同时通过ConstrainedBox限制最大高度，避免超出屏幕范围
• 交互流畅：选中地址后自动填充并隐藏悬浮层，输入完成后也可自动关闭，符合用户使用习惯

内容的提问来源于stack exchange，提问作者Otziii