|
当我们将输入框嵌入到外部插件的弹窗中时，点击编辑会导致键盘遮挡无法输入。出现这样的问题，其实原因很简单，就是当前输入框未嵌入到context中，所以无法监听输入框的位置，从而键盘遮挡。下图为正确效果（图出自网络）：
知道原因，解决自然也非常简单，根据场景是弹出弹框内的输入框遮挡问题：
1、使用自带插件showModalBottomSheet，缺点需要传入context：
import 'package:flutter/material.dart';
final BuildContext context;//声明变量
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
Widget build(BuildContext context) {
context = context;//接受变量
return ...
}
///存底向上滑出弹窗
showModalBottomSheet(
context: context,//赋值
backgroundColor: Colors.transparent,
isScrollControlled: true,
builder: (context) {
return Container(
height: 0.8.sh,
width: 1.sw,
padding: EdgeInsets.fromLTRB(77.w, 53.h, 63.w, 50.h),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.w),
topRight: Radius.circular(30.w))),
child: Column(children: [
Expanded(
child: Form(
key: _formKey, //设置globalKey，用于后面获取FormState
child: Container(
width: 1.sw,
child: ListView(children: [
TextFormField(),//省略内容
TextFormField(),//省略内容
TextFormField(),//省略内容
TextFormField(),//省略内容
TextFormField(),//省略内容
TextFormField(),//省略内容
TextFormField(),//省略内容
TextFormField(),//省略内容
]),
)))
]));
});
2、基于Get弹出框Get.bottomSheet，不用传入context，自动获取：
import 'package:flutter/material.dart';
import 'package:get/get.dart';
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
Get.bottomSheet(
Container(
height: 0.8.sh,
width: 1.sw,
padding: EdgeInsets.fromLTRB(77.w, 53.h, 63.w, 50.h),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.w),
topRight: Radius.circular(30.w))),
child: Column(children: [
Expanded(
child: Container(
width: 1.sw,
child: Form(
key: _formKey, //设置globalKey，用于后面获取FormState
child: ListView(children: [
TextFormField(),//省略内容
TextFormField(),//省略内容
TextFormField(),//省略内容
TextFormField(),//省略内容
]),
)))
])),
backgroundColor: Colors.transparent,
);
| 
转播
