Flutter应用中键盘遮挡Bottom Sheet问题求助
解决BottomSheet中TextField被键盘遮挡的问题
针对Flutter 3.3.10版本里BottomSheet内TextField被键盘遮挡的问题,可按以下方式修改代码:
showModalBottomSheet( context: context, backgroundColor: Colors.transparent, isScrollControlled: true, builder: (BuildContext context) { return Padding( padding: MediaQuery.of(context).viewInsets, child: Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only( topLeft: Radius.circular(25), topRight: Radius.circular(25), ), ), child: SingleChildScrollView( child: Padding( padding: EdgeInsets.symmetric(horizontal: 16, vertical: 20), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, mainAxisSize: MainAxisSize.min, children: [ const SizedBox(height: 12), Center( child: Container( width: 40, height: 5, decoration: BoxDecoration( borderRadius: BorderRadius.circular(100), color: Colors.black), ), ), const SizedBox(height: 20), Text('hello'), const SizedBox(height: 20), _buildTextFieldWidget(), const SizedBox(height: 20), ], ), ), ), ), ); }, );
关键修改说明:
- 移除重复的
MediaQuery.of(context).viewInsets.bottom内边距,仅保留最外层Padding包裹整个Container,确保BottomSheet能根据键盘高度自动上移。 - 调整SingleChildScrollView的嵌套位置,让它包裹Column内容而非外层Padding,既保证键盘弹出时内容可滚动,又配合
isScrollControlled: true实现BottomSheet的位置自适应。 - 给内容区域添加水平内边距,优化整体显示效果。
同时请确认_buildTextFieldWidget()中没有设置固定高度限制,避免影响TextField对键盘弹出事件的响应。
内容的提问来源于stack exchange,提问作者Luke Irvin
相关产品推荐
相关产品推荐

