键盘打开时 Flutter 中的溢出错误答案

【问题标题】：Overflow Error in Flutter when keyboard open键盘打开时 Flutter 中的溢出错误
【发布时间】：2019-08-14 04:56:21
【问题描述】：

我正在设计一个登录页面，当我点击任何文本表单字段时，它会溢出，它会打开 keyboard 并通过像这样的溢出警告，请参见附图。我还希望按钮的右侧应该有一个凸起的按钮图标。

Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        body: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                  image: new DecorationImage(
                      image: new AssetImage('assets/login_page_bg_1.jpg'),
                      fit: BoxFit.cover,
                      colorFilter: new ColorFilter.mode(
                          Colors.black.withOpacity(0.55), BlendMode.dstATop))),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: new EdgeInsets.only(top: 42.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Image.asset('assets/logo.png',
                            width: 250.0, height: 200.21),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    margin: new EdgeInsets.only(bottom: 40.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        //form filed goes here
                        Text('Login As User',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 35.0)),
                        TextFormField(
                            keyboardType: TextInputType.emailAddress,
                            decoration: InputDecoration(
                              hintText: 'you@example.com',
                              labelText: 'Email Address',
                            ),
                        new Container(
                          // width: MediaQuery.of(context).size.width,
                          child: RaisedButton.icon(
                            color: Color.fromARGB(251, 188, 74, 1),
                            label: Text('LOGIN'),
                            icon: Icon(Icons.send,
                                size: 10.0, color: Colors.black),
                            onPressed: () {
                              this.submit();
                            }, ),)],),),)],)],),),);

Intital state

Error/overflowed State

【问题讨论】：

标签： dart flutter flutter-layout

【解决方案1】：

将以下属性设置为false

Scaffold(
  resizeToAvoidBottomInset: false, 
  ... 
)

如果您遇到溢出错误问题，请使用SingleChildScrollView。

Scaffold(
  resizeToAvoidBottomInset: false, // set it to false
  body: SingleChildScrollView(child: YourBody()),
)

PS：如果你喜欢在键盘打开时滚动你的小部件，你可以看看this answer

【讨论】：

我必须为上面的第二个例子设置resizeToAvoidBottomInset: true——这样当键盘出现时SingleChildScrollView 就会滚动。而将值设置为 false 意味着键盘会覆盖 UI 并遮盖事物，并且滚动似乎不再起作用。

【解决方案2】：

发生这种情况是因为当键盘出现在屏幕上时，要绘制的画布的高度会降低。一种解决方案是将根容器包装在 SingleChildScrollView 中，如下所示：

Widget build(BuildContext context) {
return Scaffold(
      body: SingleChildScrollView(
          child: Stack(
            fit: StackFit.loose,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                    image: new DecorationImage(
                        image: new AssetImage('assets/login_page_bg_1.jpg'),
                        fit: BoxFit.cover,
                        colorFilter: new ColorFilter.mode(
                            Colors.black.withOpacity(0.55), BlendMode.dstATop)
                            )
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  SizedBox(height: 42,),
                  Expanded(
                    flex: 1,
                    child: Center(
                      child:
                        Image.asset('assets/logo.png',
                            width: 250.0, height: 200.21),
                    ),
                  ),
                  Expanded(
                    flex: 2,
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                        //form filed goes here
                        Text('Login As User',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 35.0)),
                    TextFormField(
                      keyboardType: TextInputType.emailAddress,
                      decoration: InputDecoration(
                        hintText: 'you@example.com',
                        labelText: 'Email Address',
                      )
                    ),
                      new Container(
                        // width: MediaQuery.of(context).size.width,
                        child: RaisedButton.icon(
                          color: Color.fromARGB(251, 188, 74, 1),
                          label: Text('LOGIN'),
                          icon: Icon(Icons.send,
                              size: 10.0, color: Colors.black),
                          onPressed: () {
                            //this.submit();
                          }, ),)],)),
                  SizedBox(height: 40,)
            ],)],),));

当内容的高度超过视口的可用高度时，它会使您的屏幕可滚动。

【讨论】：

它通过异常 I/flutter (2894): 渲染库 I/flutter (2894) 捕获的异常：在 performLayout() 期间引发了以下断言：
给容器一个固定的宽度和高度。
在所有容器上？因为通过给根容器提供宽度和高度会导致同样的问题
将根容器的宽度和高度设为MediaQuery.of(context).size.width 和MediaQuery.of(context).size.height
我编辑了我的答案...现在重构了代码，而不是仅仅查看它并猜测问题。你的代码效率太低了，但我尽量保持原样。

【解决方案3】：

一个更简单的解决方案（source）似乎只是将Scaffold 属性resizeToAvoidBottomPadding 设置为false。这对我很有效：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomPadding: false,
        appBar: AppBar(...),
        body: ...

【讨论】：

仅供参考：resizeToAvoidBottomPadding 被标记为已弃用，建议改用resizeToAvoidBottomInset。

【解决方案4】：

添加resizeToAvoidBottomPadding: false, 和resizeToAvoidBottomInset: false, 到您的 Scaffold 小部件。
用Container 包装您的代码，设置Container 的参数height: MediaQuery.of(context).size.height, 和width: MediaQuery.of(context).size.width,。然后用SingleChildScrollView 包裹你的Container。

【讨论】：

出于某种神秘的原因，这是唯一对我有用的解决方案。 Scaffold 小部件基本上忽略了resizeToAvoidBottomInset 选项。不知道为什么。谢谢大佬！

【解决方案5】：

设置resizeToAvoidBottomInset: true 和使用body: ListView() 也可以。这使您可以在打开键盘时滚动页面。

【讨论】：

【解决方案6】：

一个更简单的版本是使用 ListView 小部件包装有问题的容器。它使屏幕可滚动并且易于实现。您可以通过此小部件使用多个子级。

Scaffold(  
   body: ListView(
     children: <Widget> [
       Container(
       ),
       TextView(
       ),
       Column(
       ),
     ],
   ),
 )

【讨论】：