Flutter中键盘弹出时Bottom sheet遮挡聚焦TextFormField问题求助

问题场景 #

在第一个Flutter项目中，遇到以下问题：打开键盘时，原本应被移到键盘上方的聚焦TextFormField被页面底部的BottomSheet遮挡。

场景截图

• 点击输入框前的表单状态：
  
• 键盘弹出后，输入框被BottomSheet遮挡：
  

问题代码 #

return Scaffold(
        appBar: AppBar(
            title: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
              Text(
                'Capture moment',
              ),
              Text(
                'Tell me what happened.',
                style: TextStyle(fontWeight: FontWeight.w400, fontSize: 18),
              ),
            ])),
        body: CustomScrollView(slivers: [
          SliverFillRemaining(
              hasScrollBody: false,
              child: Column(
                children: [
                  Container(
                      margin: const EdgeInsets.all(24),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Give your moment a name',
                            textAlign: TextAlign.left,
                            style: TextStyle(
                                fontWeight: FontWeight.w400, fontSize: 12),
                          ),
                          SizedBox(height: 6),
                          SizedBox(
                              width: 340,
                              child: TextFormField(
                                onChanged: (value) => manager.setName(value),
                                initialValue: manager.name,
                                decoration: InputDecoration(
                                    contentPadding: EdgeInsets.symmetric(
                                        vertical: 10.0, horizontal: 10.0),
                                    hintText: 'F.e. meeting at work'),
                              )),
                          SizedBox(height: 12),
                          Text('Where did it happen?',
                              style: TextStyle(
                                  fontWeight: FontWeight.w400, fontSize: 12)),
                          SizedBox(height: 6),
                          SizedBox(
                              width: 340,
                              child: TextFormField(
                                onChanged: (value) =>
                                    manager.setLocation(value),
                                initialValue: manager.location,
                                decoration: InputDecoration(
                                  hintText: 'F.e. Eindhoven',
                                  contentPadding: EdgeInsets.symmetric(
                                      vertical: 10.0, horizontal: 10.0),
                                ),
                              )),
                          SizedBox(height: 12),
                          Text('Add an icon to your moment',
                              style: TextStyle(
                                  fontWeight: FontWeight.w400, fontSize: 12)),
                          SizedBox(height: 6),
                          SizedBox(
                              width: 340,
                              child: TextFormField(
                                decoration: InputDecoration(
                                  hintText: 'Search',
                                  contentPadding: EdgeInsets.symmetric(
                                      vertical: 10.0, horizontal: 10.0),
                                ),
                              )),
                          SizedBox(height: 12),
                          Text('When did this happen?',
                              style: TextStyle(
                                  fontWeight: FontWeight.w400, fontSize: 12)),
                          SizedBox(height: 6),
                          SizedBox(
                              width: 340,
                              child: Row(children: [
                                Text('Start'),
                                Spacer(),
                                DateTimeSelector(
                                  initialValue: manager.startDate,
                                  useTime: true,
                                  onChanged: (value) =>
                                      manager.setStartDate(value!),
                                )
                              ])),
                          SizedBox(height: 12),
                          SizedBox(
                              width: 340,
                              child: Row(children: [
                                Text('End'),
                                Spacer(),
                                DateTimeSelector(
                                  initialValue: manager.endDate,
                                  useTime: true,
                                  onChanged: (value) =>
                                      manager.setEndDate(value!),
                                )
                              ])),
                        ],
                      )),
                ],
              ))
        ]),
        bottomSheet: Container(
          margin: const EdgeInsets.all(24.0),
          child: SizedBox(
            width: 340,
            child: ElevatedButton(
              onPressed: () => {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: ((context) =>
                            const AddFeelingToMomentScreen()))),
              },
              child: const Text('Next'),
            ),
          ),
        ));

解决方案 #

方法一：将底部按钮整合到滚动视图中

Scaffold的bottomSheet是固定在页面底部的，不会随键盘上移。把按钮移到CustomScrollView的内容区域内，借助Spacer让它固定在页面底部，这样键盘弹出时整个滚动区域会上移，按钮也会跟着调整位置，不会遮挡输入框。

修改后的核心代码：

return Scaffold(
  appBar: AppBar(/* 原代码保持不变 */),
  body: CustomScrollView(slivers: [
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column(
        children: [
          // 原表单容器代码不变
          Container(margin: const EdgeInsets.all(24), child: Column(/* 表单内容 */)),
          // 添加Spacer将按钮推到页面底部
          const Spacer(),
          // 原BottomSheet中的按钮代码移到此处
          Container(
            margin: const EdgeInsets.all(24.0),
            child: SizedBox(
              width: 340,
              child: ElevatedButton(
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: ((context) => const AddFeelingToMomentScreen()))),
                },
                child: const Text('Next'),
              ),
            ),
          ),
        ],
      ),
    ),
  ]),
  // 移除原来的bottomSheet属性
);

方法二：动态调整内容区底部内边距

通过MediaQuery获取键盘高度，给滚动视图添加额外的底部padding，确保输入框不会被BottomSheet和键盘同时遮挡。

修改代码：

return Scaffold(
  appBar: AppBar(/* 原代码不变 */),
  // 用MediaQuery包装内容区，动态设置padding
  body: MediaQuery(
    data: MediaQuery.of(context).copyWith(
      // 88为BottomSheet的大致高度（按钮高度+上下margin），可根据实际情况调整
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom + 88),
    ),
    child: CustomScrollView(slivers: [/* 原代码不变 */]),
  ),
  bottomSheet: /* 原BottomSheet代码不变 */,
);

方法三：替换为SingleChildScrollView

如果页面结构简单，可将CustomScrollView替换为SingleChildScrollView，并设置固定的底部padding避开BottomSheet区域：

return Scaffold(
  appBar: AppBar(/* 原代码不变 */),
  body: SingleChildScrollView(
    // 88为BottomSheet的高度，根据实际调整
    padding: EdgeInsets.only(bottom: 88),
    child: Container(
      margin: const EdgeInsets.all(24),
      child: Column(/* 原表单内容 */),
    ),
  ),
  bottomSheet: /* 原BottomSheet代码不变 */,
);

优先推荐方法一，这种方式的布局逻辑更统一，符合用户对滚动页面的操作预期。

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