Flutter聊天列表构建插件flutter_chat_list_builder的使用

简介

flutter_chat_list_builder 是一个用于构建聊天消息列表的 Flutter 插件。该插件专注于实现聊天列表的滚动行为，例如加载历史消息或保持当前阅读位置不变。它不负责 UI 的样式（如气泡布局），开发者可以自由定义消息的显示方式。

特性

• 支持从底部加载历史消息。
• 当用户不在列表底部时，添加新消息不会自动滚动到最新消息。

开始使用

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_chat_list_builder: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

2. 导入包

在需要使用的地方导入：

import 'package:flutter_chat_list_builder/flutter_chat_list_builder.dart';

使用示例

示例代码

以下是一个完整的聊天页面示例，展示如何使用 flutter_chat_list_builder 构建聊天列表。

class Message {
  final int ind;
  Message(this.ind);
  final String _text = generateWordPairs().take(1).first.asCamelCase;
  final bool isMeSend = Random().nextBool();

  String get text => ind.toString() + _text;
}

class ChatPage extends StatelessWidget {
  const ChatPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 创建聊天控制器
    ChatListController<Message> controller = ChatListController<Message>();

    return Scaffold(
      appBar: AppBar(
        title: const Text("Chat Page"),
      ),
      body: ChatListBuilder<Message>(
        // 加载历史消息的逻辑
        loadHistory: () async {
          return Future.delayed(const Duration(seconds: 2), () {
            return LoadHistoryResponse(
              isHasMore: true, // 是否还有更多历史消息
              data: List.generate(30, (index) => Message(index)), // 模拟加载的历史消息
            );
          });
        },
        // 加载时的背景颜色
        loadingBackgroundColor: Colors.white,
        // 消息项的构建器
        itemBuilder: (_, element) {
          if (element.isMeSend) {
            return Row(
              textDirection: TextDirection.rtl,
              children: [
                Container(
                  margin: const EdgeInsets.all(10),
                  padding: const EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: Colors.green[400], // 我发送的消息颜色
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Text(element.text),
                )
              ],
            );
          } else {
            return Row(
              children: [
                Container(
                  margin: const EdgeInsets.all(10),
                  padding: const EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: Colors.yellow[400], // 对方发送的消息颜色
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Text(element.text),
                )
              ],
            );
          }
        },
        // 聊天列表控制器
        controller: controller,
      ),
      // 底部按钮用于发送新消息
      persistentFooterButtons: [
        ElevatedButton(
          onPressed: () {
            controller.addNewMessage(Message(999)); // 添加一条新消息
          },
          child: const Text('New Message'),
        ),
      ],
    );
  }
}

关键功能详解

1. 加载历史消息

通过 loadHistory 回调函数实现历史消息的加载。每次调用时，返回一个包含历史消息的 LoadHistoryResponse 对象。

loadHistory: () async {
  return Future.delayed(const Duration(seconds: 2), () {
    return LoadHistoryResponse(
      isHasMore: true, // 是否还有更多历史消息
      data: List.generate(30, (index) => Message(index)), // 模拟加载的历史消息
    );
  });
},

2. 消息项构建

通过 itemBuilder 自定义每条消息的显示样式。这里根据消息的发送者（isMeSend）来决定消息的颜色和方向。

itemBuilder: (_, element) {
  if (element.isMeSend) {
    return Row(
      textDirection: TextDirection.rtl,
      children: [
        Container(
          margin: const EdgeInsets.all(10),
          padding: const EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: Colors.green[400],
            borderRadius: BorderRadius.circular(15),
          ),
          child: Text(element.text),
        )
      ],
    );
  } else {
    return Row(
      children: [
        Container(
          margin: const EdgeInsets.all(10),
          padding: const EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: Colors.yellow[400],
            borderRadius: BorderRadius.circular(15),
          ),
          child: Text(element.text),
        )
      ],
    );
  }
},

3. 添加新消息

通过 controller.addNewMessage() 方法向聊天列表中添加新消息。

ElevatedButton(
  onPressed: () {
    controller.addNewMessage(Message(999)); // 添加一条新消息
  },
  child: const Text('New Message'),
),