如何在Compose自定义原生控件与MAUI应用间双向共享字典数据？

问题背景 #

我开发了一款MAUI应用，通过MAUI ViewHandler创建并使用自定义原生控件，已实现属性与命令的映射，但需共享列表、字典类数据。目前已完成单向传输，可在原生视图中展示字典，但无法监听字典状态变化。我希望在MAUI代码中修改字典（如增删元素）时，原生Compose视图能自动重组。

我了解重新赋值字典新引用可实现更新，但希望采用更简洁、更贴合Compose风格的方式，例如使用可变状态或快照。尝试多种方法均未成功。

现有代码片段 #

MAUI侧BindableProperty定义 #

// **********************************dictionnary*****************************
public static readonly BindableProperty DictProperty =
    BindableProperty.Create(
        nameof(Dict),
        typeof(Dictionary<string, int>),
        typeof(CustomView),
        default(Dictionary<string, int>)
        );

public Dictionary<string, int> Dict
{
    get => (Dictionary<string, int>)GetValue(DictProperty);
    set => SetValue(DictProperty, value);
}
// **************************************************************************

Kotlin字典转换器 #

public static IDictionary<string, int> ToJavaHashmap(IDictionary<string, int> dict)
{
    if (dict is null) return new Dictionary<string, int>();
    Dictionary<string, int> hashmap = [];
    foreach (KeyValuePair<string, int> elt in dict)
    {
        hashmap.Add(elt);
    }
    return hashmap;
}

解决方案 #

核心是让MAUI侧字典具备可观察性，同时在Compose侧将其绑定到Compose能感知的状态容器，双向联动变化。

步骤1：替换为可观察字典 #

MAUI的普通Dictionary无法触发变更通知，需替换为实现INotifyCollectionChanged的ObservableDictionary（可自定义或使用CommunityToolkit.Mvvm库中的现成实现）：

// 自定义可观察字典实现
public class ObservableDictionary<TKey, TValue> : Dictionary<TKey, TValue>, INotifyCollectionChanged, INotifyPropertyChanged
{
    public event NotifyCollectionChangedEventHandler? CollectionChanged;
    public event PropertyChangedEventHandler? PropertyChanged;

    public new TValue this[TKey key]
    {
        get => base[key];
        set
        {
            base[key] = value;
            OnCollectionChanged(new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Replace, value, base[key], IndexOfKey(key)));
            OnPropertyChanged(nameof(Count));
        }
    }

    public new void Add(TKey key, TValue value)
    {
        base.Add(key, value);
        OnCollectionChanged(new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Add, value, IndexOfKey(key)));
        OnPropertyChanged(nameof(Count));
    }

    public new bool Remove(TKey key)
    {
        if (base.TryGetValue(key, out var value) && base.Remove(key))
        {
            OnCollectionChanged(new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Remove, value, IndexOfKey(key)));
            OnPropertyChanged(nameof(Count));
            return true;
        }
        return false;
    }

    private int IndexOfKey(TKey key) => Keys.ToList().IndexOf(key);

    protected virtual void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
    {
        CollectionChanged?.Invoke(this, e);
    }

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

// 更新BindableProperty类型
public static readonly BindableProperty DictProperty =
    BindableProperty.Create(
        nameof(Dict),
        typeof(ObservableDictionary<string, int>),
        typeof(CustomView),
        new ObservableDictionary<string, int>()
        );

public ObservableDictionary<string, int> Dict
{
    get => (ObservableDictionary<string, int>)GetValue(DictProperty);
    set => SetValue(DictProperty, value);
}

步骤2：在ViewHandler中监听变化并通知Compose #

在Android平台的ViewHandler里，订阅字典的CollectionChanged事件，当元素增删时主动更新Compose视图：

protected override void ConnectHandler(CustomComposeView platformView)
{
    base.ConnectHandler(platformView);
    
    // 初始同步字典数据
    SyncDictToCompose(platformView, VirtualView.Dict);
    
    // 监听字典元素变化
    VirtualView.Dict.CollectionChanged += (sender, e) =>
    {
        // 确保在UI线程更新Compose
        MainThread.BeginInvokeOnMainThread(() =>
        {
            SyncDictToCompose(platformView, VirtualView.Dict);
        });
    };
}

private void SyncDictToCompose(CustomComposeView platformView, ObservableDictionary<string, int> dict)
{
    var javaMap = ToJavaHashmap(dict);
    // 调用Compose视图的更新方法
    platformView.UpdateDict(javaMap);
}

步骤3：Compose侧绑定可变状态实现自动重组 #

在Kotlin的Compose视图中，将传入的Java Map绑定到Compose的mutableStateOf或SnapshotStateMap，让Compose感知状态变化自动重组：

方案A：使用mutableStateOf

class CustomComposeView(context: Context) : AbstractComposeView(context) {
    private val _dictState = mutableStateOf<Map<String, Int>>(emptyMap())
    private val dictState: State<Map<String, Int>> = _dictState

    fun UpdateDict(newDict: Map<String, Int>) {
        _dictState.value = newDict
    }

    @Composable
    override fun Content() {
        val dict = dictState.value
        LazyColumn {
            items(dict.entries.toList()) { entry ->
                Text(text = "${entry.key}: ${entry.value}")
            }
        }
    }
}

方案B：使用SnapshotStateMap（更贴合Compose快照风格）

class CustomComposeView(context: Context) : AbstractComposeView(context) {
    private val snapshotDict = mutableStateMapOf<String, Int>()

    fun UpdateDict(newDict: Map<String, Int>) {
        snapshotDict.clear()
        snapshotDict.putAll(newDict)
    }

    @Composable
    override fun Content() {
        LazyColumn {
            items(snapshotDict.entries.toList()) { entry ->
                Text(text = "${entry.key}: ${entry.value}")
            }
        }
    }
}

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