Flutter即时通讯UI插件nim_conversationkit_ui的使用

Flutter即时通讯UI插件nim_conversationkit_ui的使用

提供会话功能实现(包含UI)

声明依赖

如需添加 ConversationKitUI 的依赖项,您必须将 pub 库添加到项目中。

在应用或模块的 pubspec.yaml 文件中添加所需的依赖项:

dependencies:
  nim_conversationkit_ui: ^1.0.0

完整示例代码

以下是一个完整的示例代码,展示如何在 Flutter 项目中使用 nim_conversationkit_ui 插件来实现会话功能。

步骤 1: 添加依赖

首先,在项目的 pubspec.yaml 文件中添加 nim_conversationkit_ui 依赖项:

dependencies:
  nim_conversationkit_ui: ^1.0.0

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

flutter pub get

步骤 2: 导入必要的包

在您的 Dart 文件中导入 nim_conversationkit_ui 包:

import 'package:nim_conversationkit_ui/nim_conversationkit_ui.dart';

步骤 3: 初始化插件

在使用 nim_conversationkit_ui 之前,您需要初始化插件。通常,这会在应用程序的入口文件中完成。例如,在 main.dart 文件中:

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ConversationPage(),
    );
  }
}

步骤 4: 使用 ConversationKitUI

在您的页面中使用 ConversationKitUI 来显示会话列表。以下是一个简单的示例:

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

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

class _ConversationPageState extends State<ConversationPage> {
  // 模拟会话数据
  final List<Map<String, dynamic>> conversations = [
    {"name": "Alice", "message": "Hello!", "time": "10:00"},
    {"name": "Bob", "message": "Hi there!", "time": "11:00"},
    {"name": "Charlie", "message": "How are you?", "time": "12:00"},
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("会话列表"),
      ),
      body: ListView.builder(
        itemCount: conversations.length,
        itemBuilder: (context, index) {
          return ListTile(
            leading: CircleAvatar(child: Text("${index + 1}")),
            title: Text(conversations[index]['name']),
            subtitle: Text(conversations[index]['message']),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ChatPage(
                    name: conversations[index]['name'],
                    message: conversations[index]['message'],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class ChatPage extends StatelessWidget {
  final String name;
  final String message;

  ChatPage({required this.name, required this.message});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(name),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Last Message:"),
            Text(message),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter即时通讯UI插件nim_conversationkit_ui的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter即时通讯UI插件nim_conversationkit_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


nim_conversationkit_ui 是网易云信(Netease YunXin)提供的一个用于 Flutter 的即时通讯 UI 插件,它集成了会话列表、聊天界面等常用 UI 组件,方便开发者快速构建即时通讯应用。以下是使用 nim_conversationkit_ui 的基本步骤和示例代码。

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 nim_conversationkit_ui 的依赖:

dependencies:
  flutter:
    sdk: flutter
  nim_conversationkit_ui: ^latest_version

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

2. 初始化 SDK

在使用 nim_conversationkit_ui 之前,需要先初始化网易云信的 SDK。通常在你的 main.dart 文件中进行初始化:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化网易云信 SDK
  await NimCore.instance.init(
    appKey: 'your_app_key',
    apnsCername: 'your_apns_certificate_name', // 如果需要推送功能
  );

  runApp(MyApp());
}

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

3. 使用 nim_conversationkit_ui 组件

nim_conversationkit_ui 提供了会话列表和聊天界面的现成组件,可以直接使用。

会话列表

你可以使用 ConversationListPage 来展示会话列表:

import 'package:flutter/material.dart';
import 'package:nim_conversationkit_ui/conversation_list_page.dart';

class ConversationListPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('会话列表'),
      ),
      body: ConversationListPage(), // 使用会话列表组件
    );
  }
}

聊天界面

你可以使用 ChatPage 来展示聊天界面:

import 'package:flutter/material.dart';
import 'package:nim_conversationkit_ui/chat_page.dart';

class ChatPage extends StatelessWidget {
  final String sessionId;

  ChatPage({required this.sessionId});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('聊天'),
      ),
      body: ChatPage(
        sessionId: sessionId, // 会话 ID
        sessionType: NIMSessionType.p2p, // 会话类型,如 P2P 或 Team
      ),
    );
  }
}

4. 导航到聊天界面

在会话列表中点击某个会话时,通常会导航到聊天界面。你可以通过 Navigator 来实现:

import 'package:flutter/material.dart';
import 'package:nim_conversationkit_ui/conversation_list_page.dart';
import 'chat_page.dart';

class ConversationListPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('会话列表'),
      ),
      body: ConversationListPage(
        onItemClick: (sessionId, sessionType) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => ChatPage(
                sessionId: sessionId,
                sessionType: sessionType,
              ),
            ),
          );
        },
      ),
    );
  }
}
回到顶部