ModalBottomSheet内嵌TextField首次打开性能问题求助

核心原因 #

iOS首次加载TextField关联的键盘组件、输入相关原生模块时存在初始化开销，导致首次打开模态框时资源抢占，出现卡顿无动画的情况，后续打开时相关资源已完成初始化，因此恢复正常。

实用解决方案 #

1. 提前预加载输入组件 #

在App启动阶段，提前初始化一个隐藏的TextField，让系统提前加载相关资源，避免首次打开模态框时的初始化延迟：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    Overlay.of(context)?.insert(OverlayEntry(
      builder: (context) => const Offstage(child: TextField()),
    ));
  });
}

2. 延迟渲染TextField #

让模态框先完成动画，再延迟加载TextField，避免布局和动画资源冲突：

showModalBottomSheet(
  context: context,
  builder: (context) {
    return FutureBuilder(
      future: Future.delayed(const Duration(milliseconds: 100)),
      builder: (context, snapshot) {
        return snapshot.connectionState == ConnectionState.done
            ? const TextField()
            : const SizedBox.shrink();
      },
    );
  },
);

3. 延迟唤起自动聚焦键盘 #

若需要自动唤起键盘，不要直接设置autofocus: true，而是延迟请求焦点，避开模态框动画阶段：

showModalBottomSheet(
  context: context,
  builder: (context) {
    final focusNode = FocusNode();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Future.delayed(const Duration(milliseconds: 300), () {
        focusNode.requestFocus();
      });
    });
    return TextField(focusNode: focusNode);
  },
);

4. 优化模态框布局结构 #

用SingleChildScrollView包裹模态框内容，配合键盘适配，避免TextField加载时触发额外布局计算：

showModalBottomSheet(
  context: context,
  builder: (context) {
    return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        child: const TextField(),
      ),
    );
  },
);

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