底部溢出 182 像素
[英]Bottom overflowed by 182 pixels
问题描述
I am trying to add textfields in a widget on Flutter, and it renders correctly, but when the text is pressed to enter the data, appears the following error:
我正在尝试在 Flutter 上的小部件中添加文本字段，并且它呈现正确，但是当按下文本输入数据时，出现以下错误：
"Bottom overflowed by 182 pixels" “底部溢出 182 像素”
The error is when the default keyboard appears.错误是出现默认键盘时。 I don't know why is it happening since i am wrapping everything in a SingleChildScrollView widget, therefore, should work just fine.我不知道为什么会这样，因为我将所有内容都包装在 SingleChildScrollView 小部件中，因此，应该可以正常工作。
Attached the code:附上代码：
class TextFieldsState extends State<TextFields> {
@override
Widget build(BuildContext context) {
const colorRed = Color(0xFFF0786E);
return SingleChildScrollView(
child: Container(
margin: EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 20.0,
),
//color: Colors.greenAccent,
height: 500,
child: Stack(
//alignment: Alignment.bottomCenter,
children: <Widget>[
Container (
height: 500,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22.0),
color: colorRed,
),
child: Container (
height: 500,
margin: EdgeInsets.only(right: 10,),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(22),
),
),
),
Center(
child: Positioned (
child: SizedBox(
height: 136,
//width: size.width,
child: Column(
children: <Widget>[
Container(
height: 30,
width: 160,
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10.0),
),
hintText: 'Name',
),
textAlign: TextAlign.center,
),
),
SizedBox(height: 20.0),
Container(
height: 30,
width: 160,
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10.0),
),
hintText: 'Surname',
),
textAlign: TextAlign.center,
),
),
SizedBox(height: 20.0),
Container(
height: 30,
width: 160,
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10.0),
),
hintText: 'Nationality',
),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
],
),
),
);
}
}
What is the solution, please?请问有什么解决办法？
3 个解决方案
解决方案1
0 2020-09-18 12:09:43
try this please请试试这个
SingleChildScrollView(
column( // your column
)
)
overflow error is in column and you should add SingleChildScrollView as parent of this column.溢出错误在列中，您应该添加SingleChildScrollView作为该列的父级。
解决方案2
0 2020-09-18 13:33:43
Please check the edited below code.请检查下面编辑过的代码。
class TextFieldsState extends State<TextFields> {
@override
Widget build(BuildContext context) {
const colorRed = Color(0xFFF0786E);
return Scaffold(
body: SingleChildScrollView(
child: Container(
margin: EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 20.0,
),
//color: Colors.greenAccent,
height: 500,
child: Stack(
//alignment: Alignment.bottomCenter,
children: <Widget>[
Container(
height: 500,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22.0),
color: colorRed,
),
child: Container(
height: 500,
margin: EdgeInsets.only(
right: 10,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(22),
),
),
),
Center(
child: SizedBox(
height: 136,
//width: size.width,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 30,
width: 160,
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10.0),
),
hintText: 'Name',
),
textAlign: TextAlign.center,
),
),
SizedBox(height: 20.0),
Container(
height: 30,
width: 160,
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10.0),
),
hintText: 'Surname',
),
textAlign: TextAlign.center,
),
),
SizedBox(height: 20.0),
Container(
height: 30,
width: 160,
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10.0),
),
hintText: 'Nationality',
),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
],
),
),
),
);
}
}
解决方案3
0 已采纳 2020-09-21 08:05:52
我最终用一个 Expanded 小部件和带有 Text 字段的列包装了所有东西，我用一个 SingleChilsScrollView 包装它，它工作得很好。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.