Flutter开发使用PlatformView显示iOS原生View（50)

最新推荐文章于 2024-05-29 16:51:23 发布

沐雨07

最新推荐文章于 2024-05-29 16:51:23 发布

阅读量3.4k

点赞数 2

分类专栏： Flutter开发教程文章标签： PlatformView Flutter开发使用PlatformView显示iOS原生View PlatformView显示iOS原生View Flutter开发如何嵌套iOS原生View

本文链接：https://blog.csdn.net/shifang07/article/details/98203951

版权

Flutter开发教程专栏收录该内容

58 篇文章 67 订阅

订阅专栏

我们在使用Flutter开发跨平台开发移动APP时，会遇到Flutter的组件满足不了原生的效果，部分控件不如原生控件好用时，就想在Flutter 的Widget 中使用iOS原生View来组合实现良好的效果。PlatformView是 Flutter 官方提供的一个可以嵌入 Android 和 iOS 平台原生 view 的小部件。

什么是 PlatformView?

PlatformView是 flutter 官方提供的一个可以嵌入 Android 和 iOS 平台原生 view 的小部件。
在我们实际开发中，我们遇到一些 Flutter 官方没有提供的插件可以自己创建编写插件来实现部分功能，但是原生View在 Flutter 中会遮挡Widget，比如你想使用高德地图sdk、视频播放器、直播等原生控件，就无法很好的与 Flutter 项目结合。
Flutter 给Android提供了 AndroidView可以实现将 View 存放到Widget中。iOS 使用 UiKitView 将 View 存放到Widget中。

PlatformView是Flutter官方在1.0版本推出的组件，以解决开发者想在Flutter中嵌入Android和iOS平台原生View的Widget。例如想嵌入地图、视频播放器等原生组件，对于想尝试Flutter，但是又想低成本的迁移复杂组件的团队，可以尝试PlatformView，在 Dart 中的类对应到 iOS 和 Android 平台分别是UIKitView和AndroidView。

Flutter 中嵌套iOS原生组件流程：

1 info.plist文件设置

iOS端的UiKitView目前还只是preview状态, 默认是不支持的, 需要手动打开开关。在info.plist文件中新增一行io.flutter.embedded_views_preview为true.

<key>io.flutter.embedded_views_preview</key>
<true/>

在这里插入图片描述

2 制作插件工程（名字：activity_indicator）

3 在lib文件夹下的activity_indicator.dart 中编写如下代码：

在这里插入图片描述

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

typedef void UIActivityIndicatorWidgetCreatedCallback(ActivityIndicatorController controller);

class ActivityIndicatorController {
  ActivityIndicatorController._(int id)
      : _channel = MethodChannel('plugins/activity_indicator_$id');

  final MethodChannel _channel;

  Future<void> start() async {
    return _channel.invokeMethod('start');
  }

  Future<void> stop() async {
    return _channel.invokeMethod('stop');
  }
}

class UIActivityIndicator extends StatefulWidget{

  const UIActivityIndicator({
    Key key,
    this.onActivityIndicatorWidgetCreated,
    this.hexColor,

  }):super(key:key);

  final UIActivityIndicatorWidgetCreatedCallback onActivityIndicatorWidgetCreated;
  final String hexColor;

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _UIActivityIndicatorState();
  }

}

class _UIActivityIndicatorState extends State<UIActivityIndicator>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    if(defaultTargetPlatform == TargetPlatform.iOS){
      return UiKitView(
        viewType: "plugins/activity_indicator",
        onPlatformViewCreated:_onPlatformViewCreated,
        creationParams: <String,dynamic>{
          "hexColor":widget.hexColor,
          "hidesWhenStopped":true,
        },
        creationParamsCodec: new StandardMessageCodec(),
      );
    }
    return Text('activity_indicator插件尚不支持$defaultTargetPlatform ');
  }

  void _onPlatformViewCreated(int id){
    if(widget.onActivityIndicatorWidgetCreated == null){
      return;
    }
    widget.onActivityIndicatorWidgetCreated(new ActivityIndicatorController._(id));
  }
}

上面代码释意：
使用MethodChannel从Flutter执行本机代码，也会编写接收MethodChannel和invokeMethod参数的代码，并在本机端执行相应的处理。这次实现它以便可以通过ActivityIndicatorController执行本机代码。

UIKitView用于调用iOS视图，参数viewType用于确定本机端的目标View的返回。对于Android，我们使用AndroidView但指定viewType不会更改。此外，onPlatformViewCreated可以将ActivityIndicatorController与UIActivityIndicator小部件一起使用。要将参数传递给OC端，请使用creationParams。

4 main.dart 修改

接下来，编辑example/lib/main.dart并创建一个屏幕。将使用之前创建的UIActivityIndicator小部件。
在这里插入图片描述

import 'package:flutter/material.dart';
import 'package:activity_indicator/activity_indicator.dart';

void main() => runApp(MaterialApp(
  home: ActivityIndicatorExample(),
));

class ActivityIndicatorExample extends StatelessWidget{

   ActivityIndicatorController controller;

  void _onActivityIndicatorControllerCreated(ActivityIndicatorController _controller){
    controller = _controller;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: const Text("加载测试"),),
      body: Stack(
        alignment: Alignment.bottomCenter,
        children: <Widget>[
          new Container(
            child: new Stack(
              children: <Widget>[
                UIActivityIndicator(
                  hexColor: "FF0000",
                  onActivityIndicatorWidgetCreated: _onActivityIndicatorControllerCreated,
                ),
                new Container(
                  alignment: Alignment.center,
                  child: new Text("我是flutter控件，没有被遮挡~"),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 45.0,right: 45.0,top: 0.0,bottom: 50.0),
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                FloatingActionButton(
                  onPressed: (){
                    controller.start();
                  },
                  child: new Text("Start"),
                ),
                FloatingActionButton(
                  onPressed: (){
                    controller.stop();
                  },
                  child: new Text("Stop"),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

5 iOS 端实现

在ios/Classes增加FlutterActivityIndicator、UIColor+RGB文件

新建类，提供FlutterPlatformView和FlutterPlatformViewFactory协议

FlutterActivityIndicator.h

//  FlutterActivityIndicator.h
//  activity_indicator

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

NS_ASSUME_NONNULL_BEGIN

@interface FlutterActivityIndicatorController : NSObject<FlutterPlatformView>

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

@end

@interface FlutterActivityIndicatorFactory : NSObject<FlutterPlatformViewFactory>

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

@end
NS_ASSUME_NONNULL_END

FlutterActivityIndicator.m

//  FlutterActivityIndicator.m
//  activity_indicator

#import "FlutterActivityIndicator.h"
#import "UIColor+RGB.h"

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

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

-(NSObject<FlutterMessageCodec> *)createArgsCodec{
    return [FlutterStandardMessageCodec sharedInstance];
}

-(NSObject<FlutterPlatformView> *)createWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id)args{
    
   FlutterActivityIndicatorController*activity = [[FlutterActivityIndicatorController alloc] initWithWithFrame:frame viewIdentifier:viewId arguments:args binaryMessenger:_messenger];
    
    return activity;
}

@end

@implementation FlutterActivityIndicatorController{
    int64_t _viewId;
    FlutterMethodChannel* _channel;
    UIActivityIndicatorView * _indicator;
}

- (instancetype)initWithWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id)args binaryMessenger:(NSObject<FlutterBinaryMessenger> *)messenger{
    if ([super init]) {
        
        NSDictionary *dic = args;
        NSString *hexColor = dic[@"hexColor"];
        bool hidesWhenStopped = [dic[@"hidesWhenStopped"] boolValue];
        
        _indicator = [[UIActivityIndicatorView alloc]init];
        _indicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleWhiteLarge;
        _indicator.color = [UIColor colorWithHexString:hexColor];
        _indicator.hidesWhenStopped = hidesWhenStopped;
        
        _viewId = viewId;
        NSString* channelName = [NSString stringWithFormat:@"plugins/activity_indicator_%lld", viewId];
        _channel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:messenger];
        __weak __typeof__(self) weakSelf = self;
        [_channel setMethodCallHandler:^(FlutterMethodCall *  call, FlutterResult  result) {
            [weakSelf onMethodCall:call result:result];
        }];
    }
    
    return self;
}

-(UIView *)view{
    return _indicator;
}

-(void)onMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result{
    if ([[call method] isEqualToString:@"start"]) {
        [_indicator startAnimating];
    } else if ([[call method] isEqualToString:@"stop"]){
        [_indicator stopAnimating];
    } else {
        result(FlutterMethodNotImplemented);
    }
}

@end

OC 端接受参数，工厂方法创建View对象

UIColor+RGB.h

//  UIColor+RGB.h
//  activity_indicator

#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN

@interface UIColor (RGB)
+ (UIColor*)colorWithHexString:(NSString*)stringToConvert;
@end

NS_ASSUME_NONNULL_END

UIColor+RGB.m

//  UIColor+RGB.m
//  activity_indicator

#import "UIColor+RGB.h"

@implementation UIColor (RGB)

+ (UIColor*)colorWithHexString:(NSString*)stringToConvert{
    if([stringToConvert hasPrefix:@"#"])
    {
        stringToConvert = [stringToConvert substringFromIndex:1];
    }
    NSScanner*scanner = [NSScanner scannerWithString:stringToConvert];
    unsigned hexNum;
    if(![scanner scanHexInt:&hexNum])
    {
        return nil;
    }
    return[UIColor colorWithRGBHex:hexNum];
}

+ (UIColor*)colorWithRGBHex:(UInt32)hex{
    int r = (hex >>16) &0xFF;
    int g = (hex >>8) &0xFF;
    int b = (hex) &0xFF;
    return[UIColor colorWithRed:r /255.0f
                         green:g /255.0f
                          blue:b /255.0f
                         alpha:1.0f];
}
@end

6 修改自动生成的文件 ActivityIndicatorPlugin.m

将原来的代码注释掉，修改为如下代码：

/*
#import "ActivityIndicatorPlugin.h"

@implementation ActivityIndicatorPlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
  FlutterMethodChannel* channel = [FlutterMethodChannel
      methodChannelWithName:@"activity_indicator"
            binaryMessenger:[registrar messenger]];
  ActivityIndicatorPlugin* instance = [[ActivityIndicatorPlugin alloc] init];
  [registrar addMethodCallDelegate:instance channel:channel];
}

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
  if ([@"getPlatformVersion" isEqualToString:call.method]) {
    result([@"iOS " stringByAppendingString:[[UIDevice currentDevice] systemVersion]]);
  } else {
    result(FlutterMethodNotImplemented);
  }
}

@end
*/

#import "ActivityIndicatorPlugin.h"
#import "FlutterActivityIndicator.h"

@implementation ActivityIndicatorPlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
    [registrar registerViewFactory:[[FlutterActivityIndicatorFactory alloc] initWithMessenger:registrar.messenger] withId:@"plugins/activity_indicator"];
}

@end

保证你的viewId指定的字符串与flutter端代码的ViewType指定的字符串相匹配

7 演示

在这里插入图片描述

文章参考

Flutter使用 PlatforView 显示 iOS 原生 View
Flutter PlatformView: 如何通过原生view创建widget

沐雨07

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Flutter开发使用PlatformView显示iOS原生View（50)

我们在使用Flutter开发跨平台开发移动APP时，会遇到Flutter的组件满足不了原生的效果，部分控件不如原生控件好用时，就想在Flutter 的Widget 中使用iOS原生View来组合实现良好的效果。PlatformView是 Flutter 官方提供的一个可以嵌入 Android 和 iOS 平台原生 view 的小部件。什么是 PlatformView?PlatformView...
复制链接

扫一扫