Flutter聊天消息展示插件zhonglvshiqi_chat_message的使用

Flutter聊天消息展示插件zhonglvshiqi_chat_message的使用

特性

（此处省略特性描述）

开始使用

1. 添加依赖

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

dependencies:
  chat_message: ^版本号

然后运行以下命令以更新依赖项：

flutter pub get

使用示例

以下是一个完整的示例，展示如何使用 zhonglvshiqi_chat_message 插件来实现聊天消息的展示。

示例代码

main.dart

import 'package:chat_message/core/chat_controller.dart';
import 'package:chat_message/model/message_model.dart';
import 'package:chat_message/widget/chat_list_widget.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat Message',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Chat Message Example'),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late ChatController chatController;
  int count = 0;

  // 初始化消息列表
  final List<MessageModel> _messageList = [
    MessageModel(
      ownerType: OwnerType.receiver,
      ownerName: 'ChatGPT',
      content:
          '测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，',
      createdAt: 1771058682999,
      id: 8,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
    ),
    MessageModel(
      ownerType: OwnerType.sender,
      content: '介绍一下ChatGPT',
      createdAt: 1771058683000,
      id: 1,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx18.jpeg',
      ownerName: 'Imooc',
    ),
    MessageModel(
      ownerType: OwnerType.receiver,
      ownerName: 'ChatGPT',
      content:
          '测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，',
      createdAt: 1771058682999,
      id: 2,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
    ),
    MessageModel(
      ownerType: OwnerType.sender,
      content: '介绍一下ChatGPT',
      createdAt: 1771058683000,
      id: 3,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx18.jpeg',
      ownerName: 'Imooc',
    ),
    MessageModel(
      ownerType: OwnerType.receiver,
      ownerName: 'ChatGPT',
      content:
          '测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，',
      createdAt: 1771058682999,
      id: 4,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
    ),
    MessageModel(
      ownerType: OwnerType.sender,
      content: '介绍一下ChatGPT',
      createdAt: 1771058683000,
      id: 5,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx18.jpeg',
      ownerName: 'Imooc',
    ),
    MessageModel(
      ownerType: OwnerType.receiver,
      ownerName: 'ChatGPT',
      content:
          '测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，测试数据，',
      createdAt: 1771058682999,
      id: 6,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
    ),
    MessageModel(
      ownerType: OwnerType.sender,
      content: '介绍一下ChatGPT',
      createdAt: 1771058683000,
      id: 7,
      avatar: 'https://o.devio.org/images/o_as/avatar/tx18.jpeg',
      ownerName: 'Imooc',
    ),
  ];

  // 滚动控制器
  final scrollController = ScrollController();

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

  [@override](/user/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 ancestor) {
                debugPrint('onBubbleTap:${message.content}');
              },
              onBubbleLongPress: (MessageModel message, BuildContext ancestor) {
                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),
        ],
      ),
    );
  }

  int _counter = 0;

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

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

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

1 回复

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


zhonglvshiqi_chat_message 是一个用于在 Flutter 应用中展示聊天消息的插件。它提供了丰富的功能，可以帮助开发者快速构建聊天界面。以下是如何使用这个插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  zhonglvshiqi_chat_message: ^1.0.0  # 请使用最新版本

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

2. 导入插件

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

import 'package:zhonglvshiqi_chat_message/zhonglvshiqi_chat_message.dart';

3. 使用 ChatMessage 组件

zhonglvshiqi_chat_message 提供了一个 ChatMessage 组件，你可以使用它来展示聊天消息。以下是一个简单的示例：

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('聊天'),
      ),
      body: ListView.builder(
        itemCount: messages.length,
        itemBuilder: (context, index) {
          return ChatMessage(
            message: messages[index],
            isMe: messages[index].isMe,
          );
        },
      ),
    );
  }
}

class Message {
  final String text;
  final bool isMe;

  Message({required this.text, required this.isMe});
}

List<Message> messages = [
  Message(text: '你好！', isMe: false),
  Message(text: '你好，最近怎么样？', isMe: true),
  Message(text: '我很好，谢谢！', isMe: false),
];

4. 自定义消息样式

你可以通过 ChatMessage 组件的参数来自定义消息的样式。例如，你可以设置消息的背景颜色、文本样式、头像等。

ChatMessage(
  message: messages[index],
  isMe: messages[index].isMe,
  backgroundColor: messages[index].isMe ? Colors.blue : Colors.grey,
  textStyle: TextStyle(
    color: messages[index].isMe ? Colors.white : Colors.black,
  ),
  avatar: CircleAvatar(
    backgroundImage: AssetImage(messages[index].isMe ? 'assets/me.png' : 'assets/other.png'),
  ),
);

5. 处理消息点击事件

你可以通过 onTap 参数来处理消息的点击事件：

ChatMessage(
  message: messages[index],
  isMe: messages[index].isMe,
  onTap: () {
    print('消息被点击了: ${messages[index].text}');
  },
);

6. 其他功能

zhonglvshiqi_chat_message 还提供了其他功能，例如消息时间戳、消息状态（已读/未读）、消息类型（文本、图片、语音等）。你可以根据需求进一步探索和使用这些功能。

7. 运行应用

完成上述步骤后，你可以运行你的 Flutter 应用，查看聊天消息的展示效果。

flutter run
回到顶部