Flutter 4.12.9支持Android Auto/CarPlay，求MapViewHost类及新类使用指引

关于MapViewHost类的说明 #

MapViewHost并非Flutter Dart层的类，它是Android Auto原生AndroidX Car库中的androidx.car.app.navigation.model.MapViewHost，用于在车载导航场景中承载地图视图。若需使用该类，需先在Android端配置相关依赖。

Android Auto适配步骤与示例 #

1. 配置Android端依赖与清单

在android/app/build.gradle中添加AndroidX Car库依赖：

dependencies {
    implementation 'androidx.car.app:app:1.4.0'
    implementation 'androidx.car.app:app-navigation:1.4.0'
}

在AndroidManifest.xml中注册Car服务组件：

<service
    android:name=".CarAppService"
    android:exported="true">
    <intent-filter>
        <action android:name="androidx.car.app.CarAppService" />
    </intent-filter>
</service>

2. 实现原生CarService并使用MapViewHost

创建CarAppService.kt（或Java）类，通过MapViewHost承载Flutter视图：

import androidx.car.app.CarAppService
import androidx.car.app.Session
import androidx.car.app.navigation.model.MapViewHost
import io.flutter.embedding.android.FlutterView
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.embedding.engine.dart.DartExecutor

class CarAppService : CarAppService() {
    override fun onCreateSession(): Session {
        return object : Session() {
            override fun onCreateScreen(intent: android.content.Intent): androidx.car.app.Screen {
                val flutterView = FlutterView(this@CarAppService)
                // 初始化Flutter引擎并关联视图
                val engine = FlutterEngine(this@CarAppService)
                engine.dartExecutor.executeDartEntrypoint(
                    DartExecutor.DartEntrypoint.createDefault()
                )
                flutterView.attachToFlutterEngine(engine)
                
                // 创建MapViewHost并绑定Flutter视图
                val mapViewHost = MapViewHost.Builder()
                    .setView(flutterView)
                    .build()
                
                return androidx.car.app.navigation.model.NavigationScreen.Builder(mapViewHost)
                    .build()
            }
        }
    }
}

CarPlay适配步骤与示例 #

1. 配置iOS Info.plist

在ios/Runner/Info.plist中添加CarPlay相关配置：

<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
    <string>external-accessory</string>
</array>
<key>NSBluetoothAlwaysUsageDescription</key>
<string>需要蓝牙连接CarPlay设备</string>
<key>CarPlayApplication</key>
<dict>
    <key>CFBundleIdentifier</key>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER).carplay</string>
    <key>UISceneConfigurations</key>
    <dict>
        <key>CPTemplateApplicationSceneSessionRoleApplication</key>
        <array>
            <dict>
                <key>UISceneDelegateClassName</key>
                <string>CarPlaySceneDelegate</string>
                <key>UISceneConfigurationName</key>
                <string>CarPlay Configuration</string>
            </dict>
        </array>
    </dict>
</dict>

2. 实现CarPlaySceneDelegate

创建CarPlaySceneDelegate.swift类，关联Flutter引擎：

import UIKit
import Flutter
import CarPlay

class CarPlaySceneDelegate: UIResponder, CPTemplateApplicationSceneDelegate {
    var flutterEngine: FlutterEngine?

    func templateApplicationScene(_ scene: CPTemplateApplicationScene, didConnect interfaceController: CPInterfaceController) {
        // 初始化Flutter引擎
        flutterEngine = FlutterEngine(name: "CarPlayEngine")
        flutterEngine?.run()
        GeneratedPluginRegistrant.register(with: flutterEngine!)
        
        // 创建Flutter视图并添加到CarPlay界面
        let flutterView = FlutterViewController(engine: flutterEngine!, nibName: nil, bundle: nil)
        let template = CPNavigationTemplate()
        template.tabTitle = "导航"
        interfaceController.setRootTemplate(template, animated: true)
    }
}

Flutter Dart层交互示例 #

通过平台通道实现Flutter与车载原生功能的交互：

import 'package:flutter/services.dart';

class CarIntegration {
  static const _channel = MethodChannel('com.example/car_integration');

  /// 调用车载地图展示
  static Future<void> showCarMap() async {
    try {
      await _channel.invokeMethod('show_map');
    } on PlatformException catch (e) {
      print("车载地图调用失败: ${e.message}");
    }
  }
}

// 在页面中使用
ElevatedButton(
  onPressed: () => CarIntegration.showCarMap(),
  child: const Text('打开车载地图'),
)

实用技巧 #

• 启用实验性支持：Flutter 4.x的车载功能仍处于实验阶段，需在main.dart中启用相关配置：

  void main() {
    WidgetsFlutterBinding.ensureInitialized();
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
    runApp(const MyApp());
  }
  

• 车载UI适配：车载屏幕尺寸有限，需使用大字体、高对比度布局，避免复杂交互；可通过MediaQuery获取车载屏幕参数调整UI。
• 调试工具：Android使用Android Studio的车载模拟器，iOS使用Xcode的CarPlay模拟器进行调试。

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