Flutter中BottomSheet弹出软键盘时UI卡顿，如何解决？

针对你遇到的问题，试试下面这几个实用方案：

1. 延迟输入框自动聚焦 #

不要在BottomSheet初始化时立刻触发聚焦，给BottomSheet的渲染动画留足缓冲时间：

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

  @override
  State<TaskBottomSheet> createState() => _TaskBottomSheetState();
}

class _TaskBottomSheetState extends State<TaskBottomSheet> {
  final TextEditingController _controller = TextEditingController();
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    // 延迟100ms再触发聚焦，避免和BottomSheet的弹出动画冲突
    Future.delayed(const Duration(milliseconds: 100), () {
      if (mounted) {
        _focusNode.requestFocus();
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewInsets.bottom,
      ),
      child: TextField(
        controller: _controller,
        focusNode: _focusNode,
        decoration: const InputDecoration(hintText: "输入内容"),
      ),
    );
  }
}

2. 优化BottomSheet的布局结构 #

因为你设置了isScrollControlled: true，用SingleChildScrollView包裹内容，同时通过padding适配键盘高度，避免布局调整时的卡顿：

floatingActionButton: FloatingActionButton(
  onPressed: () async {
    showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) => SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: const TaskBottomSheet(),
        ),
      ),
    );
  },
),

这里的padding替代了Scaffold的resize逻辑，确保输入框不会被键盘遮挡。

3. 关闭BottomSheet默认动画（极端情况） #

如果前两个方法无效，可以尝试关闭BottomSheet的弹出动画，减少动画叠加带来的性能压力：

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  transitionAnimationController: AnimationController(
    duration: Duration.zero,
    vsync: Navigator.of(context),
  ),
  builder: (context) => const TaskBottomSheet(),
);

注意这个方案会丢失BottomSheet的弹出动画，建议作为最后手段使用。

4. 排查潜在性能瓶颈 #

打开Flutter DevTools的性能面板，查看键盘弹出时是否存在不必要的重绘、耗时计算。比如检查TaskBottomSheet的build方法里有没有重复创建对象、执行复杂逻辑，或者使用了未缓存的Widget。

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