键盘打开时如何避免底部溢出(在警告对话框中)
How to avoid bottom overflow when keyboard open (in alert dialog)
在这个屏幕上,每次我在警报文本字段中打开键盘时,我都会面临溢出。我已经尝试将 SingleChildScrollVIew
放在所有地方,但没有解决。这是具有警报对话框的组件:
Future<void> _showAlertDialog() async {
return showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Type the Name', textAlign: TextAlign.center,
style: TextStyle(color: Colors.white)),
content: TextField(
controller: _nameController,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.sentences,
)
);
},
);
}
这是构建函数:
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TableCalendar(//default code),
Divider(),
_showList(),
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add, color: Colors.white,),
onPressed: () => _showCity(context)
),
);
}
_showAlertDialog
在 _showCity
中被调用(参见 build > floating action button > onpressed)
_showCity
:
_showCity(BuildContext context){
_showAlertDialog();
}
但在所有尝试之后,每次我点击 _showAlertDialog 中的 textField 并打开键盘时,都会抛出错误:
A RenderFlex overflowed by 33 pixels on the bottom.
我该如何处理?
更新
_showList:
Widget _showList(){
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: _sEv.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
},
child: Dismissible(
child: ListTile(
leading: //loremipsum,
title: //blablabla,
subtitle: //dolorsit,
),
),
key: UniqueKey(),
direction: DismissDirection.startToEnd,
background: Container(
alignment: AlignmentDirectional.centerEnd,
color: Colors.redAccent,
child: Icon(Icons.delete_rounded),
),
onDismissed: (DismissDirection direction) {
setState(() {
//my irrelevant code
});
}
),);
},
);
}
更新 2
截屏:
只需将此页面的正文包裹在 SingleChildScrollView
中即可。
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ TableCalendar(
//default code),
Divider(), _showList(),
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add, color: Colors.white,),
onPressed: () => _showCity(context)
),
),
);
}
在这个屏幕上,每次我在警报文本字段中打开键盘时,我都会面临溢出。我已经尝试将 SingleChildScrollVIew
放在所有地方,但没有解决。这是具有警报对话框的组件:
Future<void> _showAlertDialog() async {
return showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Type the Name', textAlign: TextAlign.center,
style: TextStyle(color: Colors.white)),
content: TextField(
controller: _nameController,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.sentences,
)
);
},
);
}
这是构建函数:
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TableCalendar(//default code),
Divider(),
_showList(),
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add, color: Colors.white,),
onPressed: () => _showCity(context)
),
);
}
_showAlertDialog
在 _showCity
中被调用(参见 build > floating action button > onpressed)
_showCity
:
_showCity(BuildContext context){
_showAlertDialog();
}
但在所有尝试之后,每次我点击 _showAlertDialog 中的 textField 并打开键盘时,都会抛出错误:
A RenderFlex overflowed by 33 pixels on the bottom.
我该如何处理?
更新 _showList:
Widget _showList(){
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: _sEv.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
},
child: Dismissible(
child: ListTile(
leading: //loremipsum,
title: //blablabla,
subtitle: //dolorsit,
),
),
key: UniqueKey(),
direction: DismissDirection.startToEnd,
background: Container(
alignment: AlignmentDirectional.centerEnd,
color: Colors.redAccent,
child: Icon(Icons.delete_rounded),
),
onDismissed: (DismissDirection direction) {
setState(() {
//my irrelevant code
});
}
),);
},
);
}
更新 2
截屏:
只需将此页面的正文包裹在 SingleChildScrollView
中即可。
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ TableCalendar(
//default code),
Divider(), _showList(),
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add, color: Colors.white,),
onPressed: () => _showCity(context)
),
),
);
}