微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

颤动小部件在打开时隐藏在键盘后面

如何解决颤动小部件在打开时隐藏在键盘后面

我正在尝试创建一个底部带有文本字段的聊天屏幕,每当点击它时,键盘就会出现并且文本字段应该在键盘的顶部,但我自己的没有做它应该做的事情。我已经在 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.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。