期望支持这种场景，flutter页面嵌入到native页面里显示，flutter页面只做为native页面的一部分模块

将 Flutter 页面嵌入到原生的 iOS 或 Android 应用中是一个常见的需求，特别是在希望利用 Flutter 的跨平台 UI 功能，同时保留现有的原生应用时。Flutter 提供了一些方法，可以让你将 Flutter 的页面嵌入到原生的 iOS 或 Android 页面中。

在 iOS 中嵌入 Flutter 页面步骤 1: 安装 Flutter 依赖确保你的 iOS 项目已经集成了 Flutter 模块。如果还没有，你需要先创建一个 Flutter 模块，然后将其集成到 iOS 项目中。

创建 Flutter 模块：

flutter create --template module flutter_module

将 Flutter 模块添加到你的 iOS 项目中：在 Podfile 中添加以下内容来引入 Flutter 模块：

flutter_application_path = '../flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

然后运行 pod install。

步骤 2: 使用 FlutterViewController 在 iOS 中，使用 FlutterViewController 来呈现 Flutter 页面。

在你的视图控制器中添加如下代码以显示 Flutter 页面：

import Flutter
import UIKit

class MyViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
        let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
        self.present(flutterViewController, animated: true, completion: nil)
    }
}

你可以通过 present 或者将 FlutterViewController 作为子视图控制器嵌入到现有的页面中。

步骤 3: 在 AppDelegate 中初始化 FlutterEngine 在 AppDelegate.swift 文件中初始化 FlutterEngine：

import Flutter

@UIApplicationMain
class AppDelegate: FlutterAppDelegate {
    var flutterEngine: FlutterEngine!

    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        self.flutterEngine = FlutterEngine(name: "my flutter engine")
        self.flutterEngine.run()
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

在 Android 中嵌入 Flutter 页面步骤 1: 安装 Flutter 依赖确保你的 Android 项目中已经集成了 Flutter 模块。

创建 Flutter 模块：

flutter create --template module flutter_module

在 Android 项目中的 settings.gradle 中引入 Flutter 模块：

include ':app'
setBinding(new Binding([gradle: this]))
evaluate(new File(
    settingsDir.parentFile,
    'flutter_module/.android/include_flutter.groovy'
))

在 app/build.gradle 中添加依赖：

implementation project(':flutter')

步骤 2: 使用 FlutterActivity 在 Android 中，你可以通过 FlutterActivity 来启动一个 Flutter 页面。

在 MainActivity.java 或 MainActivity.kt 中启动 Flutter 页面：

import io.flutter.embedding.android.FlutterActivity;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Start a Flutter activity
        startActivity(
            FlutterActivity.createDefaultIntent(this)
        );
    }
}

步骤 3: 嵌入 FlutterFragment 你还可以使用 FlutterFragment 将 Flutter 页面嵌入到现有的 Android 布局中：

在你的布局文件中定义一个容器，比如 FrameLayout：

<FrameLayout
    android:id="@+id/flutter_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

在活动中加载 FlutterFragment：

import io.flutter.embedding.android.FlutterFragment;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FlutterFragment flutterFragment = FlutterFragment.createDefault();
        getSupportFragmentManager()
            .beginTransaction()
            .add(R.id.flutter_container, flutterFragment)
            .commit();
    }
}

总结通过这些方法，你可以将 Flutter 的页面嵌入到原生的 iOS 和 Android 应用中。根据你的需求，可以选择使用 FlutterViewController、FlutterActivity 或 FlutterFragment 来实现原生与 Flutter 之间的集成。这种嵌入方式让你能够在保留原生项目的同时利用 Flutter 的跨平台能力。

flutter-thrio / flutter_thrio

期望支持这种场景，flutter页面嵌入到native页面里显示，flutter页面只做为native页面的一部分模块 #61