Flutter Tablet 应用键盘覆盖文本输入

编程问答 2022-05-03

问题描述

经典问题，但我发现虽然有很多适用于手机的出色解决方案，但出于某种原因，它们无法在平板电脑（模拟器或实际设备）上运行。

当我点击文本字段时，键盘会打开并覆盖它。我添加了一个带有“MediaQuery.of(context).viewInsets.bottom”的 SizedBox 作为高度，这样当键盘打开时我可以滚动到文本字段。但是我需要屏幕在键盘打开时自动滚动到文本字段。我试过把整个东西放在一个 nestedScrollView 中，并使用 globalKey.currentState.innerController 来制作动画。但它只能设置一定数量的动画，我需要它为特定的文本字段设置动画。

我看过一些插件，但它们要求您以非常具体的方式构建东西，而我正在处理一个无法围绕它构建的大型应用程序。

我在手机上没有遇到这个问题。手机会像它们应该的那样自动滚动。我正在使用相同的代码。这是我遇到问题的一个小部件的片段。

Container(
     constraints: BoxConstraints(minHeight: MediaQuery.of(context).size.height),padding: EdgeInsets.only(bottom: _containerPaddingBottom),decoration: Boxdecoration(
      image: decorationImage( 
        image: widget.image,fit: BoxFit.cover,),child: SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.only(top: _containerPaddingTop),constraints: BoxConstraints(minHeight: MediaQuery.of(context).size.height - _buttonHeight - _containerPaddingTop - _bottomPadding),child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
                    Column(
                      children: [
                        Center(
                          child: Container(
                            width: _titleWidth,margin: EdgeInsets.only(left: 19,right: 19,bottom: 21),child: Text(
                              widget.screenTitle,textAlign: TextAlign.center,style: Theme.of(context).textTheme.headline4,widget.mainContent,],Column(
                      children: [
                        widget.bottomContent,SizedBox(
                          height: MediaQuery.of(context).viewInsets.bottom,]
                    )
                  ],```

解决方法

您正在用一个固定高度的容器包裹 SingleScrollView！ 您可能想要做相反的事情：用 Container 包裹 SingleChildScrollView！

,

所以我发现了问题！我的应用程序屏幕的平板电脑版本没有 Scaffold。一旦我将屏幕包裹在 Scaffold 中，当键盘打开时，它会自动滚动以不隐藏文本字段。

androidandroidiosiosmobile-applicationsoft-keyboard