Flutter for OpenHarmony

1. 插件介绍

testchat是一款为OpenHarmony平台适配的Flutter跨平台聊天组件，提供了完整的即时通讯界面解决方案。该组件基于Flutter框架开发，通过OpenHarmony原生适配，实现了高效稳定的聊天功能，适用于各种即时通讯类应用开发。

核心功能

  • 多用户聊天界面：支持多用户聊天，每个用户拥有独立的头像和消息样式
  • 无限滚动列表：实现了高效的无限滚动聊天列表，支持快速加载和流畅滑动
  • 随机消息生成：内置随机消息生成功能，便于开发和测试
  • OpenHarmony原生适配：完美适配OpenHarmony API 9+，支持鸿蒙设备的各种特性

OpenHarmony适配亮点

  • API兼容性：完全兼容OpenHarmony API 9+，支持鸿蒙手机、平板等多种设备
  • 资源本地化：支持中英文本地化，可根据系统语言自动切换
  • 原生能力集成：通过EntryAbility.ets实现与鸿蒙系统能力的深度集成
  • 资源优化：针对鸿蒙平台进行了资源优化，提供高效的性能体验

2. 环境设置

系统要求

  • OpenHarmony API: 9+
  • Flutter SDK: 3.0+
  • Dart SDK: >=2.19.6 ❤️.0.0

安装与配置

  1. 创建Flutter项目

    flutter create my_chat_app
cd my_chat_app

  2. 添加依赖

    在项目的pubspec.yaml文件中添加testchat依赖：

dependencies:
flutter:
sdk: flutter
testchat:
git:
url: “https://atomgit.com/flutter/plugins”
path: “packages/testchat/testchat”
cupertino_icons: ^1.0.2
english_words: ^4.0.0


3. **安装依赖**

   ```bash
   flutter pub get

  1. 配置OpenHarmony资源

    确保在ohos/entry/src/main/module.json5中配置了必要的资源权限：

    {
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "testchat示例应用",
    "mainElement": "EntryAbility",
    "deviceTypes": ["phone", "tablet"],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry"
    },
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "主入口能力",
        "icon": "$media:icon",
        "label": "testchat",
        "type": "page",
        "launchType": "standard"
      }
    ]
  }
}

3. API使用示例

3.1 基本聊天界面

testchat提供了简洁易用的聊天界面组件，只需几行代码即可实现完整的聊天功能。

示例代码：

import 'package:flutter/material.dart';
import 'package:testchat/pages/chat_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "test chat",
        theme: ThemeData(primaryColor: Colors.blue),
        home: const Scaffold(
                body: ChatPage(),
        ));
  }
}

3.2 多用户聊天功能

testchat支持多用户聊天，每个用户拥有独立的头像和消息样式。系统会自动根据消息索引分配不同的用户样式。

核心实现：

// 在chat_page.dart中根据索引分配不同用户的聊天样式
return ListTile(title: 
  index % 5 == 0 ? 
    ChatC(id: index) : 
    (index % 2 == 0 ? 
      ChatA(text: "$index : ${_words[index]} : ${generateRandomString()}") : 
      ChatB(text:"$index : ${_words[index]} : ${generateRandomString()}"))
);

3.3 自定义聊天消息样式

您可以根据需要自定义聊天消息的样式，包括颜色、字体、背景等。

示例：

// 自定义聊天消息样式（ChatA组件）
class ChatA extends StatelessWidget {
  const ChatA({Key? key, required this.text}) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(6.0, 2, 10.0, 2),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          const Flexible(
            child: CircleAvatar(
                radius: 25,
                backgroundColor: Colors.white,
                backgroundImage: AssetImage("assets/images/chat_a.png")
            ),
          ),
          const Padding(padding: EdgeInsets.fromLTRB(2, 0, 2, 0)),
          Flexible(
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: const Color.fromARGB(255, 205, 155, 29),
                borderRadius: BorderRadius.circular(16),
              ),
              child: Padding(
                padding: const EdgeInsets.all(12),
                child: Text(
                  text,
                  style: const TextStyle(
                    fontSize: 14,
                    color: Color.fromARGB(255, 48, 14, 43),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

3.4 无限滚动聊天列表

testchat实现了高效的无限滚动聊天列表，支持大量消息的快速加载和流畅滑动。

核心实现：

// 在chat_page.dart中实现无限滚动列表
@override
Widget build(BuildContext context) {
  return ListView.separated(
    itemCount: _words.length,
    itemBuilder: (context, index) {
      //如果到了表尾
      if (_words[index] == loadingTag) {
        //不足10000条，继续获取数据
        if (_words.length - 1 < 10000) {
          //获取数据
          _retrieveData();
          //加载时显示loading
          return Container(
            padding: const EdgeInsets.all(16.0),
            alignment: Alignment.center,
            child: SizedBox(
              width: 24.0,
              height: 24.0,
              child: CircularProgressIndicator(strokeWidth: 2.0),
            ),
          );
        } else {
          //已经加载了10000条数据，不再获取数据
          return Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(16.0),
            child: Text(
              "没有更多了",
              style: TextStyle(color: Colors.grey),
            ),
          );
        }
      }
      //显示聊天消息
      return ListTile(title: 
        index % 5 == 0 ? 
          ChatC(id: index) : 
          (index % 2 == 0 ? 
            ChatA(text: "$index : ${_words[index]} : ${generateRandomString()}") : 
            ChatB(text:"$index : ${_words[index]} : ${generateRandomString()}"))
      );
    },
    separatorBuilder: (context, index) => Divider(height: .0, color: Color.fromARGB(255, 255, 255, 255)),
  );
}

// 加载更多数据
void _retrieveData() {
  Future.delayed(Duration(seconds: 1)).then((e) {
    setState(() {
      //重新构建列表
      _words.insertAll(
        _words.length - 1,
        generateWordPairs().take(1000).map((e) => e.asPascalCase).toList(),
      );
    });
  });
}

4. 代码示例

完整聊天应用示例

// main.dart
import 'package:flutter/material.dart';
import 'package:testchat/pages/chat_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "test chat",
        theme: ThemeData(primaryColor: Colors.blue),
        home: const Scaffold(
                body: ChatPage(),
        ));
  }
}

自定义聊天用户组件

// chat_members/chat_b.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ChatB extends StatelessWidget {
  const ChatB({Key? key, required this.text}) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(10.0, 2, 6.0, 2),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Flexible(
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: const Color.fromARGB(255, 147, 229, 166),
                borderRadius: BorderRadius.circular(16),
              ),
              child: Padding(
                padding: const EdgeInsets.all(12),
                child: Text(
                  text,
                  style: const TextStyle(
                    fontSize: 14,
                    color: Color.fromARGB(255, 14, 48, 23),
                  ),
                ),
              ),
            ),
          ),
          const Padding(padding: EdgeInsets.fromLTRB(2, 0, 2, 0)),
          const Flexible(
            child: CircleAvatar(
                radius: 25,
                backgroundColor: Colors.white,
                backgroundImage: AssetImage("assets/images/chat_b.png")
            ),
          ),
        ],
      ),
    );
  }
}

5. 总结

testchat是一款功能完整、易于使用的Flutter跨平台聊天组件，专为OpenHarmony平台进行了深度适配。通过本文的介绍，您已经了解了testchat的核心功能、环境设置和API使用方法。

该组件提供了：

  • 简洁易用的聊天界面
  • 多用户聊天支持
  • 高效的无限滚动列表
  • 完美的OpenHarmony平台适配

使用testchat组件，您可以快速开发出高质量的即时通讯应用，满足各种业务需求。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

# flutter # harmonyos # 华为
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

HarmonyOS 分布式开发第一课：设备间协同调试实战

avatar 人工智能6S服务平台
cover

Flutter跨平台外接纹理首帧鸿蒙化定制指南

avatar 人工智能6S服务平台
cover

不写 Socket，也能做远程任务？HarmonyOS 分布式任务同步实战

avatar 人工智能6S服务平台