flutter - RenderFlex 溢出 - 颤动
问题描述
嗨,我是 Flutter 的新手,尝试编写我的第一个应用程序,我遇到了 Flutter (Dart) RenderFlex 溢出像素的问题。
在仍然使用 ListView.Builder 的同时,我尝试了多种不同的方法来实现这一点,但是它们都没有奏效。完成此任务的更好方法是什么?
我的代码在这里,提前感谢您的指导
class Register extends StatefulWidget {
final Function toggleView;
Register({ this.toggleView });
@override
_RegisterState createState() => _RegisterState();
}
class _RegisterState extends State<Register> {
final AuthService _auth = AuthService();
final _formKey = GlobalKey<FormState>();
String error = '';
bool loading = false;
// text field state
String email = '';
String password = '';
String confirmpwd ='';
@override
Widget build(BuildContext context) {
return loading ? Loading() : Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.blue[400],
elevation: 0.0,
title: Text('Sign up to Tenant App'),
actions: <Widget>[
FlatButton.icon(
icon: Icon(Icons.person),
label: Text('Sign In'),
onPressed: () => widget.toggleView(),
),
],
),
body: Container(
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 50.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
SizedBox(height: 20.0),
TextFormField(
decoration: textInputDecoration.copyWith(hintText: 'email'),
validator: (val) => val.isEmpty ? 'Enter an email' : null,
onChanged: (val) {
setState(() => email = val);
},
),
SizedBox(height: 20.0),
TextFormField(
decoration: textInputDecoration.copyWith(hintText: 'password'),
obscureText: true,
validator: (val) => val.length < 6 ? 'Enter a password 6+ chars long' : null,
onChanged: (val) {
setState(() => password = val);
},
),
SizedBox(height: 20.0),
TextFormField(
decoration: textInputDecoration.copyWith(hintText: 'password'),
obscureText: true,
validator: (val) => val != password ? 'Password \'t match' : null,
),
SizedBox(height: 20.0),
RaisedButton(
color: Colors.pink[400],
child: Text(
'Register',
style: TextStyle(color: Colors.white),
),
onPressed: () async {
if(_formKey.currentState.validate()){
setState(() => loading = true);
dynamic result = await _auth.registerWithEmailAndPassword(email, password);
if(result == null) {
setState(() {
loading = false;
error = 'Please supply a valid email';
});
}
}
}
),
SizedBox(height: 12.0),
Text(
error,
style: TextStyle(color: Colors.red, fontSize: 14.0),
)
],
),
),
),
);
}
}
解决方案
首先,该列正在接收一个无限的高度。这意味着它不知道它的主轴有多大,也不知道在哪里渲染它的孩子。
如果您不想为其父容器设置大小,可以使用 property mainAxisSize : MainAxisSize.min
。
此属性告诉您的列占用所需的最小空间,因此,您事先传递的约束并不重要。
其次,由于这是一个Form
,您需要将容器包装成SingleChildScrollView,以避免键盘隐藏您的TextFormField
我希望这能解决你的问题!
推荐阅读
- angular - Angular Material 和 CDK 更新 7 到 8 迁移失败
- c# - 如何知道我的元素是否已从网格布局组中取出?
- javascript - 使用 react-hook-form 的 Controller 组件不允许自定义 Antd Select 显示标签
- nativescript - 带有 nvm 的 nativescript cli 助手
- bash - runninv mvn clean verify 时出现几个错误
- d3.js - d3.js 单击并应用缩放和平移以将位于目标分区内的点分布到触发的细分
- xcode - Xcode > 符号断点 > 日志消息 > 打印对象属性的类而不是值
- java - 如何快速从指定位置的另一个数据数组中复制数据
- powershell - 搜索 AD 组成员
- python - 图像在 Django 项目中显示为损坏的图像