如何使 websocket 响应显示在与发送的消息相同的小部件中，例如正确的聊天屏幕

Question

我是Flutter的新手，到目前为止我目前爱上了它。

我需要一种方法将来自web-socket服务器的响应放在左侧;就像一个适当的聊天屏幕。

WebSocketChannel channel;
final List<String> list = [];
final List<ChatMessageListItem> _messages = <ChatMessageListItem>[];
TextEditingController _textController;
bool _isComposing = false;
@override
void initState() {
super.initState();
channel = IOWebSocketChannel.connect('ws://echo.websocket.org');
_textController = TextEditingController();
channel.stream.listen((receivedMessage){
setState(() {
list.add(receivedMessage);
});
});
}

显示已发送消息的代码

void _handleSubmitted(String text) {
setState(() {
_isComposing = false;
});
if (_textController.text.isNotEmpty) {
_textController.clear();
ChatMessageListItem message = new ChatMessageListItem(
sentMessage: text,
animationController: new AnimationController(
duration: new Duration(milliseconds: 350),
vsync: this,
),
);
setState(() {
_messages.insert(0, message);
});
message.animationController.forward();
channel.sink.add(message.sentMessage);
}
}

用于显示已发送消息的小部件

new Flexible(
child: new ListView.builder(
padding: new EdgeInsets.all(8.0),
reverse: true,
itemBuilder: (_, int index) => _messages[index],
itemCount: _messages.length,
),
)

目前我只能使用以下地图显示收到的消息

new Flexible(
child: Column(
children: list.map((receivedMessage) => Text(receivedMessage)).toList(),
),
),

拜托，我需要一种方法来使其显示在列表视图生成器中。

目前的结果

Answer 1

与其为发送和接收的消息保留两个单独的列表，为什么不只为两者保留一个 ChatMessageListItem 列表呢？您可以使用名为 type： 已发送或已接收的属性来区分它们，以便您可以确定在 ListView 的左侧或右侧显示不同的颜色等。当收到消息时，将其添加到列表中。现在，您的列表视图可以处理这两种类型的消息。

WebSocketChannel channel;
//final List<String> list = []; //Remove this line
final List<ChatMessageListItem> _messages = <ChatMessageListItem>[];
TextEditingController _textController;
bool _isComposing = false;
@override
void initState() {
super.initState();
channel = IOWebSocketChannel.connect('ws://echo.websocket.org');
_textController = TextEditingController();
channel.stream.listen((receivedMessage){
setState(() {
_messages.insert(0, new ChatMessageListItem(message: receivedMessage, type: MessageType.received));
//list.add(receivedMessage);
});
});
}