问题描述
我正在尝试创建一个底部带有文本字段的聊天屏幕,每当点击它时,键盘就会出现并且文本字段应该在键盘的顶部,但我自己的没有做它应该做的事情。我已经在 google、stackoverflow 和 github 上检查了其他类似的问题和答案,但它仍然保持不变,也许是因为我正在使用 constraints: BoxConstraints(maxHeight: 160),
这可能是导致它的原因,但我真的不知道
这是我的代码
class _ChatSectionState
extends State<ChatSectionState> {
List<File> images = List<File>();
getMultiFile() async {
await pickFileFromMobile("multi").then((value) {
if (value != null) {
value.paths.forEach((element) {
images.add(File(element));
});
// images = value.paths.map((path) => File(path)).toList();
}
});
setState(() {});
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(...,body: Container(
height: double.infinity,child: Stack(
children: [
Padding(
padding: EdgeInsets.only(bottom: 50),child: Container(
child: ListView.builder(
itemCount: 10,reverse: true,shrinkWrap: true,physics: ScrollPhysics(),itemBuilder: (ctx,idx) {...
///...
),),///This is the part that hides behide the keyboard when it appears which i want to show on top
Align(
alignment: Alignment.bottomCenter,child: Container(
decoration: Boxdecoration(
color: white,border: Border(
top: BorderSide(
color: grey[400],width: .7,bottom: BorderSide(
color: grey[400],)),constraints: BoxConstraints(maxHeight: 160),//This is the Box contraints
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,children: [
(images.length < 1)
? SizedBox(height: 0)
: Expanded(
child: ListView.builder(
shrinkWrap: true,scrollDirection: Axis.horizontal,padding: EdgeInsets.symmetric(
vertical: 7,horizontal: 10),itemCount: images.length,idx) {
return Container(
///... This is to show a image from file width a height of 100
);
},Container(
decoration: Boxdecoration(
border: Border(
top: BorderSide(
color: grey[300],width: .5,child: Row(children: [
Container(
margin: new EdgeInsets.symmetric(horizontal: 8.0),child: new IconButton(
icon: new Icon(Icons.image),onpressed: () => getMultiFile(),color: primary,Flexible(
child: Container(
child: TextFormField(
//controller: messageEditingController,style: TextStyle(color: nBlack,fontSize: 15.0),decoration: Inputdecoration.collapsed(
hintText: 'Type a message',hintStyle: TextStyle(color: grey),onFieldSubmitted: (value) {},Container(
margin: new EdgeInsets.symmetric(horizontal: 8.0),child: new IconButton(
icon: new Icon(Icons.send),onpressed: () {},]),],)
],resizetoAvoidBottomInset: false,));
}
}
请问我怎样才能让它工作,因为我检查了不同的页面仍然给我想要的东西。我也试过这个[答案][1]
[1]:https://stackoverflow.com/a/49715952/14650702 有效,但动画很糟糕
解决方法
您可以将 resizeToAvoidBottomInset: ture,
更改为脚手架。
打开键盘会缩小整个脚手架。
我用另一种方式。 resizeToAvoidBottomInset:确定并做一些更改以提升键盘顶部的小部件。
bottom = MediaQuery.of(context).viewInsets.bottom;
脚手架( resizeToAvoidBottomInset: 真的,正文:SingleChildScrollView( 反向:真, 孩子:填充( 填充:EdgeInsets.only(底部:底部), 孩子: ... )));
如果您减少从键盘到最后一个小部件的空间,请使用 MediaQuery.of(context).viewInsets.bottom/2 e.x.