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

时间:2018-08-22 19:58:38

标签: 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,
            )
          ],
        ));
      }
    }

它看起来像这样:no keyboard

但是当我单击TextField并打开键盘时,我得到的是:enter image description here

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

谢谢
索伦

4 个答案:

答案 0 :(得分:2)

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

  

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

{
    "JPY=X": {
        "eventsData": {}, 
        "firstTradeDate": {
            "date": 846633600, 
            "formatted_date": "1996-10-30"
        }, 
        "currency": "JPY", 
        "prices": [
            {
                "high": 112.13700103759766, 
                "volume": 0, 
                "formatted_date": "2018-07-31", 
                "low": 111.69999694824219, 
                "adjclose": 111.80799865722656, 
                "date": 1533078000, 
                "close": 111.80799865722656, 
                "open": 111.79499816894531
            }, 
            {
                "high": 111.7239990234375, 
                "volume": 0, 
                "formatted_date": "2018-08-01", 
                "low": 111.33000183105469, 
                "adjclose": 111.62000274658203, 
                "date": 1533164400, 
                "close": 111.62000274658203, 
                "open": 111.63700103759766
            }, 
            {
                "high": 111.78299713134766, 
                "volume": 0, 
                "formatted_date": "2018-08-02", 
                "low": 111.0999984741211, 
                "adjclose": 111.69000244140625, 
                "date": 1533250800, 
                "close": 111.69000244140625, 
                "open": 111.6989974975586
            }, 
            {
                "high": 111.52200317382812, 
                "volume": 0, 
                "formatted_date": "2018-08-05", 
                "low": 111.16699981689453, 
                "adjclose": 111.23400115966797, 
                "date": 1533510000, 
                "close": 111.23400115966797, 
                "open": 111.21700286865234
            }, 
            {
                "high": 111.36399841308594, 
                "volume": 0, 
                "formatted_date": "2018-08-06", 
                "low": 110.9990005493164, 
                "adjclose": 111.33999633789062, 
                "date": 1533596400, 
                "close": 111.33999633789062, 
                "open": 111.3280029296875
            }, 
            {
                "high": 111.41999816894531, 
                "volume": 0, 
                "formatted_date": "2018-08-07", 
                "low": 110.83999633789062, 
                "adjclose": 111.34500122070312, 
                "date": 1533682800, 
                "close": 111.34500122070312, 
                "open": 111.34700012207031
            }, 
            {
                "high": 111.1780014038086, 
                "volume": 0, 
                "formatted_date": "2018-08-08", 
                "low": 110.70999908447266, 
                "adjclose": 110.89199829101562, 
                "date": 1533769200, 
                "close": 110.89199829101562, 
                "open": 110.90299987792969
            }, 
            {
                "high": 111.12799835205078, 
                "volume": 0, 
                "formatted_date": "2018-08-09", 
                "low": 110.51799774169922, 
                "adjclose": 111.09100341796875, 
                "date": 1533855600, 
                "close": 111.09100341796875, 
                "open": 111.06400299072266
            }
        ], 
        "timeZone": {
            "gmtOffset": 3600
        }, 
        "instrumentType": "CURRENCY"
    }, 
    "EURUSD=X": {
        "eventsData": {}, 
        "firstTradeDate": {
            "date": 1070236800, 
            "formatted_date": "2003-12-01"
        }, 
        "currency": "USD", 
        "prices": [
            {
                "high": 1.169864296913147, 
                "volume": 0, 
                "formatted_date": "2018-07-31", 
                "low": 1.166534423828125, 
                "adjclose": 1.168961763381958, 
                "date": 1533078000, 
                "close": 1.168961763381958, 
                "open": 1.168961763381958
            }, 
            {
                "high": 1.1669973134994507, 
                "volume": 0, 
                "formatted_date": "2018-08-01", 
                "low": 1.1604158878326416, 
                "adjclose": 1.1665889024734497, 
                "date": 1533164400, 
                "close": 1.1665889024734497, 
                "open": 1.1663848161697388
            }, 
            {
                "high": 1.1612001657485962, 
                "volume": 0, 
                "formatted_date": "2018-08-02", 
                "low": 1.1562163829803467, 
                "adjclose": 1.1586008071899414, 
                "date": 1533250800, 
                "close": 1.1586008071899414, 
                "open": 1.1585606336593628
            }, 
            {
                "high": 1.1570056676864624, 
                "volume": 0, 
                "formatted_date": "2018-08-05", 
                "low": 1.1530966758728027, 
                "adjclose": 1.1562297344207764, 
                "date": 1533510000, 
                "close": 1.1562297344207764, 
                "open": 1.156136155128479
            }, 
            {
                "high": 1.1609008312225342, 
                "volume": 0, 
                "formatted_date": "2018-08-06", 
                "low": 1.1552013158798218, 
                "adjclose": 1.1558021306991577, 
                "date": 1533596400, 
                "close": 1.1558021306991577, 
                "open": 1.155748724937439
            }, 
            {
                "high": 1.1629259586334229, 
                "volume": 0, 
                "formatted_date": "2018-08-07", 
                "low": 1.1574609279632568, 
                "adjclose": 1.1602946519851685, 
                "date": 1533682800, 
                "close": 1.1602946519851685, 
                "open": 1.1603351831436157
            }, 
            {
                "high": 1.1621150970458984, 
                "volume": 0, 
                "formatted_date": "2018-08-08", 
                "low": 1.156176209449768, 
                "adjclose": 1.1610760688781738, 
                "date": 1533769200, 
                "close": 1.1610760688781738, 
                "open": 1.1610087156295776
            }, 
            {
                "high": 1.1539349555969238, 
                "volume": 0, 
                "formatted_date": "2018-08-09", 
                "low": 1.1396141052246094, 
                "adjclose": 1.1523923873901367, 
                "date": 1533855600, 
                "close": 1.1523923873901367, 
                "open": 1.1528706550598145
            }
        ], 
        "timeZone": {
            "gmtOffset": 3600
        }, 
        "instrumentType": "CURRENCY"
    }, 
    "GBPUSD=X": {
        "eventsData": {}, 
        "firstTradeDate": {
            "date": 1070236800, 
            "formatted_date": "2003-12-01"
        }, 
        "currency": "USD", 
        "prices": [
            {
                "high": 1.314578652381897, 
                "volume": 0, 
                "formatted_date": "2018-07-31", 
                "low": 1.3097577095031738, 
                "adjclose": 1.3121638298034668, 
                "date": 1533078000, 
                "close": 1.3121638298034668, 
                "open": 1.3118367195129395
            }, 
            {
                "high": 1.3128528594970703, 
                "volume": 0, 
                "formatted_date": "2018-08-01", 
                "low": 1.3018969297409058, 
                "adjclose": 1.3126115798950195, 
                "date": 1533164400, 
                "close": 1.3126115798950195, 
                "open": 1.3125253915786743
            }, 
            {
                "high": 1.3043080568313599, 
                "volume": 0, 
                "formatted_date": "2018-08-02", 
                "low": 1.2976226806640625, 
                "adjclose": 1.3018121719360352, 
                "date": 1533250800, 
                "close": 1.3018121719360352, 
                "open": 1.301574945449829
            }, 
            {
                "high": 1.3007283210754395, 
                "volume": 0, 
                "formatted_date": "2018-08-05", 
                "low": 1.292073130607605, 
                "adjclose": 1.3003562688827515, 
                "date": 1533510000, 
                "close": 1.3003562688827515, 
                "open": 1.300153374671936
            }, 
            {
                "high": 1.2973533868789673, 
                "volume": 0, 
                "formatted_date": "2018-08-06", 
                "low": 1.2938284873962402, 
                "adjclose": 1.2944984436035156, 
                "date": 1533596400, 
                "close": 1.2944984436035156, 
                "open": 1.294247031211853
            }, 
            {
                "high": 1.2961763143539429, 
                "volume": 0, 
                "formatted_date": "2018-08-07", 
                "low": 1.2855453491210938, 
                "adjclose": 1.2946659326553345, 
                "date": 1533682800, 
                "close": 1.2946659326553345, 
                "open": 1.2946659326553345
            }, 
            {
                "high": 1.2911388874053955, 
                "volume": 0, 
                "formatted_date": "2018-08-08", 
                "low": 1.2843565940856934, 
                "adjclose": 1.2881617546081543, 
                "date": 1533769200, 
                "close": 1.2881617546081543, 
                "open": 1.2879958152770996
            }, 
            {
                "high": 1.283861756324768, 
                "volume": 0, 
                "formatted_date": "2018-08-09", 
                "low": 1.2726045846939087, 
                "adjclose": 1.2828407287597656, 
                "date": 1533855600, 
                "close": 1.2828407287597656, 
                "open": 1.2830052375793457
            }
        ], 
        "timeZone": {
            "gmtOffset": 3600
        }, 
        "instrumentType": "CURRENCY"
    }
}

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

答案 1 :(得分:1)

两个解决方案。

  1. resizeToAvoidBottomPadding: false添加到您的支架中

    Scaffold(
     resizeToAvoidBottomPadding: false,
    body: ...)
    
  2. Scaffold body放在可滚动视图(如SingleChildScrollView或ListView)内

    new Scaffold(
        body: SingleChildScrollView(child: //your existing body
    ...)
    

您可以找到相似问题并回答here

答案 2 :(得分:1)

如果仅使用SingleChildScrollView,内容将失去垂直对齐方式。您还可以将SingleChildScrollView包裹在中心小部件中。

child: Center( 
    child: SingleChildScrollView(
        child: Column(
            children: <Widget>...

答案 3 :(得分:0)

此错误的完整说明和两个可能的解决方案可以在https://medium.com/zipper-studios/the-keyboard-causes-the-bottom-overflowed-error-5da150a1c660上的“中型”文章中找到。最后一个对我有用。