![](/img/trans.png)
[英]How to push content up when focus is on TextField and keyboard opens in Flutter?
[英]how to push all content up when open keyboard
是否可以在打开键盘时将所有内容上推? (不只是textField区域,整个页面push up)
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return BottomSheet();
},
isScrollControlled: true);
底片 class
class BottomSheet extends StatefulWidget {
@override
_BottomSheetState createState() => _BottomSheetState();
}
class _BottomSheetState extends State<BottomSheet> {
@override
Widget build(BuildContext context) {
return
SingleChildScrollView(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
child: Column(
children: <Widget>[...
我想喜欢这个俯卧撑,
但当前 output 是,
如果您使用堆栈,您可以简单地为小部件提供MediaQuery.of(context).viewInsets.bottom
的bottom
position。
在您的情况下,将margin:
设置为MediaQuery.of(context).viewInsets.bottom
而不是填充。
将整个小部件包装在一个容器中,并像这样提供容器填充,它会起作用。
child: Container(
padding: EdgeInsets.only(
top: 25.0,
bottom: MediaQuery.of(context).viewInsets.bottom,
left: 25.0,
right: 25.0,
),
child: Form(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextFormField(
decoration: InputDecoration(
hintText: 'Email',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
keyboardType: TextInputType.emailAddress,
validator: (value) {
return _isEmailValid(value);
},
textInputAction: TextInputAction.next,
onSaved: (value) {},
controller: _emailController,
),
SizedBox(height: 10),
TextFormField(
obscureText: true,
decoration: InputDecoration(
hintText: 'Password',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
keyboardType: TextInputType.emailAddress,
validator: (value) {
return _isEmailValid(value);
},
textInputAction: TextInputAction.done,
onSaved: (value) {},
controller: _passwordController,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {},
child: const Text('Forgot Password'),
),
],
),
ElevatedButton(
style: ElevatedButton.styleFrom(
side: const BorderSide(width: 1.3, color: Colors.white),
shadowColor: Colors.white,
),
onPressed: () {},
child: const Text('Login'),
),
TextButton(
onPressed: () {},
child: Text('Not have any Accoung? Sign Up'),
),
],
),
),
),
将 Scaffold 的resizeToAvoidBottomInset
属性设置为 true。
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
child: //your code
);
}
)
这对我有用。 也许尝试将您的填充物移到容器内。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.