FlutterBoost 实现Flutter页面内嵌iOS view

这篇具有很好参考价值的文章主要介绍了FlutterBoost 实现Flutter页面内嵌iOS view。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在使用Flutter混合开发中会遇到一些原生比Flutter优秀的控件,不想使用Flutter的控件,想在Flutter中使用原生控件。这时就会用到 Flutter页面中内嵌 原生view,这里简单介绍一个 内嵌 iOS 的view。

注:这里使用了 FlutterBoost。网上大部分都是代码执行不起来,本案例起码可以正常使用。

  • 原生部分
    这里开始在原生部分进行处理
  • 自定义 view FlutterIosTextLabel
#import <Foundation/Foundation.h>
#import <Flutter/Flutter.h>

NS_ASSUME_NONNULL_BEGIN

@interface FlutterIosTextLabel : NSObject<FlutterPlatformView>

@property (nonatomic, strong) UILabel *label;


- (instancetype)initWithFrame:(CGRect)frame
               viewIdentifier:(int64_t)viewId
                    arguments:(id _Nullable)args
              binaryMessenger:(NSObject<FlutterBinaryMessenger>*)messenger;

@end

NS_ASSUME_NONNULL_END
#import "FlutterIosTextLabel.h"

@implementation FlutterIosTextLabel

//在这里只是创建了一个UILabel
- (instancetype)initWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id _Nullable)args binaryMessenger:(NSObject<FlutterBinaryMessenger>*)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.h>


NS_ASSUME_NONNULL_BEGIN

@interface FlutterIosTextLabelFactory : NSObject<FlutterPlatformViewFactory>

- (instancetype)initWithMessenger:(NSObject<FlutterBinaryMessenger>*)messenger;


@end

NS_ASSUME_NONNULL_END
#import "FlutterIosTextLabelFactory.h"
#import "FlutterIosTextLabel.h"



@implementation FlutterIosTextLabelFactory
{
    NSObject<FlutterBinaryMessenger> *_messenger;
}

- (instancetype)initWithMessenger:(NSObject<FlutterBinaryMessenger>*)messenger {
  self = [super init];
  if (self) {
    _messenger = messenger;
  }
  return self;
}

- (NSObject<FlutterPlatformView>*)createWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id _Nullable)args {
  return [[FlutterIosTextLabel alloc] initWithFrame:frame viewIdentifier:viewId arguments:args binaryMessenger:_messenger];
}

-(NSObject<FlutterMessageCodec> *)createArgsCodec{
    return [FlutterStandardMessageCodec sharedInstance];
}
  • 创建 FlutterIosTextLabelPlugin
#import <Foundation/Foundation.h>
#import <Flutter/Flutter.h>

NS_ASSUME_NONNULL_BEGIN

@interface FlutterIosTextLabelPlugin : NSObject<FlutterPlugin>
+ (void)registerWithRegistrar:(nonnull NSObject<FlutterPluginRegistrar> *)registrar;
@end

NS_ASSUME_NONNULL_END
#import "FlutterIosTextLabelPlugin.h"
#import "FlutterIosTextLabelFactory.h"

@implementation FlutterIosTextLabelPlugin

+ (void)registerWithRegistrar:(nonnull NSObject<FlutterPluginRegistrar> *)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属性。

原先AppDelegate继承关系非必须继承FlutterAppDelegate,只要在 FlutterBoost.instance 正确注册即可。

#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate
@end

AppDelegate.m中引入相关头文件

#import "FlutterIosTextLabel.h"
#import "GeneratedPluginRegistrant.h"
#import "FlutterIosTextLabelPlugin.h"

在AppDelegate.m中注册插件,在引入 flutter_boost的情况下,需要等 flutter_boost初始化完成后,用FlutterEngine对插件进行初始化。

@interface AppDelegate ()

@end

@implementation 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插件
//        NSObject<FlutterPluginRegistrar> *registrar = [engine registrarForPlugin:@"custom_platform_view_plugin"];
//        FlutterIosTextLabelFactory *factory = [[FlutterIosTextLabelFactory alloc] initWithMessenger:registrar.messenger];
//        [registrar registerViewFactory:factory withId:@"custom_platform_view"];
        
        // `升级处理` 这里正确注册使用即可
        NSObject<FlutterPluginRegistrar> *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);

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("详情"),
      ),
      body: const Center(
        child: IOSCompositionWidget(),
      ),
    );
  }
}

class IOSCompositionWidget extends StatelessWidget {
  const IOSCompositionWidget({super.key});

  
  Widget 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 Map<String, 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。

注意事项

  1. FlutterIosTextLabelFactory中的createArgsCodec方法一定不能遗漏,否则会导致传值不成功。类型也一定要和Dart部分的native.dart->IOSCompositionWidget-> UiKitView-> creationParamsCodec保持一致。否则会导致崩溃。
  2. 使用官方文档中的写法是没有问题,但是本案例中使用了flutter_boost,再跟着官网集成就会出现问题。需要更flutter_boost初始化完成,再对FlutterEngine对插件进行初始化。
  3. 其中withId:xxx,xxx代表控件的ID,需要和Dart部分的IOSCompositionWidget中的viewType保持一致。命名为:custom_platform_view
  4. 其中registrarForPlugin:xxx,xxx代表插件的ID。命名为:custom_platform_view_plugin

原生和flutter互相通讯:文章来源地址https://www.toymoban.com/news/detail-652537.html

到了这里,关于FlutterBoost 实现Flutter页面内嵌iOS view的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp实现微信小程序内嵌h5页面的相互跳转

    前期准备3个页面,小程序内2个,h5一个。 小程序内:操作页pageA,展示容纳h5的展示页PageWebview.vue。 h5:h5页面pageB,并且有可以访问的线上url。 【微信小程序pageA-内嵌h5页面pageB】 1.1 pageA实现点击跳转,将pageB的访问地址url拼接,并进入展示页PageWebview.vue 1.2 PageWebview.vue页面用

    2024年02月12日
    浏览(69)
  • vue实现弹出框内嵌页面展示,添加tab切换展示实时加载

    最近做业务的时候,发现产品的原型图上有一个弹出框,上面包含了两个窗口要进行切换。 每个窗口都有分页列表展示、搜索、添加和删除,感觉就是两个完整的页面,如果全写在一个页面会很麻烦,还可能会出现一系列的问题,后期改起来比较麻烦,所以我就准备分开来写

    2024年02月16日
    浏览(42)
  • flutter开发实战-MethodChannel实现flutter与iOS双向通信

    flutter开发实战-MethodChannel实现flutter与iOS双向通信 最近开发中需要iOS与flutter实现通信,这里使用的MethodChannel 如果需要flutter与Android实现双向通信,请看 https://blog.csdn.net/gloryFlow/article/details/132218837 这部分与https://blog.csdn.net/gloryFlow/article/details/132218837中的一致,这里实现一下

    2024年02月13日
    浏览(58)
  • Android/iOS内嵌Unity开发示例

    目录 前言 背景 正文 环境 新建工程 Unity导出 Android接入 如何使用 作为Activity 总结 1.Android调用Unity 2.Unity调用Android 3.C/C++“中转站” 参考资料 Unity 与 Android/iOS 交叉开发主要有两种方式,以 Android 为例,一是 Android 生成 jar 或者 aar 包,导入到 unity3d plugin/bin/ 目录下; 二是 U

    2024年02月02日
    浏览(36)
  • flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果

    flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果 在开发过程中,经常使用到提示框Dialog,与sheet,使用到了flutter的showDialog与showModalBottomSheet 我这里类似alert弹窗直接调用 flutter 中提供的showDialog()函数显示对话框。 我这里类似Sheet底部弹窗调用 flutter 中提供的show

    2024年02月16日
    浏览(39)
  • Flutter仿写微信导航栏快速实现页面导航

    前面介绍了APP顶部导航栏AppBar,今天来介绍下Flutter实现APP底部导航栏。我们以仿写微信的底部导航栏来举例说明。 要实现类似微信底部的导航栏可以使用TabBar或者BottomNavigationBar来实现。下面分别介绍。 在Flutter中,TabBar是一个用于创建选项卡式导航的常用组件。它通常与T

    2024年02月05日
    浏览(39)
  • flutter使用getx进行数据状态管理,实现页面响应式

    无论是什么样的应用,都还是需要最基础的数据来支撑的,而且不同的页面之间可能需要共享数据状态,这就显得数据状态管理非常有必要了。因为我这里使用了get依赖库,所以就可以直接在项目中使用getx来管理状态,不想再使用别的框架了。而且getx使用起来也挺方便的。

    2024年01月22日
    浏览(45)
  • ArkTS-WebView内嵌H5页面

    访问在线网页时需添加网络权限: ohos.permission.INTERNET module.json5文件配置 踩坑日记 加载网页效果 无法在预览器中查看 ,需要 在模拟器或者真机中展示项目 Web组件的使用非常简单,只需要ArkTS文件中创建一个Web组件,传入两个参数就可以了。其中src指定引用的网页路径,co

    2024年01月15日
    浏览(41)
  • 小程序内嵌H5页面监听小程序的返回事件

    因为业务上有需求,在开发小程序的时候有些页面要使用web-view组件嵌套H5页面 有个页面内有个表单,在表单内容还为填写完成的时候,监听用户点击左上角返回事件,弹出一个提示框,因为H5页面在小程序中的层级很高,所以弹出提示框只能在H5页面内完成,因此要在H5页面

    2024年02月11日
    浏览(50)
  • 微信小程序内嵌H5页面获取openid+分享功能

    主要实现功能:1.通过webview实现小程序内嵌H5页面                          2.在H5页面获取到用户的openid                          3.在H5页面实现分享获取到分享人的openid和被分享者的openid 代码实现: 1.通过webview实现小程序内嵌H5页面 传参:在地址后面加入的参数就是我

    2024年04月23日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包