如何在发送消息时滚动聊天屏幕

Question

我有一个聊天屏幕，我想发送消息，在发送消息时，列表视图应该向下滚动到底部，直到它发送的最后一条消息。 请帮帮我

这是尸体

      body: WillPopScope(
        onWillPop: pressBack,
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              SizedBox(
                height: 0.02 * MediaQuery.of(context).size.height,
              ),
              Expanded(
                child: SizedBox(
                  width: 0.9 * MediaQuery.of(context).size.width,
                  child: ListView.builder(
                    controller: _scrollController,
                    itemCount: messageList.length + 1,
                    itemBuilder: (BuildContext context, index) {
                      return index == 0
                          ? Container()
                          : oneMessage(messageList[index - 1]);
                    },
                  ),
                ),
              ),
              SizedBox(
                height: 0.02 * MediaQuery.of(context).size.height,
              ),
              texWriteInBottomBar(),
            ],
          ),
        ),
      ),

我们在这里写消息并发送它

  texWriteInBottomBar() => Container(
        width: MediaQuery.of(context).size.width,
        height: 0.08 * MediaQuery.of(context).size.height,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              width: 0.04 * MediaQuery.of(context).size.width,
            ),
            myTextFormField(),
            SizedBox(
              width: 0.02 * MediaQuery.of(context).size.width,
            ),
            GestureDetector(
              onTap: sendMessage,
              child: SizedBox(
                  height: 0.1 * MediaQuery.of(context).size.height,
                  width: 0.1 * MediaQuery.of(context).size.height,
                  child: Transform(
                    alignment: Alignment.center,
                    transform: (getTranslated(context, 'language')=='ar')?Matrix4.rotationY(math.pi):Matrix4.rotationX(0),
                    child: Image.asset(
                      'assets/images/Chat/send.png',
                      fit: BoxFit.fitHeight,
                    ),
                  )),
            ),
            SizedBox(
              width: 0.02 * MediaQuery.of(context).size.width,
            ),
          ],
        ),
      );

  myTextFormField() => Expanded(
        child: SizedBox(
          width: 0.6 * MediaQuery.of(context).size.width,
          height: 0.08 * MediaQuery.of(context).size.height,
          child: TextFormField(
            controller: _textEditingController,
            onChanged: (text) {
              setState(() {
                messageText = _textEditingController.text;
              });
            },
            onFieldSubmitted: (text) {
              sendMessage();
            },
            textAlign: TextAlign.right,
            decoration: InputDecoration(
              border: decor,
              focusedBorder: decor,
              enabledBorder: decor,
              errorBorder: decor,
              disabledBorder: decor,
              fillColor: Color(0xffF3F3F3),
              filled: true,
              hintText: getTranslated(context, 'Say something'),
              hintStyle: TextStyle(
                color: Color(0xff909090),
                fontFamily: 'Cairo',
              ),
            ),
          ),
        ),
      );
  void sendMessage() async {
    setState(() {
      messageList.add(Message(
          messageText,
          '',
          '${DateTime.now().year} ${DateTime.now().month} ${DateTime.now().day} ',
          '${DateTime.now().hour} : ${DateTime.now().minute}',
          widget.sender));
      _textEditingController.text = '';
    });
    scrollToBottom();
  }
scrollToBottom(){

}

你看到最后一个函数是 scrollToBottom(){} 但它是空的，所以我应该写什么

Answer 1

看到你不必实现一个单独的功能，你知道从下到下显示消息。您可以像我们在 Instagram 或 whatsapp 中那样直接从底部开始您只需要使用 reverse:true 如下所述，您将实现这一目标

ListView.builder(
                reverse: true,    //Add this and your work is done
                controller: _scrollController,
                itemCount: messageList.length + 1,
                itemBuilder: (BuildContext context, index) {
                  return index == 0
                      ? Container()
                      : oneMessage(messageList[index - 1]);
                },
              ),

现在，如果您想通过一些动画滚动到特定位置，这不是最好的方法，但由于我们不必滚动到特定的聊天索引，我们可以使用它

在有状态的小部件中声明这个

final _controller = ScrollController();

现在在你的 listview.builder 上使用它

ListView.builder(
          controller: _controller,//add this controller
....),

现在在您的 onpressed 或任何功能上 用这个

_animateToIndex(height) => _controller.animateTo(height, duration: Duration(seconds: 2), curve: Curves.fastOutSlowIn);

您需要提供要滚动到的高度，所以这可能有一个缺点，但是滚动到顶部需要 height= 0 ;

你也可以关注这个讨论 here