桥西做网站,js特效网站展示,网站的建设流程是什么,wordpress文章显示失败在使用Flutter混合开发中会遇到一些原生比Flutter优秀的控件#xff0c;不想使用Flutter的控件#xff0c;想在Flutter中使用原生控件。这时就会用到 Flutter页面中内嵌 原生view#xff0c;这里简单介绍一个 内嵌 iOS 的view。
注#xff1a;这里使用了 FlutterBoost。网…在使用Flutter混合开发中会遇到一些原生比Flutter优秀的控件不想使用Flutter的控件想在Flutter中使用原生控件。这时就会用到 Flutter页面中内嵌 原生view这里简单介绍一个 内嵌 iOS 的view。
注这里使用了 FlutterBoost。网上大部分都是代码执行不起来本案例起码可以正常使用。
原生部分 这里开始在原生部分进行处理 自定义 view FlutterIosTextLabel
#import Foundation/Foundation.h
#import Flutter/Flutter.hNS_ASSUME_NONNULL_BEGINinterface FlutterIosTextLabel : NSObjectFlutterPlatformViewproperty (nonatomic, strong) UILabel *label;- (instancetype)initWithFrame:(CGRect)frameviewIdentifier:(int64_t)viewIdarguments:(id _Nullable)argsbinaryMessenger:(NSObjectFlutterBinaryMessenger*)messenger;endNS_ASSUME_NONNULL_END#import FlutterIosTextLabel.himplementation FlutterIosTextLabel//在这里只是创建了一个UILabel
- (instancetype)initWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id _Nullable)args binaryMessenger:(NSObjectFlutterBinaryMessenger*)messenger {if (self [super init]) {self.label [UILabel new];self.label.backgroundColor [UIColor yellowColor];self.label.textColor [UIColor redColor];self.label.textAlignment NSTextAlignmentCenter;self.label.numberOfLines 0;NSDictionary *dict (NSDictionary *)args;NSString *textValue dict[content];self.label.text [NSString stringWithFormat:我是iOSView \n在显示%, textValue];}return self;
}- (nonnull UIView *)view {return self.label;
}end创建 FlutterIosTextLabelFactory
#import Foundation/Foundation.h
#import Flutter/Flutter.hNS_ASSUME_NONNULL_BEGINinterface FlutterIosTextLabelFactory : NSObjectFlutterPlatformViewFactory- (instancetype)initWithMessenger:(NSObjectFlutterBinaryMessenger*)messenger;endNS_ASSUME_NONNULL_END#import FlutterIosTextLabelFactory.h
#import FlutterIosTextLabel.himplementation FlutterIosTextLabelFactory
{NSObjectFlutterBinaryMessenger *_messenger;
}- (instancetype)initWithMessenger:(NSObjectFlutterBinaryMessenger*)messenger {self [super init];if (self) {_messenger messenger;}return self;
}- (NSObjectFlutterPlatformView*)createWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id _Nullable)args {return [[FlutterIosTextLabel alloc] initWithFrame:frame viewIdentifier:viewId arguments:args binaryMessenger:_messenger];
}-(NSObjectFlutterMessageCodec *)createArgsCodec{return [FlutterStandardMessageCodec sharedInstance];
}创建 FlutterIosTextLabelPlugin
#import Foundation/Foundation.h
#import Flutter/Flutter.hNS_ASSUME_NONNULL_BEGINinterface FlutterIosTextLabelPlugin : NSObjectFlutterPlugin(void)registerWithRegistrar:(nonnull NSObjectFlutterPluginRegistrar *)registrar;
endNS_ASSUME_NONNULL_END#import FlutterIosTextLabelPlugin.h
#import FlutterIosTextLabelFactory.himplementation FlutterIosTextLabelPlugin (void)registerWithRegistrar:(nonnull NSObjectFlutterPluginRegistrar *)registrar {//注册插件//注册 FlutterIosTextLabelFactory//custom_platform_view 为flutter 调用此 textLabel 的标识[registrar registerViewFactory:[[FlutterIosTextLabelFactory alloc] initWithMessenger:registrar.messenger] withId:custom_platform_view];
}
end到此原生已经集成完成一半重点是接下来部分。
在 AppDelegate 中集成使用 修改AppDelegate.h修改继承为FlutterAppDelegate并删除window属性因为FlutterAppDelegate中已经自带window属性
#import UIKit/UIKit.h
#import Flutter/Flutter.hinterface AppDelegate : FlutterAppDelegate
end在AppDelegate.m中引入相关头文件
#import FlutterIosTextLabel.h
#import GeneratedPluginRegistrant.h
#import FlutterIosTextLabelPlugin.h在AppDelegate.m中注册插件在引入 flutter_boost的情况下需要等 flutter_boost初始化完成后用FlutterEngine对插件进行初始化。
interface AppDelegate ()endimplementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {HYFlutterBoostDelegate* delegate [[HYFlutterBoostDelegate alloc]init];self.window [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];self.window.backgroundColor [UIColor whiteColor];HYTabBarController *tab [[HYTabBarController alloc]init];self.window.rootViewController tab;[self.window makeKeyAndVisible];[FlutterBoost.instance setup:application delegate:delegate callback:^(FlutterEngine *engine) {NSLog(FlutterBoost 开始操作);// 使用 MethodChannel[HYFlutterNavChannel start];[HYFlutterCommonChannel start];// 初始化Flutter内嵌iOSView插件
// NSObjectFlutterPluginRegistrar *registrar [engine registrarForPlugin:custom_platform_view_plugin];
// FlutterIosTextLabelFactory *factory [[FlutterIosTextLabelFactory alloc] initWithMessenger:registrar.messenger];
// [registrar registerViewFactory:factory withId:custom_platform_view];// 升级处理NSObjectFlutterPluginRegistrar *registrar [engine registrarForPlugin:custom_platform_view_plugin];[FlutterIosTextLabelPlugin registerWithRegistrar:registrar];}];return YES;
}end到此原生集成完毕接下来在 Flutter中进行集成
Flutter 部分
import package:flutter/material.dart;
import package:flutter/services.dart;class CMNativePage extends StatelessWidget {const CMNativePage({Key? key}) : super(key: key);overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text(详情),),body: const Center(child: IOSCompositionWidget(),),);}
}class IOSCompositionWidget extends StatelessWidget {const IOSCompositionWidget({super.key});overrideWidget build(BuildContext context) {// This is used in the platform side to register the view.const String viewType custom_platform_view;// Pass parameters to the platform side.final MapString, dynamic creationParams {content: Flutter传给原生iOSView的参数};return UiKitView(viewType: viewType,creationParams: creationParams,creationParamsCodec: const StandardMessageCodec(),);}
}注册路由
static const String nativaPage /nativaPage;nativaPage: (settings, uniqued) {return MaterialPageRoute(settings: settings,builder: (_) {return const CMNativePage();});},在Flutter地方使用 TextButton(child: const Text(加载原生控件),onPressed: () {BoostNavigator.instance.push(HYRouter.nativaPage, arguments: {home: home页面传递数值});// showBottomWidget(context, const CMNativePage());},),到此Flutter中也完成集成。 如果想要某些弹出样式自己再进行处理。这里只是简单的使用Flutter 内嵌 iOS原生view。
注意事项
FlutterIosTextLabelFactory中的createArgsCodec方法一定不能遗漏否则会导致传值不成功。类型也一定要和Dart部分的native.dart-IOSCompositionWidget- UiKitView- creationParamsCodec保持一致。否则会导致崩溃。使用官方文档中的写法是没有问题但是本案例中使用了flutter_boost再跟着官网集成就会出现问题。需要更flutter_boost初始化完成再对FlutterEngine对插件进行初始化。其中withId:xxxxxx代表控件的ID需要和Dart部分的IOSCompositionWidget中的viewType保持一致。命名为custom_platform_view。其中registrarForPlugin:xxxxxx代表插件的ID。命名为custom_platform_view_plugin。
