Flutter CarPlay界面无法动态更新：变量无响应问题求助

我正在使用flutter_carplay包开发电台应用，应用每10秒通过网络请求更新当前播放曲目与下一曲目信息。

背景：应用每10秒获取当前及下一曲目信息，预期同步更新CarPlay界面。
问题：尽管已更新曲目信息并尝试刷新UI，CarPlay界面仍停留在初始加载状态，未同步更新。

已采取的措施：

• 尝试重新加载rootTemplate以刷新UI，但未解决问题；
• 确认后端数据获取与更新正常。

求助问题：

1. 是否有人遇到过flutter_carplay的类似问题？
2. 动态更新CarPlay界面有哪些推荐的方法或方案？
3. flutter_carplay在UI更新方面有哪些已知问题或限制？

相关代码示例：

import 'dart:async';
import 'dart:convert';
import 'package:myproject/metadata.dart';
import 'package:http/http.dart' as http;
import 'package:assets_audio_player/assets_audio_player.dart';
import 'package:flutter_carplay/flutter_carplay.dart';

class CarPlayManager {
  late Metadata _meta;
  final _assetsAudioPlayer = AssetsAudioPlayer.newPlayer();
  String _currentArtist = 'En direct';
  String _currentTitle = 'En direct';
  Map<String, dynamic> _nextTrack = {};
  var isPlayingVal = false;

  Future<void> _fetchMetadata() async {
    final metadata = await _meta.fetchMetadata();
    _currentTitle = metadata.title;
    _currentArtist = metadata.artist;
    _updateCarPlayUI();
  }

  Future<void> _fetchNextTrack() async {
    final response = await http.get(
      Uri.parse('https:/mynextrack.example'),
    );
    _nextTrack = json.decode(response.body);
  }

  void initializeCarPlay() async {
    _fetchMetadata();
    _fetchNextTrack();
    late Timer _timer;
    _meta = Metadata(assetsAudioPlayer: _assetsAudioPlayer);

    _timer = Timer.periodic(const Duration(seconds: 20), (timer) {
      _fetchMetadata();
      _fetchNextTrack();
      _updateCarPlayUI();
    });

    await _assetsAudioPlayer.open(
      Audio.liveStream(
        "https://mystream.example",
        metas: Metas(
          id: _currentArtist,
          title: _currentTitle,
          artist: _currentArtist,
          image: const MetasImage.asset('assets/logo.jpeg'),
        ),
      ),
      autoStart: false,
      showNotification: true,
    );
  }

  void _updateCarPlayUI() {
    FlutterCarplay.setRootTemplate(
      rootTemplate: getTemplate(),
    );
  }

  getTemplate() {
    return CPListTemplate(
      sections: [
        CPListSection(
          items: [
            CPListItem(
              text: _currentTitle,
              detailText: _currentArtist,
              isPlaying: true,
              image: 'assets/logo-no-shadow.png',
              onPress: (complete, self) {
                isPlayingVal = !isPlayingVal;
                print('isPlaying: $isPlayingVal');
                if (isPlayingVal) self.setDetailText("Chargement en cours...");
                _assetsAudioPlayer.playOrPause();

                Future.delayed(const Duration(seconds: 1), () {
                  self.setDetailText(_currentArtist);
                  complete();
                });
              },
            ),
          ],
          header: "En cours",
        ),
        CPListSection(
          items: [
            CPListItem(
              text: _nextTrack['title'] ?? 'Radio name',
              detailText: _nextTrack['artist'] ?? 'Live',
              image: 'assets/logo-no-shadow.png',
            ),
          ],
          header: "À suivre (dans ${_nextTrack['start_in'] ?? 'N/A'})",
        ),
      ],
      title: "Radio name",
      showsTabBadge: false,
      systemIcon: "house.fill",
    );
  }
}

1. 是否有人遇到过类似问题？ #

社区中确实有不少开发者反馈flutter_carplay动态更新UI时的刷新失效问题，尤其是重复调用setRootTemplate重建模板的场景，常见原因包括模板实例复用冲突、CarPlay系统对频繁更新请求的忽略，以及框架状态同步机制的不足。

2. 动态更新CarPlay界面的推荐方法 #

• 复用模板与列表项实例：不要每次更新都重建整个CPListTemplate，而是保存模板和列表项的引用，直接调用实例的更新方法（如setText、setDetailText）
• 调用模板的刷新方法：修改列表项或section后，调用模板的updateSections()或对应刷新方法通知CarPlay系统更新界面
• 确保异步操作顺序：在定时器中等待_fetchMetadata和_fetchNextTrack完成后再执行UI更新，避免数据未同步就刷新
• 主线程执行更新：Flutter的UI操作必须在主线程执行，CarPlay的更新操作也需确保在主线程（可通过WidgetsBinding.instance.addPostFrameCallback或Future.microtask包裹）

修改后的核心代码示例：

class CarPlayManager {
  // 新增：保存模板和列表项引用
  CPListTemplate? _currentTemplate;
  CPListItem? _currentTrackItem;
  CPListItem? _nextTrackItem;

  void initializeCarPlay() async {
    _meta = Metadata(assetsAudioPlayer: _assetsAudioPlayer);
    await _fetchMetadata();
    await _fetchNextTrack();
    // 初始化并保存模板引用
    _currentTemplate = getTemplate();
    await FlutterCarplay.setRootTemplate(rootTemplate: _currentTemplate!);

    Timer.periodic(const Duration(seconds: 20), (timer) async {
      await _fetchMetadata();
      await _fetchNextTrack();
      _updateCarPlayUI();
    });
    // ...其他初始化代码
  }

  void _updateCarPlayUI() {
    // 直接更新现有列表项
    _currentTrackItem?.setText(_currentTitle);
    _currentTrackItem?.setDetailText(_currentArtist);
    
    _nextTrackItem?.setText(_nextTrack['title'] ?? 'Radio name');
    _nextTrackItem?.setDetailText(_nextTrack['artist'] ?? 'Live');
    // 更新section header
    _currentTemplate?.sections[1].header = "À suivre (dans ${_nextTrack['start_in'] ?? 'N/A'})";
    // 通知模板刷新
    _currentTemplate?.updateSections();
  }

  CPListTemplate getTemplate() {
    _currentTrackItem = CPListItem(/* ...原有属性 */);
    _nextTrackItem = CPListItem(/* ...原有属性 */);
    return CPListTemplate(/* ...原有模板结构 */);
  }
}

3. flutter_carplay在UI更新方面的已知问题或限制 #

• 模板重建限制：频繁调用setRootTemplate会触发CarPlay系统的节流机制，导致更新请求被忽略
• 状态无自动监听：框架不会自动监听数据变化并更新UI，所有动态更新需要手动触发
• 图片缓存问题：资产图片的更新可能存在系统缓存，无法实时刷新，需使用唯一命名或网络图片避免
• 部分模板类型更新受限：部分复杂模板（如CPNowPlayingTemplate）的更新需要严格遵循框架提供的特定API，直接修改属性可能不生效

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