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

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);

你需要提供你想要滚动到的高度，所以这可能有一个缺点，但滚动到顶部需要高度=0；

您也可以关注此讨论此处