当显示键盘时,一切都推上去,我得到一个错误

Nei*_*ard 0 flutter flutter-layout

我有以下代码:



    class _MyHomePageState extends State {
      @override
      Widget build(BuildContext context) {
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
        return new Scaffold(
            body: new Column(
          children: [
            new Container(
              color: JBTheme.colorGreenBrand,
              height: 130.0,
              alignment: Alignment.bottomLeft,
              child: new Center(
                child: new Align(
                  alignment: Alignment.bottomCenter,
                  child: new Container(
                    color: JBTheme.colorOrange,
                    constraints: new BoxConstraints(maxWidth: 270.0),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        new Column(
                          mainAxisSize: MainAxisSize.min,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            new Image.asset("flags/flag_dk.png"),
                            new Container(
                              margin: const EdgeInsets.only(top: 4.0, bottom: 4.0),
                              child: new Text("Danmark"),
                            ),
                            new Text("DKK")
                          ],
                        ),
                        new Expanded(child: new Image.asset("images/arrow.png")),
                        new Column(
                          mainAxisSize: MainAxisSize.min,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            new Image.asset("flags/flag_us.png"),
                            new Container(
                              margin: const EdgeInsets.only(top: 4.0, bottom: 4.0),
                              child: new Text("USA"),
                            ),
                            new Text("USD")
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
            new Expanded(
                child: new Container(
              color: JBTheme.colorGreyMedium,
              child: new Column(
                children: [
                  new Expanded(child: new Container()),
                  new Padding(
                      padding: const EdgeInsets.only(bottom: 8.0),
                    child: new Card(
                      elevation: -8.0,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15.0),
                      ),
                      child: new Container(
                          width: 200.0,
                          height: 30.0,
                          color: JBTheme.colorWhite,
                          child: new Stack(
                            children: [
                              new TextField(
                                  textAlign: TextAlign.center
                              )
                            ],
                          )
                      ),
                    )
                  )
                ],
              ),
            )),
            new Container(
              height: 260.0,
              color: JBTheme.colorGreenMint,
            )
          ],
        ));
      }
    }

Run Code Online (Sandbox Code Playgroud)

它看起来像这样: 没有键盘

但是,当我单击TextField并打开键盘时,得到以下信息: 在此处输入图片说明

我没想到我的所有布局都将整个键盘高度向上移动,我希望它只向上移动足够多,以使焦点突出的TextField可见(并且不产生错误)。我该如何解决,为什么会发生?

谢谢
索伦

Din*_*ian 21

这个问题有两种解决方案。

  1. 添加resizeToAvoidBottomPadding: false到您的脚手架

    Scaffold(
     resizeToAvoidBottomPadding: false,
    body: ...)
    
    Run Code Online (Sandbox Code Playgroud)
  2. 把你Scaffold body放在一个 scrollableView 里面(比如 SingleChildScrollView 或 ListView)

    new Scaffold(
        body: SingleChildScrollView(child: //your existing body
    ...)
    
    Run Code Online (Sandbox Code Playgroud)

你可以在这里找到类似的问题并回答


FRE*_*CIA 5

这是Flutters的方法,向我们展示了使用键盘时用户视线将隐藏多少像素的内容。尝试将resizeToAvoidBottomPadding设置为false ...来自文档:

主体(和其他浮动小部件)是否应该调整自身大小以避免窗口的底部填充。

 Scaffold(
    resizeToAvoidBottomPadding: false,
Run Code Online (Sandbox Code Playgroud)

这样可以避免调整大小,因此至少可以避免显示dev警告。但是请记住,用户不会看到一些内容,这也是开发人员的警告。

于17/10/2019更新

resizeToAvoidBottomPadding现在已弃用。

使用resizeToAvoidBottomInset指定在出现键盘时是否应调整主体大小。

Scaffold(
    resizeToAvoidBottomInset: false,
Run Code Online (Sandbox Code Playgroud)