能否在Flutter中以Widget形式嵌入带XML的Android Mapbox Navigation Activity？

可以实现你的需求，但不建议直接显示完整的Android Activity，而是通过Platform Views将原生Mapbox导航视图作为Flutter Widget嵌入，这样就能让导航视图和你自定义的Flutter UI共存。以下是具体步骤：

步骤1：配置Android端依赖 #

在android/app/build.gradle的dependencies中添加Mapbox导航UI依赖（版本可根据实际情况调整）：

dependencies {
    // 其他依赖...
    implementation 'com.mapbox.navigation:ui:2.16.0'
}

在AndroidManifest.xml中添加必要权限和Mapbox Token：

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

<meta-data
    android:name="com.mapbox.token"
    android:value="YOUR_MAPBOX_ACCESS_TOKEN"/>

步骤2：创建原生导航View类 #

编写一个继承PlatformView的类，加载Mapbox导航的视图（可通过XML布局或代码创建）：

class MapboxNavigationView(
    context: Context,
    id: Int,
    creationParams: Map<String?, Any?>?,
) : PlatformView {
    private val navigationView: NavigationView

    init {
        // 加载自定义XML布局（需提前在res/layout下创建navigation_view.xml）
        navigationView = LayoutInflater.from(context)
            .inflate(R.layout.navigation_view, null) as NavigationView

        // 初始化Mapbox导航配置
        val navigationOptions = NavigationOptions.Builder(context)
            .accessToken("YOUR_MAPBOX_ACCESS_TOKEN")
            .build()
        navigationView.initialize(navigationOptions)

        // 接收Flutter传递的导航参数（起点、终点）
        creationParams?.let { params ->
            val startLat = params["startLat"] as Double
            val startLng = params["startLng"] as Double
            val endLat = params["endLat"] as Double
            val endLng = params["endLng"] as Double

            // 构建导航路线并启动导航
            val routeOptions = RouteOptions.builder(context)
                .accessToken("YOUR_MAPBOX_ACCESS_TOKEN")
                .coordinatesList(
                    listOf(
                        Point.fromLngLat(startLng, startLat),
                        Point.fromLngLat(endLng, endLat)
                    )
                )
                .build()
            navigationView.startNavigation(routeOptions)
        }
    }

    override fun getView(): View = navigationView

    override fun dispose() {
        navigationView.onDestroy()
    }
}

步骤3：注册Platform View Factory #

创建Factory类用于生成上述View，并在MainActivity中注册：

class MapboxNavigationViewFactory(private val messenger: BinaryMessenger) : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
    override fun create(context: Context, viewId: Int, args: Any?): PlatformView {
        val creationParams = args as Map<String?, Any?>?
        return MapboxNavigationView(context, viewId, creationParams)
    }
}

// 在MainActivity中注册
class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        flutterEngine.platformViewsController.registry.registerViewFactory(
            "com.your_app/mapbox_navigation", // 自定义viewType标识
            MapboxNavigationViewFactory(flutterEngine.dartExecutor.binaryMessenger)
        )
    }
}

步骤4：Flutter端创建嵌入Widget #

使用AndroidView将原生导航视图包装成Flutter Widget：

class MapboxNavigationWidget extends StatelessWidget {
  final double startLat;
  final double startLng;
  final double endLat;
  final double endLng;

  const MapboxNavigationWidget({
    super.key,
    required this.startLat,
    required this.startLng,
    required this.endLat,
    required this.endLng,
  });

  @override
  Widget build(BuildContext context) {
    return AndroidView(
      viewType: "com.your_app/mapbox_navigation", // 和原生注册的标识一致
      creationParams: {
        "startLat": startLat,
        "startLng": startLng,
        "endLat": endLat,
        "endLng": endLng,
      },
      creationParamsCodec: const StandardMessageCodec(),
    );
  }
}

注意事项 #

• 权限处理：记得在Flutter端动态申请位置权限，避免导航功能异常。
• 版本兼容：确保Mapbox SDK版本与Flutter、Android Gradle插件版本兼容，避免编译错误。
• 交互扩展：如果需要Flutter和原生导航交互（比如结束导航、获取导航状态），可以通过MethodChannel实现双向通信。
• 替代方案：若不想用原生View，可尝试Flutter版Mapbox插件（如mapbox_gl），但原生导航的功能完整性和稳定性通常更优，需根据需求选择。

内容的提问来源于stack exchange，提问作者ThanhDT