Flutter JavaScript交互插件dd_js_util的使用
Flutter JavaScript交互插件dd_js_util的使用
dd_js_util
✅ 梁典典的工具插件包
Flutter 通用工具类
pub地址: https://pub.dev/packages/dd_js_util
开始使用
2022.11.16 更新: 让你的APP添加强大的更换主题能力
只需要3步.
注册
void main(){
AppThemeUtil().registerAdapterAndOpenBox();
}
开始使用
使用ThemeBuildWidget包裹MaterialApp
ThemeBuildWidget(themeBuild: (appThemeSetting) {
return MaterialApp(
theme: MyAppTheme.getTheme(appThemeSetting.themeIndex),
themeMode: appThemeSetting.getThemeMode
);
})
前往更换主题设置页面
context.navToWidget(to: ThemeSettingPage());
更换主题API
AppThemeUtil().changeThemeWithEnum(CustomAppThemeData theme);//参数是主题枚举
dio 封装
//1.初始化,换成你的域名
BaseApi.host='https://itbug.shop';
//2.声明接口
class BlogsApi extends BaseApi {
BlogsApi():super("/blogs");
}
//3.使用接口
void fetchBlogs(){
BlogsApi().request(); //发起请求
}
///-----------高级用法
///如果有特殊需求,比如添加拦截器等等
class UserProfileApi extends BaseApi{
UserProfileApi():super('/user/profile',httpMethod:HttpMethod.post){
//添加拦截器
intrtceptors.add(TokenIntrtceptors());
}
///获取添加参数
set token(String tokenValue) => params['token'] = tokenValue
}
//使用
final api = UserProfileApi()..token = 'your token';
api.request(); //发起请求
判断是否微信浏览器
final result = await DdJsUtil.isWeChatBrowser; // true or false
String 扩展
下载图片到本地相册String#downloadImage
// 示例
// [checkPermission]: 下载前是否检测一下是否有访问相册的权限,默认false
// [isAsset]: 是否为本地资产图片,默认false
"https://itbug.shop/logo.png".downloadImage(checkPermission:true,isAsset:false);
组件
倒计时组件
//示例
CountDown(
endTime: "${data.toIso8601String()}",
onEnd: (){
print('倒计时结束');
},
autoStart: false,
controller: _controller,
),
九宫格选择图片
PictureSelection(multipleChoice: true,controller: _pictureSelectionController,),
用法
final files = _pictureSelectionController.getFiles;//获取全部图片
_pictureSelectionController.clean();//清空用户选择的图片
///更多方法查看控制器类
本地图片压缩
/// file <- 压缩后的文件
/// 参数1 <- 要将压缩后的图片保存到哪个路径
/// 参数2 [quality] <- 压缩质量
File? file = "file path".fileImageCompress("to file path",quality: 50);
图片放大
/// 参数1: 图片列表
/// 参数2: 初始化显示第几张图片
/// 参数3: 是否为本地类型图片,如果是,参数1需要替换为File的路径
ImageView(images: ["网络图片","网络图片"],initCurrent: 0,isFile: false);
日期选择组件
- 导包
# 导入国际化包
flutter_localizations:
sdk: flutter
- 引入
GetMaterialApp(
localizationsDelegates: [
//这个要在第一位
MyLocalizationsDelegate(), //导入1
GlobalMaterialLocalizations.delegate,//导入2
GlobalWidgetsLocalizations.delegate,//导入3
GlobalCupertinoLocalizations.delegate,//导入4
],
supportedLocales: [
const Locale('zh', 'CH'),//导入1
const Locale('en', 'US'),//导入2
],
)
- 使用组件
SizedBox(
width: 700,
height: 200,
child: CupertinoDatePicker(
hideDay: true,
mode: CupertinoDatePickerMode.date,
onDateTimeChanged: (DateTime value) {
print(value);
},
),
)
- 效果
键盘工具
KeyboardMixin核心类
在ConsumerState混入使用扩展
class _ChatEditState extends ConsumerState<ChatEdit> with KeyboardMixin<ChatEdit>
1. 监听键盘高度
ref 是框架riverpod状态管理中的类
ref.watchKeyBoardHeight; //键盘高度实时获取
2. 回调函数
///键盘展示回调
///[height] - 键盘实时高度
void onShow(double height){}
///键盘关闭回调
void onClose(){}
///将键盘高度设置为0
void reset(){}
更多关于Flutter JavaScript交互插件dd_js_util的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter JavaScript交互插件dd_js_util的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，关于Flutter与JavaScript交互的插件dd_js_util，这里提供一个简单的代码示例来展示如何使用该插件进行交互。请确保你已经将dd_js_util插件添加到了你的Flutter项目中。你可以通过pubspec.yaml文件添加依赖：
dependencies:
flutter:
sdk: flutter
dd_js_util: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get来获取依赖。
以下是一个基本的示例，展示如何在Flutter应用中嵌入一个WebView，并使用dd_js_util插件与其中的JavaScript代码进行交互。
Flutter 代码部分
首先，创建一个新的Flutter项目（如果你还没有的话），然后在lib目录下创建一个新的Dart文件，比如main.dart。
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart'; // 假设使用webview_flutter作为WebView实现
import 'package:dd_js_util/dd_js_util.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter JavaScript Interaction'),
),
body: WebViewExample(),
),
);
}
}
class WebViewExample extends StatefulWidget {
@override
_WebViewExampleState createState() => _WebViewExampleState();
}
class _WebViewExampleState extends State<WebViewExample> {
late WebViewController _controller;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
child: WebView(
initialUrl: Uri.dataFromString(
'''
<html>
<body>
<h1>Hello from WebView</h1>
<button id="callFlutter">Call Flutter</button>
<script>
document.getElementById('callFlutter').addEventListener('click', function() {
window.flutter_inappwebview.callHandler('fromJS', {'message': 'Hello from JavaScript!'});
});
</script>
</body>
</html>
''',
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8')
).toString(),
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
_controller.addJavascriptChannel(
JavascriptChannel(
name: 'flutter_inappwebview',
onMessageReceived: (JavascriptMessage message) {
// 处理从JavaScript接收到的消息
print(message.message); // {'message': 'Hello from JavaScript!'}
},
).setHandler((message) async {
// 这里可以处理从Flutter发送到JavaScript的消息，如果需要的话
// 但在这个例子中，我们主要是从JavaScript接收消息
return null;
}).build());
},
),
),
ElevatedButton(
onPressed: () async {
// 从Flutter发送消息到JavaScript
await _controller.evaluateJavascript('''
console.log("Hello from Flutter!");
// 可以调用JavaScript函数或执行其他操作
''');
},
child: Text('Send message to WebView'),
),
],
);
}
}
注意事项
-
WebView 插件：上面的示例使用了
webview_flutter插件来创建WebView。你可能需要单独添加这个依赖：dependencies: webview_flutter: ^最新版本号 # 请替换为实际的最新版本号 -
JavaScript Channel：
dd_js_util插件实际上提供了更高级的功能来处理JavaScript和Flutter之间的交互，但基于你提出的要求，这里使用了webview_flutter插件自带的JavascriptChannel功能来展示基本的交互方式。如果dd_js_util提供了特定的API来简化这一过程，你应该参考其官方文档来替换相应的代码部分。 -
实际使用：请根据你项目的具体需求调整上述代码。如果
dd_js_util提供了特定的API来处理JavaScript交互，你应该查阅其文档并使用相应的API。
由于dd_js_util的具体API和实现细节可能因版本而异，因此强烈建议查阅该插件的官方文档和示例代码，以确保正确实现功能。
