Question

我想做一个简单的屏幕，在一个列中显示多个TextField，上面有一些内容，下面有一个按钮。第一次尝试时，没有SingleChildScrollView，我遇到了“ renderflex溢出”错误，可以通过将TextField放在SingeChildScrollView中来解决。现在，我有一个问题，当我选择任何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);
              },
            ),
          ]),
        )));

}

Answer 1

我修复了它。实施导航时，我无意中将支架放置在另一个支架的主体内，所以结构如下：

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

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

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

1 个答案: