键盘打开时，底部工作表与聚焦的 TextFormField 重叠

Question

我目前正在做我的第一个 Flutter 项目，但在查找问题时遇到了相当大的困难。 我几天来遇到的问题之一是，当我在一个特定视图中打开键盘时，我看不到聚焦的 TextFormField。

我最近发现 Flutter 实际上试图将聚焦的 TextFormField 放在我的键盘上方，但我的 BottomSheet 挡住了。见下图：

请参阅下面的 UI 代码：

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'),
            ),
          ),
        ));

有人知道如何解决这个问题吗？预先感谢！

Answer 1

您还可以在脚手架主体参数的开头使用ListView代替Column

Answer 2

为了避免底部工作表与聚焦的 TextField 或 TextFormField 重叠，请使用 SingleChildScrollView 并在 Scaffold 中设置 resizeToAvoidBottomInset: true。这可确保聚焦的 TextField 在键盘和底部工作表上方保持可见。

 Scaffold(
       resizeToAvoidBottomInset: true,
       body:SingleChildScrollView(
         child:Column(
           children:[
                      TextField(...),
                      TextField(...),
               ],
             ),
           ),
         );