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

Question

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

当我点击文本字段时，键盘会打开并覆盖它。我添加了一个带有“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,
                        ),
                      ]
                    )
                  ],
                ),
              ),
            ),
        ),
    ```

Answer 1

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

包裹 Container

Answer 2

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

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

Flutter Tablet app keyboard covering text input

android

mobile-application

soft-keyboard

ios

flutter