在Flutter开发中，flutter_thrio 是一个强大的跨平台导航与页面跳转插件，它允许你在Flutter应用中嵌入原生页面，并且可以在原生页面和Flutter页面之间自由跳转。下面是一个关于如何使用 flutter_thrio 的代码示例，包括如何在Flutter和原生页面之间进行导航和跳转。

1. 安装 flutter_thrio

首先，你需要在 pubspec.yaml 文件中添加 flutter_thrio 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_thrio: ^latest_version  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

2. 配置原生项目

iOS 配置

在 ios/Runner/AppDelegate.swift 中，你需要配置 ThrioEngine 并设置 window 的 rootViewController 为 ThrioNavigator：

import UIKit
import Flutter
import flutter_thrio

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    
    let engine = FlutterEngine(name: "my_engine_id", project: nil)
    let navigator = ThrioNavigator(engine: engine, window: self.window!)
    self.window?.rootViewController = navigator
    
    // 配置ThrioEngine
    ThrioEngine.shared = ThrioEngine(engine: engine, navigator: navigator)
    
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Android 配置

在 android/app/src/main/kotlin/com/yourapp/MainActivity.kt 中，你需要配置 ThrioEngine 并设置 MainActivity 为 ThrioActivity：

package com.yourapp

import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant
import com.thrio.flutter.thrio.ThrioEngine
import com.thrio.flutter.thrio.ThrioNavigator

class MainActivity: ThrioActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        GeneratedPluginRegistrant.registerWith(flutterEngine)

        // 配置ThrioEngine
        val navigator = ThrioNavigator(flutterEngine, this)
        ThrioEngine.shared = ThrioEngine(flutterEngine, navigator)
    }
}

3. 使用 flutter_thrio 进行导航

在Flutter代码中，你可以使用 Thrio.navigator 来跳转到原生页面或者Flutter页面。以下是一个简单的示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Thrio Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Open Native Page'),
            ElevatedButton(
              onPressed: () {
                // 跳转到原生页面
                Thrio.navigator.pushNativePage(
                  url: 'native_page://example',
                  params: {
                    'key': 'value',
                  },
                );
              },
              child: Text('Go to Native Page'),
            ),
            SizedBox(height: 20),
            Text('Open Flutter Page'),
            ElevatedButton(
              onPressed: () {
                // 跳转到Flutter页面
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => FlutterPage()),
                );
              },
              child: Text('Go to Flutter Page'),
            ),
          ],
        ),
      ),
    );
  }
}

class FlutterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Page'),
      ),
      body: Center(
        child: Text('This is a Flutter page'),
      ),
    );
  }
}

4. 在原生页面中接收参数并返回结果

在原生代码中，你需要处理 flutter_thrio 传递的参数，并可以返回结果给Flutter。以下是一个简单的iOS示例：

import UIKit
import flutter_thrio

class NativePageViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 获取传递的参数
        if let params = ThrioEngine.shared?.currentParams {
            if let value = params["key"] as? String {
                print("Received parameter: \(value)")
            }
        }
        
        // 设置按钮点击事件返回结果给Flutter
        let button = UIButton(type: .system)
        button.setTitle("Return to Flutter", for: .normal)
        button.addTarget(self, action: #selector(returnToFlutter), for: .touchUpInside)
        self.view.addSubview(button)
        
        // 设置按钮的布局
        button.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
        ])
    }
    
    @objc func returnToFlutter() {
        // 返回结果给Flutter
        let result = ["result": "success"]
        ThrioEngine.shared?.popWithResult(result)
    }
}

在Android中，你需要类似地处理参数和返回结果。

以上代码示例展示了如何在Flutter和原生页面之间进行导航和参数传递。请注意，实际项目中可能需要根据具体需求进行更多的配置和调整。