flutter中使用android原生视图

56 阅读 0 评论 37 点赞

我是靠谱客的博主酷炫秋天，最近开发中收集的这篇文章主要介绍flutter中使用android原生视图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

虚拟显示模式（Virtual displays）
将 android.view.View 实例渲染为纹理，不会嵌入到 Activity 的视图层次结构中。
键盘处理和辅助功能可能无法工作。
混合集成模式（Hybrid composition）
需要 Flutter 1.22（推荐 1.22.2）。
将原生的 android.view.View 附加到视图层次结构中。键盘处理和无障碍功能是开箱即用的。
Android 10 之前，这个模式会大大降低 Flutter UI 的帧率（FPS）。

创建原生view对应的widget

1. 创建一个widget

此widget继承StatefulWidget 类
在build()中修改为以下代码

// hybrid模式
Widget build(BuildContext context) {
// This is used in the platform side to register the view.
const String viewType = '<platform-view-type>';
// Pass parameters to the platform side.
const Map<String, dynamic> creationParams = <String, dynamic>{};
return PlatformViewLink(
viewType: viewType,
surfaceFactory:
(context, controller) {
return AndroidViewSurface(
controller: controller as AndroidViewController,
gestureRecognizers: const <Factory<OneSequenceGestureRecognizer>>{},
hitTestBehavior: PlatformViewHitTestBehavior.opaque,
);
},
onCreatePlatformView: (params) {
return PlatformViewsService.initSurfaceAndroidView(
id: params.id,
viewType: viewType,
layoutDirection: TextDirection.ltr,
creationParams: creationParams,
creationParamsCodec: const StandardMessageCodec(),
onFocus: () {
params.onFocusChanged(true);
},
)
..addOnPlatformViewCreatedListener(params.onPlatformViewCreated)
..create();
},
);
}
// vitrual display模式
Widget build(BuildContext context) {
// This is used in the platform side to register the view.
const String viewType = '<platform-view-type>';
// Pass parameters to the platform side.
final Map<String, dynamic> creationParams = <String, dynamic>{};
return AndroidView(
viewType: viewType,
layoutDirection: TextDirection.ltr,
creationParams: creationParams,
creationParamsCodec: const StandardMessageCodec(),
);
}

2. 原生view类实现PlatformView接口

在原生代码中将要用的view类去实现PlatformView接口, 给系统去调用

class NativeView implements PlatformView {
@NonNull private final TextView textView;
NativeView(@NonNull Context context, int id, @Nullable Map<String, Object> creationParams) {
textView = new TextView(context);
textView.setTextSize(72);
textView.setBackgroundColor(Color.rgb(255, 255, 255));
textView.setText("Rendered on a native Android view (id: " + id + ")");
}
@NonNull
@Override
public View getView() {
return textView;
}
@Override
public void dispose() {}
}

3. 用于创建原生view的工厂类

创建一个用来创建 NativeView 的实例的工厂类

class NativeViewFactory extends PlatformViewFactory {
NativeViewFactory() {
super(StandardMessageCodec.INSTANCE);
}
@NonNull
@Override
public PlatformView create(@NonNull Context context, int id, @Nullable Object args) {
final Map<String, Object> creationParams = (Map<String, Object>) args;
return new NativeView(context, id, creationParams);
}
}

4. 注册这个平台视图

这一步可以在应用中，也可以在插件中
和第一步的widget的build()中的要一样
NativeViewFactory则是上一步创建的工厂类

// activity中
public class MainActivity extends FlutterActivity {
@Override
public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
flutterEngine
.getPlatformViewsController()
.getRegistry()
.registerViewFactory("<platform-view-type>", new NativeViewFactory());
}
}
// 插件中
public class PlatformViewPlugin implements FlutterPlugin {
@Override
public void onAttachedToEngine(@NonNull FlutterPluginBinding binding) {
binding
.getPlatformViewRegistry()
.registerViewFactory("<platform-view-type>", new NativeViewFactory());
}
@Override
public void onDetachedFromEngine(@NonNull FlutterPluginBinding binding) {}
}