kmpdfkit_demo

ComPDFKit SDK Flutter接入文档

接入方案

ComPDFKit SDK在Flutter中采用混合兼容方式进行对接。Android和iOS端分别采用PlatformViewLink和UiKitView，并通过MethodChannel和EventChannel进行交互。我们只封装了CPDFReaderView，而其他注释工具和书签列表等功能则使用Flutter开发。 关于MethodChannel、EventChannel使用方法请参考以下文章 Flutter Native交互

graph TD
A[Flutter] --> B(init Configuration)
B --> C[ComPDFKitWidget.dart]
C -->|Platform.isAndroid| D[PlatformViewlink]
C -->|Platform.isIOS| E[UiKitView]
D --> F[Android]
E --> G[iOS]
F --> H[FlutterCPDFReaderView]
G --> H[FlutterCPDFReaderView]
H --> |return| I[PDFReaderView]
I --> |add| ComPDFKitSDK-CPDFReaderView

交互流程

Flutter与Native端通信使用MethodChannel、EventChannel进行交互，以下将以设置CPDFReaderView翻页模式举例展示交互流程

sequenceDiagram
setIsContinueMode->>MethodChannel: true
MethodChannel->> Native(Android、iOS): invokeMethod(functionName, true)
NOTE right of Native(Android、iOS): CPDFReaderView set isContinueMode = true
Native(Android、iOS)--> MethodChannel: return continue mode
MethodChannel--> setIsContinueMode:get continue mode

接口列表

• CPDFReaderViewCallBack
• 阅读页设置
  • isVerticalMode
  • isContinueMode
  • isDoublePageMode
  • isCoverPageMode
  • isCropMode

CPDFReaderView响应事件

• 通讯方式：EventChannel
• 方法名：event_reader_view_call_back
• 参数：“readerViewCallBack”
• 说明：监听CPDFReaderView滑动位置、点击文档区域、滑动状态监听
• 响应数据传递方式：Map
• 响应事件：

Key	Value	类型	说明
eventType	onTapMainDocArea	String	点击主文档区域监听
eventType	onScrollEnd	String	滑动结束
eventType	onScrolling	String	滑动中
eventType	onMoveToChild	String	滑动到指定页码
eventType	onRecordLastJumpPageNum	String	记录上次跳转页码
eventType	pageIndex	String	页码，仅onMoveToChild、onRecordLastJumpPageNum

示例： 1. Flutter中创建EventChannel对象

const _readerViewCallBackEventChannel =
    EventChannel('event_reader_view_call_back');

2. 定义一个方法例如setReaderViewCallbackListener

CancelListener setReaderViewCallbackListener() {
  var subscription = _readerViewCallBackEventChannel
      .receiveBroadcastStream(eventSinkId.readerViewCallBack.index)//任何参数都可
      .listen((data) {
    Map<dynamic, dynamic> result = data;
    String eventType = result[EventParameters.eventType];
    switch (eventType) {
      case EventParameters.onTapMainDocArea:
        ...
        break;
      case EventParameters.onMoveToChild:
        int pageIndex = result[EventParameters.pageIndex];
        ...
        break;
      case EventParameters.onRecordLastJumpPageNum:
        int pageIndex = result[EventParameters.pageIndex];
        ...
        break;
      case EventParameters.onScrollEnd:
        ...
        break;
      case EventParameters.onScrolling:
        ...
        break;
      default:
        break;
    }
  }, cancelOnError: true);
  return () {
    subscription.cancel();
  };
}

3. 在混合集成模式Widget创建完成的回调中调用setReaderViewCallbackListener

• PlatformViewLink dart ..addOnPlatformViewCreatedListener((id) { setReaderViewCallbackListener(); })
• UIKitView dart onPlatformViewCreated: (id){ setReaderViewCallbackListener(); }

4. 事件回调 在IReaderViewCallback中通过EventChannel.EventSink.success返回结果

Android

• 注册EventChannel

      val readerViewCallbackEventChannel = EventChannel(messenger, EVENT_CHANNEL_READER_VIEW_CALL_BACK)
      readerViewCallbackEventChannel.setStreamHandler(object : EventChannel.StreamHandler {
          override fun onListen(arguments: Any?, events: EventChannel.EventSink?) {
              readerView.setReaderViewCallbackEventEmitter1(events)
          }
  
          override fun onCancel(arguments: Any?) {
          }
      })
  

• 在CPDFReaderView对应的回调中返回数据

  override fun onTapMainDocArea() {
      readerViewCallbackEventEmitter?.success(mapOf("eventType" to “onTapMainDocArea”))
  }
  
  override fun onMoveToChild(pageIndex: Int) {
      readerViewCallbackEventEmitter?.success(mapOf("eventType" to “onMoveToChild”, "pageIndex" to pageIndex))
  }
  
  override fun onEndScroll() {
      readerViewCallbackEventEmitter?.success(mapOf("eventType" to “onScrollEnd”))
  }
  
  override fun onScrolling() {
      readerViewCallbackEventEmitter?.success(mapOf("eventType" to “onScrolling”))
  }
  
  override fun onRecordLastJumpPageNum(pageIndex: Int) {
      readerViewCallbackEventEmitter?.success(mapOf("eventType" to “onRecordLastJumpPageNum”, "pageIndex" to pageIndex))
  }
  

iOS

• 注册FlutterEventChannel

阅读页设置

---

isVerticalMode

1. scrollDirectionIsVerticalMode

• 通讯方式：MethodChannel
• 方法名：getScrollDirection
• 参数：无
• 说明：获取当前CPDFReaderView滚动方向
• 响应数据传递类型：String
• 响应数据：

参数名称	类型	说明
vertical	String	垂直滑动
horizontal	String	水平滑动

示例

Flutter获取滚动方向

///这里可以定义一个共用的MethodChannel
const _methodChannel = MethodChannel('com.compdfkit.pdf.flutter');

//获取滚动方向
Future<bool> scrollDirectionIsVerticalMode() async {
  String scrollDirection =
      await _methodChannel.invokeMethod(Functions.getScrollDirection);
  return scrollDirection == ScrollDirection.vertical;
}

Android 返回当前滚动方向

//定义MethodChannel对象
val methodChannel = MethodChannel(messenger, "com.compdfkit.pdf.flutter")
methodChannel.setMethodCallHandler(this)

//在onMethodCall方法中返回结果
override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
    when (call.method) {
       “getScrollDirection” -> {
          result.success(if (cpdfReaderView.isVerticalMode) “vertical” else “horizontal”)
     }
}

iOS 返回当前滚动方向

• Objective-C ```objc @implementation AppDelegate

• (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary )launchOptions { FlutterViewController controller = (FlutterViewController)self.window.rootViewController; FlutterMethodChannel methodChannel = [FlutterMethodChannel

                                        methodChannelWithName:@"com.compdfkit.pdf.flutter"
                                        binaryMessenger:controller.binaryMessenger];
  

  [methodChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {

  if([@"getScrollDirection" isEqualToString:call.method]) {
      result(@"horizontal");//此处仅示例作为参考，请从CPDFReaderView中获取滚动方向
  }
  

  }];

[GeneratedPluginRegistrant registerWithRegistry:self]; // Override point for customization after application launch. return [super application:application didFinishLaunchingWithOptions:launchOptions]; } @end

* Swift
```swift
class ComPDFKitPlugin {
    init(messenger : FlutterBinaryMessenger){
        let channel = FlutterMethodChannel(name: "com.compdfkit.pdf.flutter", binaryMessenger: messenger)
        channel.setMethodCallHandler{(call : FlutterMethodCall, result : @escaping FlutterResult) in
            if (call.method == "getScrollDirection"){
                result("vertical")//此处仅示例作为参考，请从CPDFReaderView中获取滚动方向
            }
        }
    }
}

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
      let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
      ComPDFKitPlugin(messenger: controller.binaryMessenger)//register FlutterMethodChannel
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

2. setScrollDirection

• 通讯方式：MethodChannel
• 方法名：setScrollDirection
• 说明：设置CPDFReaderView滚动方向
• 参数：

Key	Value	类型	说明
scrollDirection	"vertical"	String	设置为垂直滑动
scrollDirection	“horizontal”	String	设置为水平滑动

• 响应数据传递类型：String
• 响应事件：

参数名称	类型	说明
vertical	String	垂直滑动
horizontal	String	水平滑动

示例

Flutter 设置CPDFReaderView滚动方向

///direction : vertical or horizontal
Future<bool> setScrollDirection(String direction) async {
  String scrollDirection = await _methodChannel.invokeMethod('setScrollDirection',
      {'scrollDirection': direction});
  //原生端返回当前的滚动状态
  return scrollDirection == ScrollDirection.vertical;
}

Android端

在MethodChannel的onMethodCall方法中获取到Flutter传输的数据

//在onMethodCall方法中返回结果
override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
    val configuration = call.arguments as? HashMap<String, Any>
    when (call.method) {
       “setScrollDirection” -> {
       (configuration?.get("scrollDirection") as? String)?.let { direction->
            pdfReaderView.pdfReaderView.isVerticalMode = direction == "vertical"
            result.success(if (pdfReaderView.pdfReaderView.isVerticalMode) "vertical" else "horizontal")
       }
       else ->{
        ...
       }
     }
}

iOS

• Objective-C ```objc @implementation AppDelegate

• (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary )launchOptions { FlutterViewController controller = (FlutterViewController)self.window.rootViewController; FlutterMethodChannel methodChannel = [FlutterMethodChannel

                                        methodChannelWithName:@"com.compdfkit.pdf.flutter"
                                        binaryMessenger:controller.binaryMessenger];
  

  [methodChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {

  if([@"setScrollDirection" isEqualToString:call.method]) {
      NSDictionary* arguments = call.arguments;
      NSString* scrollDirection = arguments[@"scrollDirection"];
      //请从CPDFReaderView获取当前滑动方向并返回
      result(scrollDirection);
  }
  

  }]; [GeneratedPluginRegistrant registerWithRegistry:self]; // Override point for customization after application launch. return [super application:application didFinishLaunchingWithOptions:launchOptions]; } @end ```

• Swift swift channel.setMethodCallHandler{(call : FlutterMethodCall, result : @escaping FlutterResult) in if (call.method == "setScrollDirection"){ var convertData = arguments as! [String: String]; var scrollDirection = convertData["scrollDirection"] result(scrollDirection)//请从CPDFReaderView获取当前滑动方向并返回 } ... }

isContinueMode

1. isContinueMode

• 通讯方式：MethodChannel
• 方法名：getPageContinue
• 参数：无
• 说明：获取当前滚动方式：连续滚动、翻页滚动
• 响应数据传递类型：Boolean
• 响应数据：

参数名称	类型	说明
true	boolean	连续滚动
false	boolean	翻页滚动

示例：请参考isVerticalMode

2. setIsContinueMode

• 通讯方式：MethodChannel
• 方法名：setPageContinue
• 说明：设置CPDFReaderView滚动方式：连续滚动、翻页滚动
• 参数：

Key	Value	类型	说明
isContinueMode	true	bool	连续滚动
isContinueMode	false	bool	翻页滚动

• 响应数据传递类型：Boolean
• 响应事件：

参数名称	类型	说明
true	boolean	连续滚动
false	boolean	翻页滚动

示例：请参考isVerticalMode

---

isDoublePage

1. isContinueMode

• 通讯方式：MethodChannel
• 方法名：getPageMode
• 参数：无
• 说明：单页显示、双页显示
• 响应数据传递类型：Boolean
• 响应数据：

参数名称	类型	说明
true	boolean	双页显示
false	boolean	单页显示

示例：请参考isVerticalMode

2. setPageMode

• 通讯方式：MethodChannel
• 方法名：setPageMode
• 说明：单页显示、双页显示
• 参数：

Key	Value	类型	说明
isDoublePage	true	bool	双页显示
isDoublePage	false	bool	单页显示

• 响应数据传递类型：Boolean
• 响应事件：

参数名称	类型	说明
true	boolean	连续滚动
false	boolean	翻页滚动

示例：请参考isVerticalMode

---

isCoverPageMode

1. isCoverPageMode

• 通讯方式：MethodChannel
• 方法名：isCoverPageMode
• 参数：无
• 说明：显示模式：默认模式、封面模式
• 响应数据传递类型：Boolean
• 响应数据：

参数名称	类型	说明
true	boolean	封面模式
false	boolean	默认模式

示例：请参考isVerticalMode

2. setCoverPageMode

• 通讯方式：MethodChannel
• 方法名：setCoverPageMode
• 说明：显示模式：默认模式、封面模式
• 参数：

Key	Value	类型	说明
isCoverPageMode	true	bool	封面模式
isCoverPageMode	false	bool	默认模式

• 响应数据传递类型：Boolean
• 响应事件：

参数名称	类型	说明
true	boolean	封面模式
false	boolean	默认模式

示例：请参考isVerticalMode

---

isCropPageMode

1. isCoverPageMode

• 通讯方式：MethodChannel
• 方法名：isCropPageMode
• 参数：无
• 说明：页面显示模式：默认模式、裁剪模式
• 响应数据传递类型：Boolean
• 响应数据：

参数名称	类型	说明
true	boolean	裁剪模式
false	boolean	默认模式

示例：请参考isVerticalMode

2. setIsCropPageMode

• 通讯方式：MethodChannel
• 方法名：setIsCropPageMode
• 说明：显示模式：默认模式、裁剪模式
• 参数：

Key	Value	类型	说明
isCropPageMode	true	bool	裁剪模式
isCropPageMode	false	bool	默认模式

• 响应数据传递类型：Boolean
• 响应事件：

参数名称	类型	说明
true	boolean	裁剪模式
false	boolean	默认模式

示例：请参考isVerticalMode

---