Flutter:向上移动对话框以为软键盘腾出空间?
Flutter: Move dialog up to make room for soft keyboard?
有没有办法向上移动对话框(在我的例子中是 AlertDialog
)以便在软键盘可见时为它腾出空间?
这是一个已知错误:https://github.com/flutter/flutter/issues/7032
如果有帮助,该错误中有一个解决方法。
试试这个..
return SingleChildScrollView(
padding: EdgeInsets.only(top: yourFocus.hasFocus ?
MediaQuery.of(context).size.height / 2 - 250 // adjust values according to your need
: MediaQuery.of(context).size.height / 2 - 130),// adjust values according to your need
child: AlertDialog(
title: Text("your Alert header text"),
content: TextField(
focusNode: yourFocus,
controller: yourTextController,
decoration: InputDecoration.collapsed(
hintText: "your hint text."),
),
actions: <Widget>[
FlatButton(
child: Text("Your button Title"),
onPressed: () {
yourFunction();
})
]));
添加这个边距 margin: MediaQuery.of(context).viewInsets,
,它在自定义警报对话框中对我有用。
这是我的回答:
使用 Padding 小部件包装您的对话框。
然后给出 属性
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Center(
child: Material(
color: Colors.white,
child: ScaleTransition(
scale: scaleAnimation,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(15.0),
decoration: ShapeDecoration(
color: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0))),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0, left: 20.0, right: 20.0),
child: Text(
"Masukkan password akun anda",
style: TextStyle(color: Colors.black87, fontSize: 16.0),
),
),
Padding(
padding: const EdgeInsets.all(5),
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(
width: 1
),
borderRadius: BorderRadius.circular(5)
),
contentPadding: EdgeInsets.symmetric(horizontal:10,vertical:5)
),
keyboardType: TextInputType.text,
obscureText: true,
style: TextStyle(
fontSize: 22,
letterSpacing: 1
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: ButtonTheme(
height: 35.0,
minWidth: 110.0,
child: RaisedButton(
color: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
splashColor: Colors.white.withAlpha(40),
child: Text(
'OK',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 13.0),
),
onPressed: () {
Navigator.pop(context);
widget.nextPage();
},
)),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 10.0, top: 10.0, bottom: 10.0),
child: ButtonTheme(
height: 35.0,
minWidth: 110.0,
child: RaisedButton(
color: Colors.red[700],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
splashColor: Colors.white.withAlpha(40),
child: Text(
'Batal',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 13.0),
),
onPressed: () {
setState(() {
Navigator.pop(context);
});
},
))
),
],
)
],
)),
],
),
),
),
),
)
有没有办法向上移动对话框(在我的例子中是 AlertDialog
)以便在软键盘可见时为它腾出空间?
这是一个已知错误:https://github.com/flutter/flutter/issues/7032
如果有帮助,该错误中有一个解决方法。
试试这个..
return SingleChildScrollView(
padding: EdgeInsets.only(top: yourFocus.hasFocus ?
MediaQuery.of(context).size.height / 2 - 250 // adjust values according to your need
: MediaQuery.of(context).size.height / 2 - 130),// adjust values according to your need
child: AlertDialog(
title: Text("your Alert header text"),
content: TextField(
focusNode: yourFocus,
controller: yourTextController,
decoration: InputDecoration.collapsed(
hintText: "your hint text."),
),
actions: <Widget>[
FlatButton(
child: Text("Your button Title"),
onPressed: () {
yourFunction();
})
]));
添加这个边距 margin: MediaQuery.of(context).viewInsets,
,它在自定义警报对话框中对我有用。
这是我的回答:
使用 Padding 小部件包装您的对话框。 然后给出 属性
padding: EdgeInsets.only( bottom: MediaQuery.of(context).viewInsets.bottom),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Center(
child: Material(
color: Colors.white,
child: ScaleTransition(
scale: scaleAnimation,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(15.0),
decoration: ShapeDecoration(
color: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0))),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0, left: 20.0, right: 20.0),
child: Text(
"Masukkan password akun anda",
style: TextStyle(color: Colors.black87, fontSize: 16.0),
),
),
Padding(
padding: const EdgeInsets.all(5),
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(
width: 1
),
borderRadius: BorderRadius.circular(5)
),
contentPadding: EdgeInsets.symmetric(horizontal:10,vertical:5)
),
keyboardType: TextInputType.text,
obscureText: true,
style: TextStyle(
fontSize: 22,
letterSpacing: 1
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: ButtonTheme(
height: 35.0,
minWidth: 110.0,
child: RaisedButton(
color: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
splashColor: Colors.white.withAlpha(40),
child: Text(
'OK',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 13.0),
),
onPressed: () {
Navigator.pop(context);
widget.nextPage();
},
)),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 10.0, top: 10.0, bottom: 10.0),
child: ButtonTheme(
height: 35.0,
minWidth: 110.0,
child: RaisedButton(
color: Colors.red[700],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
splashColor: Colors.white.withAlpha(40),
child: Text(
'Batal',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 13.0),
),
onPressed: () {
setState(() {
Navigator.pop(context);
});
},
))
),
],
)
],
)),
],
),
),
),
),
)