Flutter调用原生页面**

IOS

2023-09-12 09:30:53

在Flutter应用程序开发中，我们经常需要与原生平台交互，以访问原生功能，例如相机、相册或本地数据库。本文将指导您了解如何在Flutter中调用原生页面，从而扩展您应用程序的功能。

1. 准备工作

要调用原生页面，您需要：

针对您要调用的特定原生平台（Android或iOS）创建Flutter项目。
拥有原生平台的开发环境（Android Studio或Xcode）。

2. 创建原生页面

为每个您想要调用的原生页面创建一个原生Activity（Android）或ViewController（iOS）。确保将这些原生类注册到各自的清单或故事板文件中。

3. 创建Flutter通道

通道是Flutter和原生代码之间通信的管道。对于每个原生页面，创建一个通道对象，该对象将在Flutter代码中使用。

4. 处理消息

在Flutter代码中，使用通道对象处理来自原生页面的消息。您可以注册消息处理程序来接收和响应这些消息。

5. 实例化原生页面

使用Flutter PlatformChannel 类实例化原生页面。您需要指定通道名称和方法名称才能调用原生页面。

6. 传递数据

您可以通过通道在Flutter和原生代码之间传递数据。使用 invokeMethod 方法将数据从Flutter传递到原生，并使用 setMethodCallHandler 处理程序从原生传递数据到Flutter。

7. 示例代码

Flutter代码（调用原生相册页面）：

import 'dart:async';

import 'package:flutter/services.dart';

Future<void> callNativeGallery() async {
  const channel = MethodChannel('com.example.flutter/gallery');

  try {
    final result = await channel.invokeMethod('openGallery');
    print(result);
  } on PlatformException catch (e) {
    print('Error: ${e.message}');
  }
}

Android原生代码（相册页面）：

import android.content.Intent;
import android.net.Uri;

public class GalleryActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Intent intent = new Intent();
    intent.setType("image/*");
    intent.setAction(Intent.ACTION_GET_CONTENT);

    startActivityForResult(Intent.createChooser(intent, "Select Picture"), 1);
  }
}

iOS原生代码（相册页面）：

import UIKit
import MobileCoreServices

class GalleryViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
  var imagePicker: UIImagePickerController!

  override func viewDidLoad() {
    super.viewDidLoad()

    imagePicker = UIImagePickerController()
    imagePicker.delegate = self
    imagePicker.sourceType = .photoLibrary
    imagePicker.mediaTypes = [kUTTypeImage as String]

    present(imagePicker, animated: true, completion: nil)
  }
}