“A RenderFlex overflowed by 373 pixels on the bottom”问题在Flutter中出现【非重复】。

huangapple go评论86阅读模式
英文:

"A RenderFlex overflowed by 373 pixels on the bottom" problem in flutter [not duplicate]

问题

我已经尝试解决这个问题有一段时间了。在stackoverflow上有类似的问题,但我找不到与我的问题相关的问题。我创建布局的方式有点复杂,因为我进行了太多的嵌套。这可能是一个简单的问题,但由于我是Flutter的新手,我无法解决它。

下面是一张图片,你可以看到我面临的问题。

“A RenderFlex overflowed by 373 pixels on the bottom”问题在Flutter中出现【非重复】。

import 'package:flutter/material.dart';
import 'package:com.example.simple_app/common_widgets/appbar.dart';

class AddPersonPage extends StatefulWidget {
  AddPersonPage({Key key}) : super(key: key);

  @override
  _AddPersonPageState createState() => _AddPersonPageState();
}

class _AddPersonPageState extends State<AddPersonPage> {
  int person_id;
  String name, nickname, email, phone, home_address, contact_type;
  DateTime created, updated;

  final formKey = new GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appbar(context, 'Add new person', 'otherData'),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: formKey,
          child: Column(
            children: <Widget>[
              Text('Add new person/organisation', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: InputDecoration(
                  labelText: 'Name (Required)',
                ),
                validator: (val) {
                  return null;
                },
                onSaved: (val) => this.name = val,
              ),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: InputDecoration(
                  labelText: 'Nickname',
                ),
                validator: (val) {
                  return null;
                },
                onSaved: (val) => this.nickname = val,
              ),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: InputDecoration(
                  labelText: 'Physical/Home Address (Required)',
                ),
                validator: (val) {
                  return null;
                },
                onSaved: (val) => this.home_address = val,
              ),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: InputDecoration(
                  labelText: 'Email',
                ),
                validator: (val) {
                  if (val.isEmpty) return null;
                  if (EmailValidator.validate(val) == false) {
                    return 'Please enter a valid email address';
                  }
                  return null;
                },
                onSaved: (val) => this.email = val,
              ),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: InputDecoration(
                  labelText: 'Phone number',
                ),
                validator: (val) {
                  if (val.isEmpty) return null;
                  if (!validPhoneNumber.hasMatch(val)) {
                    return 'Please enter a valid phone number';
                  }
                  return null;
                },
                onSaved: (val) => this.phone = val,
              ),
              TextFormField(
                keyboardType: TextInputType.multiline,
                maxLines: 60,
                decoration: InputDecoration(
                  labelText: 'Phone number',
                ),
                validator: (val) {
                  return null;
                },
                onSaved: (val) => this.phone = val,
              ),
              Container(
                margin: const EdgeInsets.only(top: 10.0),
                child: RaisedButton(
                  color: Color(0xff0091EA),
                  splashColor: Colors.green,
                  onPressed: submitPerson,
                  child: Text('Add Person',
                      style: TextStyle(
                        color: Colors.white,
                      )),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void submitPerson() {
    if (this.formKey.currentState.validate()) {
      formKey.currentState.save();
    } else {
      return null;
    }
    Navigator.pop(context);
  }
}

以爱心发布,谢谢。

英文:

I have been trying to fix this problem for sometime now. There are similar issues here on stackoverflow but I can't find the one that relates to my problem. The way I have created the layout is kind of complicated since I'm doing too much nesting. This may be a simple problem but since I'm new to flutter I'm failing to figure this out.

Below is a picture so you can have a picture of the issue I'm facing.

“A RenderFlex overflowed by 373 pixels on the bottom”问题在Flutter中出现【非重复】。

import &#39;package:flutter/material.dart&#39;;
import &#39;package:com.example.simple_app/common_widgets/appbar.dart&#39;;

class AddPersonPage extends StatefulWidget {
  AddPersonPage({Key key}) : super(key: key);

  @override
  _AddPersonPageState createState() =&gt; _AddPersonPageState();
}

class _AddPersonPageState extends State&lt;AddPersonPage&gt; {
  int person_id;
  String name, nickname, email, phone, home_address, contact_type;
  DateTime created, updated;

  // final scaffoldKey = new GlobalKey&lt;ScaffoldState&gt;();
  final formKey = new GlobalKey&lt;FormState&gt;();

  // get submitPerson =&gt; null;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appbar(context, &#39;Add new person&#39;, &#39;otherData&#39;),
      body: new Padding(
        padding: const EdgeInsets.all(16.0),
        child: new Form(
          key: formKey,
          child: new Column(
            children: &lt;Widget&gt;[
              Text(&#39;Add new person/organisation&#39;, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(
                  labelText: &#39;Name (Required)&#39;,
                ),
                validator: (val) {
                  return null;
                },
                onSaved: (val) =&gt; this.name = val,
              ),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(
                  labelText: &#39;Nickname&#39;,
                ),
                validator: (val) {
                  return null;
                },
                onSaved: (val) =&gt; this.nickname = val,
              ),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(
                  labelText: &#39;Physical/Home Address (Required)&#39;,
                ),
                validator: (val) {
   
                  return null;
                },
                onSaved: (val) =&gt; this.home_address = val,
              ),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(
                  labelText: &#39;Email&#39;,
                ),
                validator: (val) {
                  if (val.isEmpty) return null;
                  if (EmailValidator.validate(val) == false) {
                    return &#39;Please enter a valid email address&#39;;
                  }
                  return null;
                },
                onSaved: (val) =&gt; this.email = val,
              ),
              TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(
                  labelText: &#39;Phone number&#39;,
                ),
                validator: (val) {
                  if (val.isEmpty) return null;
                  if (!validPhoneNumber.hasMatch(val)) {
                    return &#39;Please enter a valid phone number&#39;;
                  }
                  return null;
                },
                onSaved: (val) =&gt; this.phone = val,
              ),
              TextFormField(
                keyboardType: TextInputType.multiline,
                maxLines: 60,
                decoration: new InputDecoration(
                  labelText: &#39;Phone number&#39;,
                ),
                validator: (val) {
                  return null;
                },
                onSaved: (val) =&gt; this.phone = val,
              ),
              new Container(
                margin: const EdgeInsets.only(top: 10.0),
                child: new RaisedButton(
                  color: Color(0xff0091EA),
                  splashColor: Colors.green,
                  onPressed: submitPerson,
                  child: Text(&#39;Add Person&#39;,
                      style: TextStyle(
                        color: Colors.white,
                      )),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void submitPerson() {
    if (this.formKey.currentState.validate()) {
      formKey.currentState.save();
    } else {
      return null;
    }
        Navigator.pop(context);
  }
}

Posted with love, Thank you.

答案1

得分: 1

为了避免这个溢出问题,您可以将Scaffold的所有内容包装在SingleChildScrollView小部件中。

return Scaffold(
  appBar: appbar(context, '添加新人', 'otherData'),
  body: SingleChildScrollView(
    child: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Form(
        // 您的表单布局。
      ),
    ),
  ),
);
英文:

To avoid this overflow problem you can just wrap all your Scaffold body in a SingleChildScrollView widget.

return Scaffold(
appBar: appbar(context, &#39;Add new person&#39;, &#39;otherData&#39;),
body: SingleChildScrollView(
child: new Padding(
padding: const EdgeInsets.all(16.0),
child: new Form(
// your form layout.
),
),
),
); 

huangapple
  • 本文由 发表于 2020年1月6日 21:48:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/59613282.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定