我正在尝试制作一个具有文本字段且自动对焦设置为 true 的底页,以便弹出键盘。但是,底页与键盘重叠。有没有办法将底页移到键盘上方?
Padding( padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom), child: Column(children: <Widget>[ TextField( autofocus: true, decoration: InputDecoration(hintText: 'Title'), ), TextField( decoration: InputDecoration(hintText: 'Details!'), keyboardType: TextInputType.multiline, maxLines: 4, ), TextField( decoration: InputDecoration(hintText: 'Additional details!'), keyboardType: TextInputType.multiline, maxLines: 4, ),]);
要解决此问题
添加isScrollControlled = true到BottomSheetDialog它将使底部片材占据所需的全部高度,从而提供TextField键盘未涵盖的更多保险。
isScrollControlled = true
BottomSheetDialog
TextField
使用添加键盘填充MediaQuery.of(context).viewInsets.bottom
MediaQuery.of(context).viewInsets.bottom
笔记
如果你BottomSheetModel是Column确保你添加 mainAxisSize: MainAxisSize.min,否则工作表将覆盖整个屏幕。
BottomSheetModel
Column
mainAxisSize: MainAxisSize.min,
例子
showModalBottomSheet( shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))), backgroundColor: Colors.black, context: context, isScrollControlled: true, builder: (context) => Padding( padding: const EdgeInsets.symmetric(horizontal:18 ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Padding( padding: const EdgeInsets.symmetric(horizontal: 12.0), child: Text(‘Enter your address’, style: TextStyles.textBody2), ), SizedBox( height: 8.0, ), Padding( padding: EdgeInsets.only( bottom: MediaQuery.of(context).viewInsets.bottom), child: TextField( decoration: InputDecoration( hintText: ‘adddrss’ ), autofocus: true, controller: _newMediaLinkAddressController, ), ),
SizedBox(height: 10), ], ), ));
请注意:
shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
这不是必需的。只是我正在创建一个圆形底部表。
Flutter 2.2 再次打破了这些变化!”现在您需要再次提供底部填充,这样键盘就不会与底部表重叠。