Flutter聊天消息管理插件chat_message_c3的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter聊天消息管理插件chat_message_c3的使用

本文将详细介绍如何使用Flutter聊天消息管理插件chat_message_c3。通过本教程，您可以快速上手并掌握该插件的基本功能。

Features

chat_message_c3 插件提供了以下主要功能：

  • 管理聊天消息列表。
  • 支持加载更多历史消息。
  • 自定义消息样式。
  • 消息点击和长按事件处理。

Getting Started

在开始使用之前，请确保您的项目已安装chat_message_c3插件。可以通过pubspec.yaml文件添加依赖：

dependencies:
  chat_message_c3: ^版本号

然后运行以下命令以获取最新版本：

flutter pub get

Usage

以下是使用chat_message_c3插件的完整示例代码。

示例代码说明

我们将创建一个简单的聊天界面，包含以下功能：

  1. 初始化聊天消息列表。
  2. 发送新消息。
  3. 加载更多历史消息。
  4. 自定义消息样式。

完整代码示例

import 'package:chat_message_c3/core/chat_controller.dart';
import 'package:chat_message_c3/models/message_model.dart';
import 'package:chat_message_c3/widget/chat_list_widget.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'ChatMessage Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int count = 0;
  final List<MessageModel> _messageList = [
    MessageModel(
      ownerType: OwnerType.receiver,
      content: 'ChatGPT是由OpenAI开发出的智能聊天机器人程序',
      createAt: 1772058683000,
      id: 2,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
      ownerName: 'ChatGPT',
    ),
    MessageModel(
      ownerType: OwnerType.receiver,
      content: '介绍一下ChatGPT',
      createAt: 1771058683000,
      id: 1,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx18.jpeg',
      ownerName: 'Imooc',
    )
  ];
  late ChatController chatController;

  @override
  void initState() {
    super.initState();
    chatController = ChatController(
      initialMessageList: _messageList,
      scrollController: ScrollController(),
      timePellet: 60,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            child: ChatList(
              chatController: chatController,
              onBubbleTap: (MessageModel message, BuildContext context) {
                debugPrint('onBubbleTap: ${message.content}');
              },
              onBubbleLongPress: (MessageModel message, BuildContext context) {
                debugPrint('onBubbleLongPress: ${message.content}');
              },
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              ElevatedButton(
                onPressed: _loadMore,
                child: const Text('加载更多'),
              ),
              ElevatedButton(
                onPressed: _send,
                child: const Text('发送'),
              ),
            ],
          ),
          const SizedBox(height: 20),
        ],
      ),
    );
  }

  void _send() {
    chatController.addMessage(
      MessageModel(
        ownerType: OwnerType.sender,
        content: 'Hello ${count++}',
        createAt: DateTime.now().millisecondsSinceEpoch,
        avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
        ownerName: 'Imooc',
      ),
    );
    Future.delayed(
      const Duration(milliseconds: 2000),
      () {
        chatController.addMessage(
          MessageModel(
            ownerType: OwnerType.receiver,
            content: 'Nice',
            createAt: DateTime.now().millisecondsSinceEpoch,
            avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
            ownerName: 'ChatGPT',
          ),
        );
      },
    );
  }

  int _counter = 0;
  void _loadMore() {
    var tl = 1772058683000;
    tl = tl - ++_counter * 1000000;
    final List<MessageModel> messageList = [
      MessageModel(
        ownerType: OwnerType.sender,
        content: 'Hello ${_counter++}',
        createAt: DateTime.now().millisecondsSinceEpoch,
        avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
        ownerName: 'Imooc',
      ),
      MessageModel(
        ownerType: OwnerType.receiver,
        content: 'Nice',
        createAt: DateTime.now().millisecondsSinceEpoch,
        avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
        ownerName: 'ChatGPT',
      ),
    ];
    chatController.loadMoreData(messageList);
  }
}

代码详解

1. 初始化聊天控制器

late ChatController chatController;

@override
void initState() {
  super.initState();
  chatController = ChatController(
    initialMessageList: _messageList,
    scrollController: ScrollController(),
    timePellet: 60,
  );
}
  • ChatController 是核心类，用于管理聊天消息列表。
  • initialMessageList：初始化消息列表。
  • scrollController：控制滚动行为。
  • timePellet：时间戳间隔（单位为秒）。

2. 聊天列表渲染

Expanded(
  child: ChatList(
    chatController: chatController,
    onBubbleTap: (MessageModel message, BuildContext context) {
      debugPrint('onBubbleTap: ${message.content}');
    },
    onBubbleLongPress: (MessageModel message, BuildContext context) {
      debugPrint('onBubbleLongPress: ${message.content}');
    },
  ),
)
  • ChatList 是聊天消息列表的组件。
  • onBubbleTap 和 onBubbleLongPress 分别处理消息点击和长按事件。

3. 发送消息

ElevatedButton(
  onPressed: _send,
  child: const Text('发送'),
)
void _send() {
  chatController.addMessage(
    MessageModel(
      ownerType: OwnerType.sender,
      content: 'Hello ${count++}',
      createAt: DateTime.now().millisecondsSinceEpoch,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
      ownerName: 'Imooc',
    ),
  );
  Future.delayed(
    const Duration(milliseconds: 2000),
    () {
      chatController.addMessage(
        MessageModel(
          ownerType: OwnerType.receiver,
          content: 'Nice',
          createAt: DateTime.now().millisecondsSinceEpoch,
          avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
          ownerName: 'ChatGPT',
        ),
      );
    },
  );
}
  • 使用 addMessage 方法向消息列表中添加新的消息。
  • 支持发送者和接收者的消息类型。

4. 加载更多历史消息

ElevatedButton(
  onPressed: _loadMore,
  child: const Text('加载更多'),
)
void _loadMore() {
  var tl = 1772058683000;
  tl = tl - ++_counter * 1000000;
  final List<MessageModel> messageList = [
    MessageModel(
      ownerType: OwnerType.sender,
      content: 'Hello ${_counter++}',
      createAt: DateTime.now().millisecondsSinceEpoch,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
      ownerName: 'Imooc',
    ),
    MessageModel(
      ownerType: OwnerType.receiver,
      content: 'Nice',
      createAt: DateTime.now().millisecondsSinceEpoch,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
      ownerName: 'ChatGPT',
    ),
  ];
  chatController.loadMoreData(messageList);
}

更多关于Flutter聊天消息管理插件chat_message_c3的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter聊天消息管理插件chat_message_c3的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


chat_message_c3 是一个用于 Flutter 的聊天消息管理插件，它可以帮助开发者快速构建聊天界面，并提供了一些常用的功能，如消息发送、接收、显示、滚动等。以下是如何使用 chat_message_c3 插件的简要指南。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 chat_message_c3 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  chat_message_c3: ^1.0.0  # 请根据实际情况使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 chat_message_c3 插件：

import 'package:chat_message_c3/chat_message_c3.dart';

3. 使用 ChatMessageC3 组件

ChatMessageC3 是一个用于显示聊天消息的组件。你可以通过传递消息列表来显示聊天记录。

class ChatScreen extends StatelessWidget {
  final List<ChatMessage> messages = [
    ChatMessage(
      id: '1',
      text: 'Hello!',
      sender: 'User1',
      timestamp: DateTime.now(),
    ),
    ChatMessage(
      id: '2',
      text: 'Hi there!',
      sender: 'User2',
      timestamp: DateTime.now(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: ChatMessageC3(
        messages: messages,
        onSendMessage: (String text) {
          // 处理发送消息的逻辑
          final newMessage = ChatMessage(
            id: '3',
            text: text,
            sender: 'User1',
            timestamp: DateTime.now(),
          );
          messages.add(newMessage);
        },
      ),
    );
  }
}

4. 自定义消息显示

你可以通过 messageBuilder 参数来自定义每条消息的显示方式。例如：

ChatMessageC3(
  messages: messages,
  onSendMessage: (String text) {
    // 处理发送消息的逻辑
  },
  messageBuilder: (BuildContext context, ChatMessage message) {
    return ListTile(
      title: Text(message.sender),
      subtitle: Text(message.text),
      trailing: Text(message.timestamp.toString()),
    );
  },
);

5. 处理发送消息

ChatMessageC3 提供了一个 onSendMessage 回调函数，当用户发送消息时会触发这个回调。你可以在这个回调中处理消息的发送逻辑，并将新消息添加到消息列表中。

onSendMessage: (String text) {
  final newMessage = ChatMessage(
    id: '3',
    text: text,
    sender: 'User1',
    timestamp: DateTime.now(),
  );
  messages.add(newMessage);
},
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！