Flutter聊天室列表展示插件kakao_chatroom_list的使用

Installation

以下是安装和运行 kakao_chatroom_list 插件的步骤：

1. 如果你还没有创建 juneflow 项目，请按照以下指南创建：

   • Juneflow 创建指南。

2. 在 juneflow 项目的根目录下打开终端，并输入以下命令来添加插件：

   june add kakao_chatroom_list
   

3. 启动项目时，使用以下命令运行：

   flutter run lib/app/_/_/interaction/view.blueprint/page/kakao_chatroom_list/_/view.dart -d chrome
   

Screenshots

以下是该插件在运行时的截图：

完整示例代码

以下是一个完整的示例代码，展示如何使用 kakao_chatroom_list 插件来展示聊天室列表：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kakao Chatroom List Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatroomListPage(),
    );
  }
}

class ChatroomListPage extends StatefulWidget {
  @override
  _ChatroomListPageState createState() => _ChatroomListPageState();
}

class _ChatroomListPageState extends State<ChatroomListPage> {
  // 假设我们有一个聊天室列表数据源
  final List<String> chatroomNames = [
    "聊天室 A",
    "聊天室 B",
    "聊天室 C",
    "聊天室 D",
    "聊天室 E",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kakao 聊天室列表'),
      ),
      body: KakaoChatroomList(
        chatroomNames: chatroomNames, // 将聊天室名称传递给插件
        onChatroomSelected: (index) {
          // 点击聊天室时触发的回调函数
          print("选中了第 $index 个聊天室");
        },
      ),
    );
  }
}

代码说明

1. 导入插件：

   import 'package:kakao_chatroom_list/kakao_chatroom_list.dart';
   

   导入 kakao_chatroom_list 插件以使用聊天室列表功能。

2. 主应用结构：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Kakao Chatroom List Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: ChatroomListPage(),
       );
     }
   }
   

   主应用结构包含一个 MaterialApp 和一个主页 ChatroomListPage。

3. 聊天室列表页面：

   class ChatroomListPage extends StatefulWidget {
     @override
     _ChatroomListPageState createState() => _ChatroomListPageState();
   }
   
   class _ChatroomListPageState extends State<ChatroomListPage> {
     final List<String> chatroomNames = [
       "聊天室 A",
       "聊天室 B",
       "聊天室 C",
       "聊天室 D",
       "聊天室 E",
     ];
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Kakao 聊天室列表'),
         ),
         body: KakaoChatroomList(
           chatroomNames: chatroomNames,
           onChatroomSelected: (index) {
             print("选中了第 $index 个聊天室");
           },
         ),
       );
     }
   }