flutter - 键盘关闭 Flutter 中的 Modal BottomSheet
问题描述
当我想在 Textfield 中写一些文本时，键盘会关闭我的模态底页。我不明白，为什么会这样。我尝试使用这行代码：
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
但是在输出中，我得到了文本字段，它可以延伸。
我花了很多时间来解决这个问题，我真的很想关闭这个问题。
这是完整的代码
import 'package:flutter/material.dart';
class NutritionScreen extends StatefulWidget {
@override
_NutritionScreenState createState() => _NutritionScreenState();
}
class _NutritionScreenState extends State<NutritionScreen> {
double height = 500.0;
void _modalBottomSheetMenu(){
showModalBottomSheet(
context: context,
builder: (builder){
return new Container(
height: height,
color: Colors.transparent, //could change this to Color(0xFF737373),
//so you don't have to change MaterialApp canvasColor
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0))),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Питание",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black, fontSize: 26.0),
)),
Padding(
padding: EdgeInsets.only(
bottom: 8.0,
top: 8.0,
right: 8.0,
left: 8.0
),
child: TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Возраст",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
)),
Padding(
padding: EdgeInsets.only(
bottom: 8.0,
top: 8.0,
right: 8.0,
left: 8.0
),
child: TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Рост",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
)),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
top: 8.0,
right: 8.0,
left: 8.0
),
child: TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Вес",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
)),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
top: 8.0,
right: 8.0,
left: 8.0
),
child: TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Целевой вес",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
)),
],
)),
));
}
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Color(0xff2b2b2b),
appBar: AppBar(
backgroundColor: Colors.lightGreen[400],
title: Text(
'Питание',
style: new TextStyle(
color: Colors.white
),),
leading: IconButton(
icon:Icon(Icons.arrow_back),
color: Colors.white ,
onPressed:() => Navigator.of(context).pop(),
),
),
body: Container(
alignment: Alignment.center,
margin: const EdgeInsets.only(bottom: 45.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 200.0),
child: Text(
"Нажми на кнопку, чтобы добавить правильный рацион питания.",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20.0),
)),
FloatingActionButton(
heroTag: "tag3",
backgroundColor: Color(0xffFF7070),
child: Icon(Icons.add, color: Colors.white),
onPressed: () {
_modalBottomSheetMenu();
}),
],
),
),
);
}
}
解决方案
你不需要用小部件包装每个文件padding- 只需用小部件包装你的主Container文件padding-
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom)
.
更新代码：
class NutritionScreen extends StatefulWidget {
@override
_NutritionScreenState createState() => _NutritionScreenState();
}
class _NutritionScreenState extends State<NutritionScreen> {
double height = 500.0;
void _modalBottomSheetMenu() {
showModalBottomSheet(
context: context,
builder: (builder) {
return Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: new Container(
height: height,
color: Colors
.transparent, //could change this to Color(0xFF737373),
//so you don't have to change MaterialApp canvasColor
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0))),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
"Питание",
textAlign: TextAlign.center,
style:
TextStyle(color: Colors.black, fontSize: 26.0),
),
TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400], fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Возраст",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400], fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Рост",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400], fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Вес",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
TextField(
maxLines: 1,
textDirection: TextDirection.ltr,
// controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400], fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: "Целевой вес",
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
),
],
)),
)),
);
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Color(0xff2b2b2b),
appBar: AppBar(
backgroundColor: Colors.lightGreen[400],
title: Text(
'Питание',
style: new TextStyle(color: Colors.white),
),
leading: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.white,
onPressed: () => Navigator.of(context).pop(),
),
),
body: Container(
alignment: Alignment.center,
margin: const EdgeInsets.only(bottom: 45.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 200.0),
child: Text(
"Нажми на кнопку, чтобы добавить правильный рацион питания.",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20.0),
)),
FloatingActionButton(
heroTag: "tag3",
backgroundColor: Color(0xffFF7070),
child: Icon(Icons.add, color: Colors.white),
onPressed: () {
_modalBottomSheetMenu();
}),
],
),
),
);
}
}
推荐阅读
- r - 箱线图：Matlab 显示关于 R 的不同图形？
- winapi - 如何监控和记录可执行文件对某些操作的 Win API 调用？
- javascript - Fullcalendar 使用变量添加事件
- r - 对于空间中的特定点，获取该点所在的像素（在 R 中）
- podio - Podio API：未附加的文件保留多长时间？
- php - 即使我在错误上运行 exit()，我的 PHP 代码也会返回 true
- javascript - 包括来自外部文件的嵌入式 javascript 函数
- c# - Process.Start 以“每个人”的用户名开始？
- android - Android 应用小部件 SeekBar 进度在 onDestroy() 中存活
- java - Android 中 ScrollView 的 IllegalStateException