Flutter bottomSheet在列中输入,底部有一个附件图标,键盘在激活时隐藏图标



我显示了一个带有showModalBottomSheet的底部表单,如下所示:

showModalBottomSheet(
isScrollControlled: true,
context: context,
backgroundColor: Colors.transparent,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Container(
height: MediaQuery.of(context).size.height * .90,
width: double.infinity,
child: Column(
children: [
Expanded(
child: PostCreate(isImageType: isImageType)
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 0, 20),
child: Align(
alignment: Alignment.bottomLeft,
child: IconButton(
onPressed: () {
setState(() {
isImageType = true;
});
},
icon: Icon(Icons.attach_file_rounded),
)
),
)
],
),
);
}
);
}
);

PostCreate小部件包含一个带*形式的列(单个输入(和一个用于添加图像的部分。当键盘不可见时,attach_file_rounded图标位于预期位置(左下角(,但当输入集中且键盘可见时,图标隐藏在键盘后面。我不关心PostCreate中的代码,因为如果我将其更改为Expanded:中的表单/输入

Expanded(
child: Form(
child: TextFormField(
autofocus: true,
) 
)
)

我也有同样的问题。当键盘处于活动状态时,我如何在底部表格的左下角对齐动态位于键盘上方的内容?另一件需要注意的事情是,我确实希望PostCreate小部件展开,以便在工作表底部为某些东西(如attach_file图标(留出空间。这一切都按预期进行,我只需要用键盘进行调整。

我通过在Align/IconButton小部件周围的Padding小部件中添加padding: MediaQuery.of(context).viewInsets,来解决这个问题。

Padding(
padding: MediaQuery.of(context).viewInsets,
child: Align(
alignment: Alignment.bottomLeft,
child: IconButton(
onPressed: () {
setState(() {
isImageType = true;
});
},
icon: Icon(Icons.attach_file_rounded),
)
),
)

相关内容

  • 没有找到相关文章

最新更新