Question

我正在尝试创建一个底部带有文本字段的聊天屏幕，每当点击它时，键盘就会出现并且文本字段应该在键盘的顶部，但我自己的没有做它应该做的事情。我已经在 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],
                        width: .7,
                      )),
                ),
                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,
                              physics: ScrollPhysics(),
                              padding: EdgeInsets.symmetric(
                                  vertical: 7, horizontal: 10),
                              itemCount: images.length,
                              itemBuilder: (ctx, 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: () {},
                            color: primary,
                          ),
                        ),
                      ]),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
      resizeToAvoidBottomInset: false,
    ));
  }
}

请问我怎样才能让它工作，因为我检查了不同的页面仍然给我想要的东西。我也试过这个[答案][1]

[1]：https://stackoverflow.com/a/49715952/14650702 有效，但动画很糟糕

Answer 1

您可以将 resizeToAvoidBottomInset: ture, 更改为脚手架。打开键盘会缩小整个脚手架。

Answer 2

我用另一种方式。 resizeToAvoidBottomInset：确定并做一些更改以提升键盘顶部的小部件。

bottom = MediaQuery.of(context).viewInsets.bottom;

脚手架( resizeToAvoidBottomInset: 真的, 正文：SingleChildScrollView( 反向：真，孩子：填充（填充：EdgeInsets.only（底部：底部），孩子： ... )));

如果您减少从键盘到最后一个小部件的空间，请使用 MediaQuery.of(context).viewInsets.bottom/2 e.x.

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

2 个答案: