Flutter - SingleChildScrollView 在键盘弹出时放置在屏幕顶部

Posted 2023-02-23

【中文标题】Flutter - SingleChildScrollView 在键盘弹出时放置在屏幕顶部

【英文标题】：Flutter - SingleChildScrollView placed at the top of the screen when keyboard pops up

【发布时间】：2019-03-28 04:21:02

【问题描述】：

我想制作一个简单的屏幕，在一个列中显示多个文本字段，上面有一些内容，下面有一个按钮。在我的第一次尝试中，没有 SingleChildScrollView，我得到一个“renderflex 溢出”错误，可以通过将 TextField 放在 SingleChildScrollView 中来解决。 现在我有一个问题，当我选择任何 TextField 并且键盘弹出时，SingleChildScrollView 在我的屏幕上放置得太高了。我希望它基本上保持原样，因为 SingleChildScrollView 下方的键盘有足够的（黄色）空间。 This Gif shows how my app behaves.

This Gif shows the behavior that I would expect. 我尝试将FlatApp-Flutter example 中的代码应用到我的应用程序中，但找不到真正解决我问题的部分。 有谁知道我如何控制键盘向上推动 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);
              ,
            ),
          ]),
        )));

【问题讨论】：

我无法重现这一点。您可以尝试使用 listView 并查看滚动是否更顺畅？

我假设你没有对_scrollController做任何事情

你嵌套脚手架吗？

我确实是在嵌套脚手架，Günter Zöchbauer。移除一个脚手架为我修复了它。谢谢。

【参考方案1】：

我修好了。在实现导航时，我无意中将我的 Scaffold 放在了另一个 Scaffold 的主体内，所以我的结构是这样的：

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

只返回 SingleChildScrollView 而没有第二个 Scaffold 环绕它并使用它作为主体解决了我的问题。

【讨论】：

您好，非常感谢您的解决方案。