为什么TypeAheadFormField的ListTile在BottomSheet中无法正常渲染

问题根源 #

TypeAheadFormField默认基于根节点Overlay渲染建议列表，而showModalBottomSheet的渲染层级高于普通Overlay，建议列表会被BottomSheet遮挡；同时代码中BottomSheet内部固定高度为400的Container默认开启溢出裁剪，也会把超出容器范围的建议列表剪掉，因此只会拉到数据但看不到渲染内容。

修复步骤 #

• 给TypeAheadFormField新增overlayContext和suggestionsBoxDecoration参数，指定用BottomSheet内部的context渲染建议列表，同时限制建议列表高度避免溢出：

  TypeAheadFormField<User?>(
    // 新增以下配置
    overlayContext: context, // 此处传入showModalBottomSheet的builder回调提供的context
    suggestionsBoxDecoration: const SuggestionsBoxDecoration(
      constraints: BoxConstraints(maxHeight: 200),
    ),
    // 原有配置保持不变
    hideOnEmpty: true,
    textFieldConfiguration: TextFieldConfiguration(
      controller: postController.captionController,
      decoration: const InputDecoration.collapsed(
          hintText: 'put users',
          hintStyle: TextStyle(
            fontSize: 15,
          )),
    ),
    // 剩下的原有回调、配置不需要改动
  )
  

• 修改高度为400的Container配置，关闭溢出裁剪：

  Container(
    height: 400,
    clipBehavior: Clip.none, // 新增该行，关闭溢出内容自动裁剪
    child: Form(
      key: postController.CaptionForm,
      // 原有Form内容保持不变
    ),
  )
  

• 如修改后仍有异常，给showModalBottomSheet新增useRootNavigator参数设为false，保证BottomSheet和建议列表使用同一导航栈的Overlay渲染：

  showModalBottomSheet(
    // 新增该行
    useRootNavigator: false,
    // 原有配置保持不变
    shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
    backgroundColor: Colors.white,
    context: context,
    isScrollControlled: true,
    // 剩下的原有builder配置不需要改动
  )
  

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