Flutter聊天界面插件conversationkit_ui的使用

conversationkit_ui 是一个用于构建聊天界面的 Flutter 插件。它提供了一套预定义的 UI 组件，帮助开发者快速实现聊天功能。以下是如何使用 conversationkit_ui 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  conversationkit_ui: ^latest_version

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

2. 导入包

在你的 Dart 文件中导入 conversationkit_ui：

import 'package:conversationkit_ui/conversationkit_ui.dart';

3. 使用 ConversationKitUI 组件

conversationkit_ui 提供了 ConversationKitUI 组件，你可以直接使用它来构建聊天界面。

class ChatScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: ConversationKitUI(
        messages: [
          Message(
            id: '1',
            text: 'Hello!',
            sender: 'User1',
            timestamp: DateTime.now(),
          ),
          Message(
            id: '2',
            text: 'Hi there!',
            sender: 'User2',
            timestamp: DateTime.now(),
          ),
        ],
        onSend: (String text) {
          // Handle sending message
          print('Message sent: $text');
        },
      ),
    );
  }
}

4. 自定义消息

你可以通过自定义 Message 类来扩展消息的类型和内容。例如，添加图片、视频等。

class CustomMessage extends Message {
  final String imageUrl;

  CustomMessage({
    required String id,
    required String text,
    required String sender,
    required DateTime timestamp,
    required this.imageUrl,
  }) : super(id: id, text: text, sender: sender, timestamp: timestamp);
}

5. 自定义消息气泡

你可以通过 messageBuilder 参数来自定义消息气泡的显示方式。

ConversationKitUI(
  messages: [
    Message(
      id: '1',
      text: 'Hello!',
      sender: 'User1',
      timestamp: DateTime.now(),
    ),
  ],
  onSend: (String text) {
    // Handle sending message
    print('Message sent: $text');
  },
  messageBuilder: (BuildContext context, Message message) {
    return Container(
      padding: EdgeInsets.all(8.0),
      margin: EdgeInsets.symmetric(vertical: 4.0),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Text(
        message.text,
        style: TextStyle(color: Colors.white),
      ),
    );
  },
);

6. 处理发送消息

onSend 回调函数用于处理用户发送的消息。你可以在这里将消息添加到消息列表中，或者发送到服务器。

ConversationKitUI(
  messages: _messages,
  onSend: (String text) {
    setState(() {
      _messages.add(Message(
        id: DateTime.now().toString(),
        text: text,
        sender: 'Me',
        timestamp: DateTime.now(),
      ));
    });
  },
);

7. 其他功能

conversationkit_ui 还提供了其他功能，如消息时间戳、用户头像、消息状态（已读、未读）等。你可以根据需要进行配置。

8. 运行项目

完成上述步骤后，运行你的 Flutter 项目，你应该能够看到一个功能齐全的聊天界面。

9. 进一步定制

如果你需要更高级的定制，可以查看 conversationkit_ui 的源码，并根据需要进行修改。

10. 参考文档

更多详细的使用方法和 API 文档，请参考 conversationkit_ui 的官方文档或 GitHub 仓库。

示例代码

以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:conversationkit_ui/conversationkit_ui.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chat',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  [@override](/user/override)
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  List<Message> _messages = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: ConversationKitUI(
        messages: _messages,
        onSend: (String text) {
          setState(() {
            _messages.add(Message(
              id: DateTime.now().toString(),
              text: text,
              sender: 'Me',
              timestamp: DateTime.now(),
            ));
          });
        },
      ),
    );
  }
}