Flutter即时通讯UI组件插件light_im_uikit的使用

本文将介绍如何在Flutter项目中使用light_im_uikit插件来快速构建一个即时通讯应用。通过简单的配置和代码实现，您可以轻松集成聊天功能到您的应用中。

环境准备

在开始之前，请确保您的开发环境已正确配置：

1. 安装Flutter SDK。
2. 配置好Dart环境。
3. 准备好后端服务（例如IM服务器），并获取相应的endpoint和token信息。

1. 添加依赖

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

dependencies:
  light_im_uikit: ^1.0.0 # 请根据实际版本号进行替换

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

flutter pub get

2. 初始化插件

在应用启动时初始化light_im_uikit，并完成登录操作。以下是初始化的代码示例：

import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:light_im_uikit/light_im_uikit.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 确保Flutter绑定完成

  // 初始化插件，传入后端服务的endpoint
  LightIMUIKit.init(endpoint: '127.0.0.1:8080/api/c');

  // 登录用户，传入userId和token
  await LightIMUIKit.login(
    userId: '1', // 用户ID
    token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...YourToken...', // 用户登录Token
  );

  runApp(const App()); // 启动应用
}

3. 构建聊天界面

在应用中，我们可以通过LimConversationPage和LimChatPage两个主要页面来实现聊天功能。

3.1 会话列表页面

LimConversationPage用于展示用户的会话列表。点击某一会话可以跳转到具体的聊天页面。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LimConversationPage(
      title: const Text('会话列表'), // 设置页面标题
      onTapItem: (conv) { // 点击会话回调
        Navigator.push(
          context,
          CupertinoPageRoute(
            builder: (BuildContext context) => LimChatPage(conversation: conv), // 跳转到聊天页面
          ),
        );
      },
    );
  }
}

3.2 聊天页面

LimChatPage用于展示具体的聊天内容。传入conversation对象即可加载对应的聊天记录。

class LimChatPage extends StatelessWidget {
  final dynamic conversation;

  const LimChatPage({required this.conversation, super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(conversation.name ?? '未知会话'), // 设置聊天窗口标题
      ),
      body: LimChatBody( // 加载聊天内容
        conversationId: conversation.id,
      ),
    );
  }
}

4. 自定义滚动行为

为了支持触摸和鼠标拖动交互，我们可以自定义滚动行为。以下是自定义滚动行为的代码：

class _CustomScrollBehavior extends MaterialScrollBehavior {
  [@override](/user/override)
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

在MaterialApp中应用此滚动行为：

MaterialApp(
  title: 'Light IM UIKit',
  home: const HomePage(),
  scrollBehavior: _CustomScrollBehavior(), // 应用自定义滚动行为
);

5. 完整示例代码

以下是完整的示例代码，您可以直接复制并在项目中运行：

import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:light_im_uikit/light_im_uikit.dart';

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

  LightIMUIKit.init(endpoint: '127.0.0.1:8080/api/c');
  await LightIMUIKit.login(
    userId: '1',
    token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...YourToken...',
  );

  runApp(const App());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Light IM UIKit',
      home: const HomePage(),
      scrollBehavior: _CustomScrollBehavior(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LimConversationPage(
      title: const Text('会话列表'),
      onTapItem: (conv) {
        Navigator.push(
          context,
          CupertinoPageRoute(
            builder: (BuildContext context) => LimChatPage(conversation: conv),
          ),
        );
      },
    );
  }
}

class _CustomScrollBehavior extends MaterialScrollBehavior {
  [@override](/user/override)
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}