![](/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.