Flutter - 当键盘弹出时，SingleChildScrollView位于屏幕顶部

Question

Flutter - 当键盘弹出时，SingleChildScrollView位于屏幕顶部

inputscrollfluttertextfieldflutter-layout

3

我希望制作一个简单的屏幕，其中包含多个TextField，以列的形式显示，上方有一些内容，下方有一个按钮。在第一次尝试时，没有使用SingleChildScrollView，结果出现了“renderflex overflowed”错误，将TextField放置在SingleChildScrollView中可以解决该问题。现在我的问题是，当我选择任何TextField并弹出键盘时，SingleChildScrollView的位置太高了。我希望它基本保持在原地，因为在SingleChildScrollView下面有足够的（黄色）空间放置键盘。此Gif显示我的应用程序的行为。

此Gif显示我期望的行为。我尝试将FlatApp-Flutter示例中的代码应用到我的应用程序中，但无法找到实际解决我的问题的部分。有人知道如何控制键盘推动SingleChildScrollView的量或如何解决这个问题吗？非常感谢。

Scaffold(
    backgroundColor: Colors.yellow,
    body: new SingleChildScrollView(
        controller: _scrollController,
        child: new Container(
          margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
          color: Colors.orange,
          child: new Column(children: <Widget>[
            new Container(
              margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 20.0),
              height: 200.0,
              width: 200.0,
              color: Colors.grey,
              child: new Center(
                child: Text("Show some stuff"),
              ),
            ),
            new Container(
              color: Colors.blue,
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new TextField(
                    decoration: InputDecoration(labelText: "Label 1"),
                  ),
                  new TextField(
                    decoration: InputDecoration(labelText: "Label 2"),
                  ),
                ],
              ),
            ),
            new RaisedButton(
              child: const Text('Start'),
              color: Theme.of(context).accentColor,
              textColor: Colors.white,
              elevation: 4.0,
              splashColor: Colors.blueGrey,
              onPressed: () {
                // Perform some action
                //button1(context);
              },
            ),
          ]),
        )));

}

- Thomas

我无法重现这个问题。您能否尝试使用listView并查看是否可以获得更平滑的滚动效果？ - Dinesh Balasubramanian

我假设你没有对_scrollController进行任何操作。 - Dinesh Balasubramanian

1

你嵌套脚手架吗？ - Günter Zöchbauer

我确实嵌套了 Scaffold，Günter Zöchbauer。移除一个 Scaffold 对我有帮助。谢谢。 - Thomas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thomas · Accepted Answer

我已经解决了。在实现我的导航时，我无意中将Scaffold放置在另一个Scaffold的主体内部，因此我的结构就像这样:

Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: ScaffoldShownInMyQuestion(),
    )

仅返回SingleChildScrollView而不是用第二个Scaffold将其包裹，并将其作为主体使用，解决了我的问题。