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
更多关于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(),
)

