底部在颤动中超载了 213 像素
Posted
技术标签:
【中文标题】底部在颤动中超载了 213 像素【英文标题】：Bottom overloaded by 213 pixels in flutter 【发布时间】：2019-01-17 08:18:13 【问题描述】：您好，我正在尝试创建登录屏幕。它对我来说很好。当我打开键盘时，它给了我一个错误Bottom overloaded by 213 pixels。
Widget LoginPage()
return new Scaffold(body: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.05), BlendMode.dstATop),
image: AssetImage('assets/images/mountains.jpg'),
fit: BoxFit.cover,
),
),
child: new Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(120.0),
child: Center(
child: Icon(
Icons.headset_mic,
color: Colors.redAccent,
size: 50.0,
),
),
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'samarthagarwal@live.com',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: new FlatButton(
child: new Text(
"Forgot Password?",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
textAlign: TextAlign.end,
),
onPressed: () => ,
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Colors.redAccent,
onPressed: () => ,
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"LOGIN",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
alignment: Alignment.center,
child: Row(
children: <Widget>[
new Expanded(
child: new Container(
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(border: Border.all(width: 0.25)),
),
),
Text(
"OR CONNECT WITH",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
new Expanded(
child: new Container(
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(border: Border.all(width: 0.25)),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
margin: EdgeInsets.only(right: 8.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Color(0Xff3B5998),
onPressed: () => ,
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new FlatButton(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
const IconData(0xea90,
fontFamily: 'icomoon'),
color: Colors.white,
size: 15.0,
),
Text(
"FACEBOOK",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
),
),
),
],
),
),
),
new Expanded(
child: new Container(
margin: EdgeInsets.only(left: 8.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Color(0Xffdb3236),
onPressed: () => ,
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new FlatButton(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
const IconData(0xea88,
fontFamily: 'icomoon'),
color: Colors.white,
size: 15.0,
),
Text(
"GOOGLE",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
),
),
),
],
),
),
),
],
),
)
],
),
));
有谁知道可能是什么问题？
【问题讨论】：
【参考方案1】：我建议用 ListView 替换顶部的 Column 小部件，它会根据键盘输入自动调整大小，同时还支持滚动。
如果你真的想要这个设置，你可以用参数编辑你的脚手架
resizeToAvoidBottomPadding: false
这应该会使错误消失
【讨论】：
问题依旧，:( 阅读我下面的回复，这并不能解决问题 完美！这是一个在大型案例中更简单的解决方案......看这个关于这个问题的电影：youtube.com/watch?v=2E9iZgg5TOY 您可以使用 Singlechildscrollview 包装主 Column 小部件，即使您有多个 textFields 也可以使用。 你太棒了，用“ListView”替换“Column”对我有用【参考方案2】：Scaffold(
resizeToAvoidBottomInset: false, // set it to false
...
)
正如 Andrey 所说，您可能在滚动时遇到问题，因此您可以尝试
Scaffold(
resizeToAvoidBottomInset: false, // set it to false
body: SingleChildScrollView(child: YourBody()),
)
【讨论】：
【参考方案3】：你通常需要在你的小部件之上提供一个滚动小部件，因为如果你尝试打开键盘或改变手机的方向，Flutter 需要知道如何处理小部件在屏幕上的分布。
请查看此资源，您可以检查 Flutter 开箱即用提供的不同选项，并为您的场景选择最佳选项。
https://flutter.io/widgets/scrolling/
【讨论】：
我很困惑我应该使用哪一个？我希望我的屏幕应该像android一样滚动ScrollView你能建议吗？
一开始会很困惑，但是当你构建许多页面时，你可以知道哪个小部件比其他小部件更有用，根据你分享的代码，你可以使用 listView 代替 Column 小部件。【参考方案4】：
使用 Scaffold 中的 resizeToAvoidBottomPadding: false，您不会看到打开的文本字段下方的所有小部件。解决方案是在里面插入一个带有 SingleChildScrollView 的容器。示例：
Container(
alignment: Alignment.center,
width: double.infinity,
height: double.infinity,
color: viewModel.color,
child: SingleChildScrollView(child:"Your widgets"));
【讨论】：
用 SingleChildScrollVie 包裹脚手架体解决了这个问题。 +1【参考方案5】：将您的子视图包装到 ListView 将解决问题。请检查这个
class _LoginScreenState extends State<LoginScreen>
@override
Widget build(BuildContext context)
return new Scaffold(
body: new Container(
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Padding(
padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
child: new Text("jk", style: TextStyle(fontFamily: "mono_bold")),
),
new Padding(
padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
child: new TextField(
style: new TextStyle(),
decoration: InputDecoration(
labelText: "Email",
contentPadding: EdgeInsets.all(8.0)
),
keyboardType: TextInputType.emailAddress,
)
),
new Padding(
padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
child: new TextField(
style: new TextStyle(
),
decoration: InputDecoration(
labelText: "Password"
),
keyboardType: TextInputType.text,
obscureText: true,
),
),
],
),
),
],
)
),
);
【讨论】：
【参考方案6】：将您的专栏包装成 SingleChildScrollView 将解决问题。请检查：
Widget build(BuildContext context)
return Scaffold(
body: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(),
TextField(),
],
),
))));
你也可以用来去除黄黑溢出线
resizeToAvoidBottomPadding: false
但在这种情况下，TextField 不会在点击时间上移动。
【讨论】：
【参考方案7】：使用 SingleChildScrollView 小部件包装这是我解决这种情况的代码： 这是最好和最简单的方法
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Hero(
tag: 'logo',
child: Container(
height: 200.0,
child: Image.asset('images/logo.png'),
),
),
SizedBox(
height: 48.0,
),
TextField(
onChanged: (value)
//Do something with the user input.
,
decoration: kTextFieldDecoration.copyWith(hintText: 'Enter username'),
),
SizedBox(
height: 8.0,
),
TextField(
onChanged: (value)
//Do something with the user input.
,
decoration: kTextFieldDecoration.copyWith(hintText: 'Enter password'),
),
SizedBox(
height: 24.0,
),
RoundedButton(
colour: Colors.blueAccent,
text: 'Register',
onPressed: ()
//later todo
,
),
],
),
),
【讨论】：
【参考方案8】：您可以设置resizeToAvoidBottomInset: false避免溢出，但无法到达页面底部的字段，可以通过键盘覆盖。
或者您可以将Scaffold 的主体包裹在SingleChildScrollView 中
【讨论】：
【参考方案9】：您可以将所有小部件包含在 ListView 中。 所以你可以滚动它，重载的就会消失。
【讨论】：
【参考方案10】：将您的内容放入 SingleChildScrollView 并添加一个 ConstrainedBox 并尝试
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
【讨论】：
【参考方案11】：将您的顶部列包裹在 SingleChildScrollView 中。
让你的布局可滚动。
【讨论】：
【参考方案12】：您可以将您的字段包装在 Flutter 的单个子 ScrollView 中。
【讨论】：
【参考方案13】：这将项目从下到上对齐， 试试这个..
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
reverse: true,
【讨论】：
【参考方案14】：删除不需要的顶部和底部填充
child: Container(
height: size.height,
width: size.width,
padding: EdgeInsets.only(
left: size.width * 0.15,
right: size.width * 0.15,
top: size.width * 0.15,
bottom: size.width * 0.15,
),
由此改变
child: Container(
height: size.height,
width: size.width,
padding: EdgeInsets.only(
left: size.width * 0.15,
right: size.width * 0.15,
),
这对我有用。
【讨论】：
【参考方案15】：尝试用
包裹你的主列1.(ListView 并赋予属性shrinkWrap: true,) 列表视图有属性children: [], 或
2.( SingleChildScrollView() )但它只有孩子: , .
类似：
child: ListView(shrinkWrap: true, children: <Widget>[
new Column(children: <Widget>[
Container(
padding: EdgeInsets.all(120.0),
child: Center(
child: Icon(
Icons.headset_mic,
color: Colors.redAccent,
size: 50.0,
),
),
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'samarthagarwal@live.com',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
])
]),
【讨论】：
以上是关于底部在颤动中超载了 213 像素的主要内容，如果未能解决你的问题，请参考以下文章
我在像素溢出的颤动中遇到此错误。任何解决方案。附上溢出的图片
一个 RenderFlex 在底部溢出了 729 个像素。在 SingleChildScrollView
一个 RenderFlex 在底部问题上溢出了 40 个像素