Flutter
Flutter中如何嵌套weex来使用,总的来说跟嵌套原生是一样的，但是也有些需要注意的地方。
原生部分
1.定义show方法，用于flutter调用show方法来加载url
2.这里需要特别注意，需要定义close方法，来关闭销毁weex，如果不销毁，那么Flutter中的用于嵌套的widget的id就会一直增加，永远不销毁，造成的后果就是会创建多个weex页面，会产生不可预测的后果，或者app崩溃。
3.原生通过module来，来调用flutter中的方法。
4.flutter通过通道和通知来实现，flutter调用weex方法。
public class LiveRoomWeexViewFactory : NSObject,FlutterPlatformViewFactory{
public static let SIGN = "LiveRoomWeexView";
private var message : FlutterBinaryMessenger;
init(message : FlutterBinaryMessenger) {
self.message = message;
super.init()
}
public func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> FlutterPlatformView {
return LiveRoomWeexView(frame: frame, viewIdentifier:viewId, binaryMessenger: message)
}
}
public class LiveRoomWeexView : NSObject,FlutterPlatformView{
public var weexView : ZPTRTCWeexView?;
private var channel: FlutterMethodChannel?
init(frame : CGRect, viewIdentifier viewId: Int64, binaryMessenger messenger: FlutterBinaryMessenger) {
self.weexView = ZPTRTCWeexView();
// 绑定方法监听
super.init()
channel = FlutterMethodChannel(
name: "\(LiveRoomWeexViewFactory.SIGN)_\(viewId)",
binaryMessenger: messenger
)
channel?.setMethodCallHandler(handle);
}
public func view() -> UIView {
return weexView!;
}
public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
switch call.method {
case "show":
self.show(call, result: result);
break;
case "close":
self.close(call, result: result);
break;
default:
result(FlutterMethodNotImplemented);
}
}
private func show(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
if let url = CommonUtils.getParamByKey(call: call, result: result, param: "url") as? String,
let weexUrl = RTCCloudBridge.shared.getWeexUrl(url) {
weexView?.isHideLoading = true
weexView?.weexStatusBlock = { (status) in
switch status {
case .jsDownloadedError:
result(["code": 2, "message": "加载Url失败"]);
break
case .renderFailed:
result(["code": 3, "message": "渲染失败"]);
break
case .renderFinish, .updateFinish, .createView:
result(["code": 0, "message": "成功"]);
break
default:
break
}
}
weexView?.weexHandle = { [weak self] (params, callback) in
self?.channel?.invokeMethod("weexHandle", arguments: params, result: { (result) in
if let resultData = result as? FlutterError,
let details = resultData.details {
callback?(["code": resultData.code == "0" ? 0 : 1, "params": details])
}
})
}
weexView?.url = weexUrl
} else {
result(["code": 1, "message": "清单获取失败"]);
}
}
private func close(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
self.weexView?.removeFromSuperview()
self.weexView = nil
}
}
原生调用flutter
-(void)flutterMethod:(NSDictionary *)params
callback:(WXModuleCallback)callback {
if ([self.weexInstance.rootView.superview isKindOfClass:ZPTRTCWeexView.class]) {
ZPTRTCWeexView *weexView = (ZPTRTCWeexView *)self.weexInstance.rootView.superview;
weexView.weexHandle(params, ^(id _Nullable result) {
callback(result);
});
}
}
flutter调用weex
1.weexView中注册通知。
2.通过建立通道来发送通知
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(globalEvent:) name:@"TRTCGlobalEvent" object:nil];
}
return self;
}
-(void)globalEvent:(NSNotification *)notification {
NSString *event = notification.userInfo[@"event"];
NSDictionary *params = notification.userInfo[@"params"];
if (event &&
[event isKindOfClass:NSString.class]) {
[self.instance fireGlobalEvent:event params:params ?: @{}];
}
}
private func fireGlobalEvent(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
if let event = CommonUtils.getParamByKey(call: call, result: result, param: "event") as? String,
let params = CommonUtils.getParamByKey(call: call, result: result, param: "params") as? [String: Any] {
NotificationCenter.default.post(name: NSNotification.Name(rawValue: "TRTCGlobalEvent"),
object: nil,
userInfo:["event": event,
"params":params])
}
result(nil);
}
Flutter部分
class LiveRoomWeexView extends StatefulWidget {
/// channel标识符
static String channelType = "LiveRoomWeexView";
final ValueChanged? onViewCreated;
final Set>? gestureRecognizers;
const LiveRoomWeexView(
{Key? key, this.onViewCreated, this.gestureRecognizers})
: super(key: key);
@override
State createState() => LiveRoomWeexViewState();
}
//// @nodoc
class LiveRoomWeexViewState extends State {
@override
Widget build(BuildContext context) {
if (Platform.isAndroid) {
return AndroidView(
viewType: LiveRoomWeexView.channelType,
onPlatformViewCreated: _onPlatformViewCreated,
gestureRecognizers: widget.gestureRecognizers,
);
} else if (Platform.isIOS) {
return UiKitView(
viewType: LiveRoomWeexView.channelType,
onPlatformViewCreated: _onPlatformViewCreated,
gestureRecognizers: widget.gestureRecognizers,
);
} else {
return Text("该平台不支持Platform View");
}
}
void _onPlatformViewCreated(int id) {
if (widget.onViewCreated != null) {
widget.onViewCreated!(id);
}
}
}
/// @nodoc
/// Weex页面控制器方法
class LiveRoomWeexViewController {
late final MethodChannel _channel;
LiveRoomWeexViewController(int id) {
// commonEventLog("szfdzf", "LiveRoomWeexViewController create");
_channel = new MethodChannel(LiveRoomWeexView.channelType + '_$id');
_channel.setMethodCallHandler((methodCall) async {
switch (methodCall.method) {
case 'weexHandle':
LiveRoomManager? manager = await LiveRoomManager.sharedInstance();
Map? result =
await manager?.onWeexHandle(id, methodCall.arguments);
throw PlatformException(
details: result, code: result == null ? '-1' : '0');
default:
throw MissingPluginException();
}
});
}
LiveRoomWeexViewController.listener(
int id, LiveRoomWeexListener? weexListener) {
_channel = new MethodChannel(LiveRoomWeexView.channelType + '_$id');
_channel.setMethodCallHandler((methodCall) async {
switch (methodCall.method) {
case 'weexHandle':
Map? result;
if (weexListener != null) {
result = await weexListener(id, methodCall.arguments);
}
throw PlatformException(
details: result, code: result == null ? '-1' : '0');
default:
throw MissingPluginException();
}
});
}
// 加载weex
Future 通道
static TRTCCloud _trtcCloud;
static const MethodChannel _channel = const MethodChannel('trtcCloudChannel');
static TRTCCloudListenerObj listener;
/// 创建 TRTCCloud 单例。
static Future sharedInstance() async {
if (_trtcCloud == null) {
_trtcCloud = new TRTCCloud();
await _channel.invokeMethod('sharedInstance');
}
return _trtcCloud;
}
/// 销毁 TRTCCloud 单例。
static Future destroySharedInstance() async {
await _channel.invokeMethod('destroySharedInstance');
_trtcCloud = null;
}
/// weex全局通知
Future fireGlobalEvent(String eventName, Map params) {
return _channel.invokeMethod(
'fireGlobalEvent', {'event': eventName, 'params': params});
}
记得销毁的方法一定close方法一定要加，对于不管是flutter套原生，还是flutter套weex，close方法都需要加。
这是踩过很多坑才得出的结论。