在 Flutter 上加载 H5 页面,一般都会使用 webview_flutter
组件,其地址为:https://pub.flutter-io.cn/packages/webview_flutter。按照官网配置使用很简单,但如果仅仅只是做基本的配置,在实际过程中你会发现有很多功能都不满足。
1. 在 Android 中不能响应 HTML 的文件选择标签
如果你做过原生 Android 开发,在 Android 平台的 WebView 中,默认 WebView 同样是不支持 input file 类型标签的,需要自己根据 WebView 提供的回调函数来实现对应的功能。相比 iOS 就简单了,iOS 的 WebView 默认就实现了这些功能,做 Android 开发的同学都会投来羡慕的眼神,为了让 WebView 支持这些功能,Android 开发同学需要自己实现拍照、从相册、从文件里选取图片,然后回传给 WebView ,这样 H5 里的文件选择标签才能生效。
很遗憾,在 Flutter Android 平台里,这些同样是不支持的。要在 Android 平台实现这些功能,一般需要引入 webview_flutter_android
组件,其地址为:https://pub.flutter-io.cn/packages/webview_flutter_android。
在 WebView 对应的 Stage 类中:
// WebView 对应的 controller,这里省去其他若干代码
final WebViewController controller = WebViewController();
@override
void initState() {
super.initState();
//判断是 Android 平台的 WebView
if (WebViewPlatform.instance is AndroidWebViewPlatform) {
final AndroidWebViewController androidController = controller.platform as AndroidWebViewController;
//处理文件选择,只有 AndroidWebViewController 才暴露出 setOnShowFileSelector 方法,这里才能监听文件选择
androidController.setOnShowFileSelector(_androidFilePicker);
}
//WebView 加载H5地址
controller.loadRequest(Uri.parse(widget.url));
}
AndroidWebViewController.setOnShowFileSelector 的方法定义如下:
/// Sets the callback that is invoked when the client should show a file
/// selector.
Future<void> setOnShowFileSelector(
Future<List<String>> Function(FileSelectorParams params)?
onShowFileSelector,
)
点击 H5 的文件选择按钮时,会触发上述回调,需要自己在该回调函数里处理文件选择、拍照、相册选文件等逻辑处理,处理成功返回一个 Uri 数组,如果失败则返回一个空数组即可。
Future<List<String>> _androidFilePicker(FileSelectorParams params) async {
_imagePicker ??= ImagePicker();
//手机上有权限限制,一般我们只支持图片文件选择
if (params.acceptTypes.any((type) => type == 'image/*')) {
//这里可以显示 拍照、相册 选择弹窗,图片选择完成后,返回图片的 uri 地址
......
}
return [];
}
2. 在 Android 中设置字体大小
设置字体大小同样需要采用 webview_flutter_android
组件,一般如下设置:
if (WebViewPlatform.instance is AndroidWebViewPlatform) {
final AndroidWebViewController androidController = controller.platform as AndroidWebViewController;
//textZoom 默认值是 100
androidController.setTextZoom(250);
}