[英]Bottom overflowed by 182 pixels
我正在尝试在 Flutter 上的小部件中添加文本字段,并且它呈现正确,但是当按下文本输入数据时,出现以下错误:
“底部溢出 182 像素”
错误是出现默认键盘时。 我不知道为什么会这样,因为我将所有内容都包装在 SingleChildScrollView 小部件中,因此,应该可以正常工作。
附上代码:
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,
),
),
],
),
),
),
),
],
),
),
);
}
}
请问有什么解决办法?
请试试这个
SingleChildScrollView(
column( // your column
)
)
溢出错误在列中,您应该添加SingleChildScrollView
作为该列的父级。
请检查下面编辑过的代码。
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,
),
),
],
),
),
),
),
],
),
),
),
);
}
}
我最终用一个 Expanded 小部件和带有 Text 字段的列包装了所有东西,我用一个 SingleChilsScrollView 包装它,它工作得很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.