Flutter聊天界面插件chat_listview的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter聊天界面插件 chat_listview 的使用

chat_listview 是一个专门用于构建聊天列表的Flutter插件,它可以在顶部或底部插入数据而不会引起位置改变,非常适合用来实现历史消息加载等功能。

插件特性

  • 从顶部或底部插入数据而不影响现有列表的位置。
  • 支持滚动到底部和顶部的功能。
  • 提供了加载更多数据的接口(顶部和底部)。

安装步骤

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

dependencies:
  chat_listview: ^latest_version
  scroll_to_index: ^1.0.6 # 需要配合使用

然后运行 flutter pub get 来安装这些依赖。

示例代码

下面是一个完整的示例代码,演示如何使用 CustomChatListView 控件来创建一个简单的聊天界面:

import 'package:chat_listview/chat_listview.dart';
import 'package:flutter/material.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter Chat List Demo'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  late CustomChatListViewController<String> controller;
  final AutoScrollController scrollController = AutoScrollController();

  [@override](/user/override)
  void initState() {
    controller = CustomChatListViewController([]);
    super.initState();
  }

  void insertTopData() {
    setState(() {
      controller.insertToTop('历史消息');
    });
  }

  void addBottomData() {
    setState(() {
      controller.insertToBottom('新消息');
    });
  }

  Future<bool> onScrollToBottomLoad() async {
    await Future.delayed(const Duration(seconds: 2));
    controller.insertAllToBottom(_buildNewMessage());
    return controller.bottomHasMore(max: 88);
  }

  Future<bool> onScrollToTopLoad() async {
    await Future.delayed(const Duration(seconds: 2));
    controller.insertAllToTop(_buildHistoryMessage());
    return controller.topHasMore(max: 88);
  }

  List<String> _buildNewMessage() {
    return List.generate(20, (index) => '新消息');
  }

  List<String> _buildHistoryMessage() {
    return List.generate(20, (index) => '历史消息');
  }

  void jumpToTop() {
    scrollController.scrollToTop();
  }

  void jumpToBottom() {
    scrollController.scrollToBottom();
  }

  void autoJumpToIndex() {
    scrollController.scrollToIndex(
      10,
      duration: const Duration(milliseconds: 1),
      preferPosition: AutoScrollPosition.begin,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(onPressed: jumpToTop, child: const Text('跳到顶部')),
              ElevatedButton(onPressed: jumpToBottom, child: const Text('跳到底部')),
              ElevatedButton(onPressed: autoJumpToIndex, child: const Text('跳到position:10')),
            ],
          ),
          Expanded(
            child: CustomChatListView(
              itemBuilder: <String>(
                BuildContext context,
                int index,
                int position,
                String data,
              ) {
                return AutoScrollTag(
                  key: ValueKey(position),
                  controller: scrollController,
                  index: position,
                  child: Container(
                    height: 50,
                    alignment: Alignment.center,
                    child: Text('$data index:$index----------------$position'),
                  ),
                );
              },
              scrollController: scrollController,
              enabledBottomLoad: false,
              controller: controller,
              enabledTopLoad: false,
              onScrollToBottomLoad: onScrollToBottomLoad,
              onScrollToTopLoad: onScrollToTopLoad,
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(onPressed: insertTopData, child: const Text('顶部插入数据')),
              ElevatedButton(onPressed: addBottomData, child: const Text('底部插入数据')),
            ],
          )
        ],
      ),
    );
  }
}

更多关于Flutter聊天界面插件chat_listview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter聊天界面插件chat_listview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用chat_listview插件来构建聊天界面的代码示例。chat_listview是一个流行的Flutter插件,用于创建类似聊天应用的UI。

首先,确保你已经在pubspec.yaml文件中添加了chat_listview依赖项:

dependencies:
  flutter:
    sdk: flutter
  chat_listview: ^x.y.z  # 请替换为最新版本号

然后,运行flutter pub get来安装依赖项。

接下来是示例代码,展示如何使用chat_listview来创建一个简单的聊天界面:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  // 示例消息数据
  final List<ChatMessage> messages = [
    ChatMessage(
      user: 'Alice',
      text: 'Hello!',
      isMe: false,
      time: DateTime.now().subtract(Duration(minutes: 1)),
    ),
    ChatMessage(
      user: 'Bob',
      text: 'Hi Alice! How are you?',
      isMe: true,
      time: DateTime.now(),
    ),
    // 可以添加更多消息...
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: ChatListView(
        messages: messages,
        onSendMessage: (message) {
          // 处理发送消息的逻辑,例如将消息添加到服务器或本地数据库
          setState(() {
            messages.add(ChatMessage(
              user: 'Bob', // 根据当前用户调整
              text: message,
              isMe: true,
              time: DateTime.now(),
            ));
          });

          // 滚动到底部
          // 这里假设 ChatListView 有一个方法来滚动到底部,但在实际使用中,
          // 你可能需要使用 ScrollController 或其他方法来控制滚动。
          // chatListViewController.scrollToBottom();
        },
        messageBubble: (context, message) {
          return Bubble(
            isMe: message.isMe,
            message: Text(message.text),
            timestamp: Text(message.time.toLocal().toString()),
          );
        },
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              IconButton(
                icon: Icon(Icons.attach_file),
                onPressed: () {
                  // 处理附件点击
                },
              ),
              Expanded(
                child: TextField(
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: 'Type a message...',
                  ),
                  onSubmitted: (message) {
                    // 当用户按下发送键时调用 onSendMessage
                    widget.onSendMessage!(message);
                  },
                ),
              ),
              IconButton(
                icon: Icon(Icons.send),
                onPressed: () {
                  // 获取 TextField 的当前文本并发送
                  // 这里假设你有一个 TextEditingController 来管理 TextField 的文本
                  // final textController = TextEditingController();
                  // widget.onSendMessage!(textController.text);
                  // textController.clear();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// ChatMessage 数据模型
class ChatMessage {
  final String user;
  final String text;
  final bool isMe;
  final DateTime time;

  ChatMessage({required this.user, required this.text, required this.isMe, required this.time});
}

// Bubble 组件,用于显示消息气泡
class Bubble extends StatelessWidget {
  final bool isMe;
  final Widget message;
  final Widget timestamp;

  Bubble({required this.isMe, required this.message, required this.timestamp});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: Column(
        crossAxisAlignment: isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
        children: [
          Container(
            decoration: BoxDecoration(
              color: isMe ? Colors.blueAccent : Colors.grey[300],
              borderRadius: BorderRadius.circular(16),
            ),
            padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
            child: message,
          ),
          SizedBox(height: 4),
          timestamp,
        ],
      ),
    );
  }
}

注意

  1. 在实际使用中,你可能需要添加更多的功能和优化,例如消息加载、用户头像、消息状态(已发送、已读等)。
  2. ChatListView 组件是假设存在的,但实际的 chat_listview 插件可能有不同的 API 和组件名称。请参考插件的官方文档来正确使用。
  3. 上面的代码示例中,onSendMessage 方法只是一个占位符,你需要根据你的需求来实现具体的发送逻辑。
  4. Bubble 组件是自定义的,用于显示消息气泡。你可以根据需求进行调整和美化。

希望这个示例能帮助你开始使用 chat_listview 插件来构建聊天界面!

回到顶部