Flutter自定义UI组件插件svui_plugin的使用

Flutter自定义UI组件插件svui_plugin的使用

引用

在项目的pubspec.yaml文件下添加以下代码:

dependencies:
  svui_plugin:
    hosted:
      name: svui_plugin
      url: http://172.17.254.117:4000
    version: 0.0.30

并在最外层的Android项目的build.gradle文件下添加如下代码到defaultConfig下:

defaultConfig {
    applicationId "com.roobo.svui_plugin_example"
    minSdkVersion 16
    targetSdkVersion 28
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
    // 指定CPU类型
    ndk {
        abiFilters 'armeabi', 'armeabi-v7a'
    }
}

如需混淆,则需要在最外层的Android项目的混淆文件中添加如下代码:

-keep class com.roobo.svui_plugin.** {*;}
-keep class com.roobo.svui.** {*;}
-keep class com.roobo.VQE{*;}

-keepclasseswithmembernames class * {
    native <methods>;
}

# 第三方jar包
# FastJson
-dontwarn com.alibaba.fastjson.**
-keep class com.alibaba.fastjson.** { *; }
# nuance
-dontwarn com.nuance.**
-keep class com.nuance.** { *; }
-keepattributes Signature
-keepattributes *Annotation*

-keepclassmembers enum * {
    public static **[] values();
    public static ** valueOf(java.lang.String);
}

-keep,allowobfuscation @interface android.support.annotation.Keep

-keep @android.support.annotation.Keep class *
-keepclassmembers class * {
    @android.support.annotation.Keep *;
}

-keepattributes *Annotation*
-keep @android.support.annotation.Keep class **{
    @android.support.annotation.Keep <fields>;
    @android.support.annotation.Keep <methods>;
}

使用

初始化

有两种初始化方法,任选其一。

方法一:

void init(SdkAccountInfo info,
    {SVUIInitListener listener, bool isTest, IPlayer player})

方法二:

void initWithParamInfo(AIParamInfo info,
    {SVUIInitListener listener, bool isTest, IPlayer player})

示例代码:

SvuiPlugin.getInstance().init(SdkAccountInfo(
  appId: "your_app_id",
  appKey: "your_app_key",
));

口语评测

方法一:

void startOralEvaluate(String text, OralEvluateListener listener)

方法二:

void startOralEvaluateWithData(
    OralData data, OralEvluateListener listener)

示例代码:

SvuiPlugin.getInstance().startOralEvaluateWithData(
  OralDataBuilder()
    ..setText("你好,世界")
    ..build(),
  (result) {
    print("评测结果: ${result.totalScore}");
  },
);

问答
void startQA(int lessonId, String dialogId, QAListener listener)

示例代码:

SvuiPlugin.getInstance().startQA(
  1,
  "dialog_1",
  (result) {
    print("问答结果: ${result.action}");
  },
);

停止录音
void stopCapture({SVUIStopListener listener})

示例代码:

SvuiPlugin.getInstance().stopCapture();

释放
void release()

示例代码:

SvuiPlugin.getInstance().release();

TTS

方法一:

void speechSynthesis(String text,
    {String language, SpeechSynthesisListener listener})

方法二:

void speechSynthesisWithLanguage(String text, String language,
    SpeechSynthesisListener listener)

方法三:

void speak(String text, {String language, PlayListener listener})

方法四:

void speakWithLanguage(String text, String language,
    {PlayListener listener})

示例代码:

SvuiPlugin.getInstance().speechSynthesisWithLanguage(
  "Hello World",
  Language.ENGLISH,
  (url) {
    print("合成音频URL: $url");
  },
);

其它

清除所有用户录音的.wav文件:

static void clearAudioRecord()

获取当前所有用户录音的.wav文件大小(单位:bite):

static Future<int> getAudioRecordSize()

设置log级别:

static void setLogLevel(int level)

示例代码:

SvuiUtil.setLogLevel(LogLevel.LOG_LEVEL_VERBOSE);

完整示例代码

以下是一个完整的示例代码,展示如何使用svui_plugin插件:

import 'package:flutter/material.dart';
import 'package:svui_plugin/svui_plugin.dart';
import 'package:svui_plugin/language.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainWidget(),
    );
  }
}

class MainWidget extends StatefulWidget {
  [@override](/user/override)
  _MainWidgetState createState() => _MainWidgetState();
}

class _MainWidgetState extends State<MainWidget> {
  [@override](/user/override)
  void initState() {
    super.initState();
    SvuiPlugin.getInstance().setLogLevel(LogLevel.LOG_LEVEL_VERBOSE);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SVUI DEMO"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                SvuiPlugin.getInstance().startOralEvaluateWithData(
                  OralDataBuilder()
                    ..setText("你好,世界")
                    ..build(),
                  (result) {
                    print("评测结果: ${result.totalScore}");
                  },
                );
              },
              child: Text("开始口语评测"),
            ),
            ElevatedButton(
              onPressed: () {
                SvuiPlugin.getInstance().startQA(
                  1,
                  "dialog_1",
                  (result) {
                    print("问答结果: ${result.action}");
                  },
                );
              },
              child: Text("开始问答"),
            ),
            ElevatedButton(
              onPressed: () {
                SvuiPlugin.getInstance().speechSynthesisWithLanguage(
                  "Hello World",
                  Language.ENGLISH,
                  (url) {
                    print("合成音频URL: $url");
                  },
                );
              },
              child: Text("TTS 合成"),
            ),
            ElevatedButton(
              onPressed: () {
                SvuiPlugin.getInstance().clearAudioRecord();
                print("清除录音完成");
              },
              child: Text("清除录音"),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter自定义UI组件插件svui_plugin的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义UI组件插件svui_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


svui_plugin 是一个用于 Flutter 的自定义 UI 组件库,它提供了一系列预定义的 UI 组件,帮助开发者快速构建美观且功能丰富的应用程序。要使用 svui_plugin,你需要按照以下步骤进行集成和使用。

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 svui_plugin 作为依赖项。打开 pubspec.yaml 文件,在 dependencies 部分添加以下内容:

dependencies:
  flutter:
    sdk: flutter
  svui_plugin: ^版本号  # 请替换为最新版本号

然后,运行 flutter pub get 来获取依赖包。

2. 导入包

在你的 Dart 文件中导入 svui_plugin

import 'package:svui_plugin/svui_plugin.dart';

3. 使用组件

svui_plugin 提供了多种自定义 UI 组件,你可以直接在代码中使用这些组件。以下是一些常见组件的使用示例:

按钮组件

SVButton(
  text: 'Click Me',
  onPressed: () {
    print('Button Pressed');
  },
  color: Colors.blue,
  textColor: Colors.white,
)

输入框组件

SVTextField(
  hintText: 'Enter your name',
  onChanged: (value) {
    print('Input: $value');
  },
)

卡片组件

SVCard(
  child: Column(
    children: [
      Text('Card Title'),
      Text('This is a card content.'),
    ],
  ),
)

进度条组件

SVProgressBar(
  progress: 0.5, // 50% progress
  color: Colors.green,
)

4. 自定义主题

svui_plugin 允许你自定义主题以适应你的应用程序风格。你可以在 MaterialApp 中使用 SVTheme 来设置主题:

MaterialApp(
  theme: SVTheme.lightTheme(), // 使用默认的亮色主题
  home: MyHomePage(),
)

你也可以自定义主题:

MaterialApp(
  theme: SVTheme(
    primaryColor: Colors.blue,
    accentColor: Colors.orange,
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
  ),
  home: MyHomePage(),
)
回到顶部