如果键盘覆盖文本字段，则颤动滚动列表视图答案

【问题标题】：Flutter scroll List view if Keyboard is covering Textfield如果键盘覆盖文本字段，则颤动滚动列表视图
【发布时间】：2021-07-06 02:23:05
【问题描述】：

这是我的页面目前的样子：

问题是，如果我单击下方的TextFields 之一，我会收到错误消息，因为Keyboard 正在覆盖它...

我的目标是修复headerLabel（“Neuer Kontakt”）和bottomButton（“Speichern”）。中间的TextFields 应该在一个可滚动的列表中。如果用户点击textField，列表会滚动，因此textField 位于keyboard 的正上方（仅适用于键盘覆盖文本字段的位置）。我怎样才能做到这一点？或者 Flutter 处理这种设计的方式是什么？我在这方面找不到任何东西。

这是我尝试过的，但是当键盘出现时它什么也没做：

return Scaffold(
  body: GestureDetector(
    onTap: () {
      FocusScope.of(context).unfocus();
    },
    child: SafeArea(
      child: Padding(
        padding: EdgeInsets.symmetric(
          horizontal: scaleWidth(17),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: scaleWidth(15),
            ),
            PageHeaderBackButton(
              context: context,
            ),
            Text(
              locales.translate('createEmergencyContactHeadline'),
              style: AppTextStyles.h1,
            ),
            SizedBox(
              height: scaleWidth(30),
            ),
            SingleChildScrollView(
              child: Column(
                children: [
                  TextFieldWithHeader(
                      headerLabel: 'Name des Kontakts',
                      placeHolderText: 'z.B. Elfriede, Ehefrau'),
                  SizedBox(
                    height: scaleWidth(30),
                  ),
                  TextFieldWithHeader(
                      headerLabel: 'Telefonnummer',
                      placeHolderText: 'Telefonnummer hinzufügen'),
                  SizedBox(
                    height: scaleWidth(30),
                  ),
                  TextFieldWithHeader(
                      headerLabel: 'Telefonnummer1',
                      placeHolderText: 'Telefonnummer hinzufügen'),
                  SizedBox(
                    height: scaleWidth(30),
                  ),
                  TextFieldWithHeader(
                      headerLabel: 'Telefonnummer2',
                      placeHolderText: 'Telefonnummer hinzufügen'),
                ],
              ),
            ),
            Spacer(),
            BottomActionButton(
              nextButtonTappedCallback: () => {
                Navigator.pop(context),
              },
              title: 'Speichern',
              shouldShowArrowIcon: false,
            ),
            SizedBox(
              height: scaleWidth(17),
            ),
          ],
        ),
      ),
    ),
  ),
);

【问题讨论】：

你可以在这里添加更多代码
您是否尝试过将SingleChildScrollView 包装在Expanded 小部件中？另外，移除垫片。
@MdOmorFaruqe 你到底需要什么？
@rickimaru spacer 就在那里，所以BottomActionButton 在底部，我用扩展测试它
功能码详情

标签： flutter listview dart keyboard

【解决方案1】：

使用下面的代码

return Scaffold(
  body:SingleChildScrollView(
    child: GestureDetector(
    onTap: () {
      FocusScope.of(context).unfocus();
    },
    child: SafeArea(
      child: Padding(
        padding: EdgeInsets.symmetric(
          horizontal: scaleWidth(17),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: scaleWidth(15),
            ),
            PageHeaderBackButton(
              context: context,
            ),
            Text(
              locales.translate('createEmergencyContactHeadline'),
              style: AppTextStyles.h1,
            ),
            SizedBox(
              height: scaleWidth(30),
            ),
            SingleChildScrollView(
              child: Column(
                children: [
                  TextFieldWithHeader(
                      headerLabel: 'Name des Kontakts',
                      placeHolderText: 'z.B. Elfriede, Ehefrau'),
                  SizedBox(
                    height: scaleWidth(30),
                  ),
                  TextFieldWithHeader(
                      headerLabel: 'Telefonnummer',
                      placeHolderText: 'Telefonnummer hinzufügen'),
                  SizedBox(
                    height: scaleWidth(30),
                  ),
                  TextFieldWithHeader(
                      headerLabel: 'Telefonnummer1',
                      placeHolderText: 'Telefonnummer hinzufügen'),
                  SizedBox(
                    height: scaleWidth(30),
                  ),
                  TextFieldWithHeader(
                      headerLabel: 'Telefonnummer2',
                      placeHolderText: 'Telefonnummer hinzufügen'),
                ],
              ),
            ),
            Spacer(),
            BottomActionButton(
              nextButtonTappedCallback: () => {
                Navigator.pop(context),
              },
              title: 'Speichern',
              shouldShowArrowIcon: false,
            ),
            SizedBox(
              height: scaleWidth(17),
            ),
          ],
        ),
      ),
    ),
  ),)
);

【讨论】：