Flutter聊天滚动列表视图插件xc_chat_scroll_list_view的使用

Features（特性）

该插件提供了用于构建聊天界面的功能组件。

Getting started（开始使用）

在开始使用此插件之前，请确保已将其添加到项目的pubspec.yaml文件中：

dependencies:
  xc_chat_scroll_list_view: ^版本号

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

flutter pub get

Usage（使用方法）

示例代码

以下是完整的使用示例代码，展示如何使用xc_chat_scroll_list_view插件创建一个聊天界面。

文件：example/lib/main.dart

import 'package:xc_chat_scroll_list_view/core/chat_controller.dart';
import 'package:xc_chat_scroll_list_view/models/message_model.dart';
import 'package:xc_chat_scroll_list_view/widget/chat_list_widget.dart';
import 'package:flutter/material.dart';

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

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

  // 应用程序根部
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '聊天示例',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '聊天界面示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  int count = 0;

  late ChatController chatController;

  ScrollController scrollController = ScrollController();

  final List<MessageModel> _messageList = [
    MessageModel(
      ownerName: "assistant",
      ownerType: OwnerType.receiver,
      content: "ChatGpt是由 openAI 研发的聊天机器人",
      createdAt: 1711699180418,
      id: 1,
      avatar: 'https://dog.ceo/img/dog-ceo-zine.jpg'
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            child: ChatList(
              chatController: chatController,
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(onPressed: _onSendMessage, child: const Text("发送消息")),
              ElevatedButton(onPressed: _onloadMore, child: const Text("加载更多"))
            ],
          ),
          const SizedBox(
            height: 20,
          )
        ],
      ),
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    chatController = ChatController(
        initialMessageList: _messageList,
        scrollController: scrollController,
        timePellet: 60,
    );
  }

  // 发送消息
  void _onSendMessage() async {
    int c = count++;
    chatController.addMessage( MessageModel(
        ownerName: "用户",
        ownerType: OwnerType.sender,
        content: "你好 $c",
        createdAt: DateTime.now().millisecondsSinceEpoch,
        id: c,
        avatar: 'https://dog.ceo/img/dog-ceo-zine.jpg'
    ));
    await Future.delayed(const Duration(milliseconds: 2000));
    ++c;
    chatController.addMessage(MessageModel(
        ownerName: "助手",
        ownerType: OwnerType.receiver,
        content: "你好 $c",
        createdAt: DateTime.now().millisecondsSinceEpoch,
        id: c,
        avatar: 'https://dog.ceo/img/dog-ceo-zine.jpg'
    ));
  }

  int _counter = 0;
  // 加载更多数据
  void _onloadMore() {
    int tl = 1711718958602;
    tl = tl - ++_counter * 1000000;
    final List<MessageModel> messageList = [
      MessageModel(
          ownerName: "用户",
          ownerType: OwnerType.sender,
          content: "加载更多数据 $_counter*1000000",
          createdAt: DateTime.now().millisecondsSinceEpoch,
          id: _counter * 1000000,
          avatar: 'https://dog.ceo/img/dog-ceo-zine.jpg'
      ),
    ];
    chatController.loadMoreData(messageList);
  }
}