Flutter聊天输入界面插件v_chat_input_ui的使用

欢迎来到V Chat SDK Input UI & Recorder插件，这是一个独立组件，为您的聊天应用提供用户友好的输入界面和语音录制功能。此插件是V Chat SDK生态系统的一部分，但也可以单独使用。

特性

• 国际化（i18n）：此插件支持多种语言，使您可以满足全球多样化的用户群体。
• 主题定制：您可以轻松地自定义聊天输入和录音的外观，以匹配您的应用程序的主题。
• 语音录制：允许用户无缝发送语音消息。

安装

要开始使用V Chat SDK Input UI & Recorder插件，请使用您喜欢的包管理器进行安装。

使用

要将此插件集成到您的应用程序中，请实现VMessageInputWidget，如下面的示例代码所示：

VMessageInputWidget(
  onSubmitText: controller.onSubmitText, // 提交文本时调用的方法
  autofocus: VPlatforms.isWebRunOnMobile || VPlatforms.isMobile ? false : true, // 是否自动聚焦输入框
  language: VInputLanguage(), // 输入语言设置
  focusNode: controller.focusNode, // 焦点节点
  onAttachIconPress: () {}, // 附加图标被点击时调用的方法
  onSubmitMedia: (files) => controller.onSubmitMedia(context, files), // 提交媒体文件时调用的方法
  onSubmitVoice: (data) { // 提交语音消息时调用的方法
    controller.onSubmitVoice(VMessageVoiceData.fromMap(data.toMap()));
  },
  onSubmitFiles: controller.onSubmitFiles, // 提交文件时调用的方法
  onSubmitLocation: (data) { // 提交位置信息时调用的方法
    controller.onSubmitLocation(VLocationMessageData.fromMap(data.toMap()));
  },
  onTypingChange: (typing) { // 用户是否正在输入时调用的方法
    controller.onTypingChange(VRoomTypingEnum.values.byName(typing.name));
  },
  googleMapsLangKey: VAppConstants.sdkLanguage, // Google地图的语言键
  maxMediaSize: controller.vMessageConfig.maxMediaSize, // 最大媒体文件大小
  onMentionSearch: (query) => controller.onMentionRequireSearch(context, query), // 提到搜索时调用的方法
  maxRecordTime: controller.vMessageConfig.maxRecordTime, // 最大录制时间
  googleMapsApiKey: controller.vMessageConfig.googleMapsApiKey, // Google地图API密钥
  replyWidget: VReplyWidget( // 回复组件
    onReplyCancel: controller.onReplyCancel,
    onReplySubmit: controller.onReplySubmit,
  ),
);

您可以根据需求自定义此小部件。

对于主题定制，您可以覆盖主题扩展：

ThemeData(
  // 您的主题数据配置...
).copyWith(extensions: [VInputTheme.light()]);

文档

有关如何使用此插件的更多详细信息，请参阅我们的文档。它包括详细的指南、示例和教程，以充分利用V Chat SDK生态系统。

支持

如果您遇到任何问题、有功能请求或一般性咨询，请访问我们的问题页面获取信息并报告问题。

请注意：始终确保您使用的是V Chat SDK及其插件的最新版本，以便访问最新的功能和改进。

V Chat SDK Input UI & Recorder插件由V Chat团队自豪地开发和维护。

示例代码

以下是一个完整的示例代码，展示了如何在您的Flutter应用中使用VMessageInputWidget：

import 'package:flutter/material.dart';
import 'package:v_chat_input_ui/v_chat_input_ui.dart'; // 导入插件

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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 _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('你已经按了按钮这么多次：'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: Container(
        height: 70, // 设置输入框的高度
        child: VMessageInputWidget(
          onSubmitText: (text) {
            print('提交文本: $text');
          },
          onSubmitVoice: (data) {
            print('提交语音: $data');
          },
          onSubmitMedia: (files) {
            print('提交媒体文件: $files');
          },
          onSubmitLocation: (location) {
            print('提交位置: $location');
          },
          onTypingChange: (typing) {
            print('用户是否正在输入: $typing');
          },
        ),
      ),
    );
  }
}