MAUI：CollectionView内Editor文本同步至ViewModel的问题解决

问题场景 #

你在MAUI项目里用CollectionView绑定了MessageModel的messege集合，ItemTemplate内放置Editor控件，需求是：用户修改Editor文本时，变更同步到私有的MessageModel实例；点击“Add New message”按钮可添加新消息。但使用INotifyPropertyChanged后未达到预期效果。

根本原因 #

1. string是值类型且不可变：当前绑定的是ObservableCollection<string>，string作为值类型，Editor绑定的是其副本，修改后无法同步回原集合的元素。
2. 无属性变更通知：string本身未实现INotifyPropertyChanged，即使修改文本，UI与数据源之间也无法触发双向同步的通知机制。

修复步骤 #

1. 创建可观察的文本实体类 #

将单个消息文本包装为实现属性变更通知的类，借助CommunityToolkit.Mvvm的ObservableObject简化实现：

public partial class MessageTextModel : ObservableObject
{
    [ObservableProperty]
    private string text;

    public MessageTextModel(string initialText = "")
    {
        Text = initialText;
    }
}

2. 修改MessageModel的集合类型 #

将原ObservableCollection<string>替换为ObservableCollection<MessageTextModel>：

public class MessageModel
{
    public MessageModel()
    {
        Plot_twist = new List<int>();
        messege = new ObservableCollection<MessageTextModel>();
        AnswerText = new ObservableCollection<(string Answer, List<int> way)>();
    }

    public List<MessageModel> messageModel = new List<MessageModel>();
    public List<int> Plot_twist { get; set; }
    public ObservableCollection<MessageTextModel> messege { get; set; }
    public string photoURL { get; set; }

    public ObservableCollection<(string Answer, List<int> way)> AnswerText;
}

3. 调整XAML中的绑定逻辑 #

修改Editor的Text绑定路径为{Binding Text}，并显式指定双向绑定模式（Editor默认是TwoWay，显式声明更清晰）：

<CollectionView ItemsSource="{Binding MessageModels.messege}"
                 x:Name="collectionView">
    <CollectionView.Header>
        <HorizontalStackLayout HorizontalOptions="Center" >
            <Label TextColor="Black" Text="Messages" VerticalOptions="Center"></Label>
            <Button MinimumWidthRequest="10"
                    MinimumHeightRequest="10"
                    Command="{Binding addNewmessageCommand}"
                    Text="Add New message"></Button>
        </HorizontalStackLayout>
    </CollectionView.Header>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <HorizontalStackLayout Padding="2">
                <Editor AutoSize="TextChanges" 
                        Text="{Binding Text, Mode=TwoWay}"  
                        WidthRequest="300" 
                        FontSize="16" 
                        TextColor="#1565C0" />
                <Button Background="Red"
                        Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.DeleteCommand}"
                        CommandParameter="{Binding .}"
                        Text="X" />
            </HorizontalStackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

4. 更新ViewModel的命令方法 #

适配新的MessageTextModel类型，调整添加和删除逻辑：

public partial class MessageModelEllementVM : ObservableObject
{
    // 保留原有其他代码不变

    [RelayCommand]
    void addNewmessage()
    {
        messageModels.messege.Add(new MessageTextModel(string.Empty));
    }

    [RelayCommand]
    private void Delete(MessageTextModel message)
    {
        messageModels.messege.Remove(message);
    }
}

5. 额外优化（可选） #

• 移除ViewModel中重复的PropertyChanged事件声明：继承ObservableObject后已自带该事件，无需重复定义。
• 初始化MessageModel时，若需添加默认消息，要创建MessageTextModel实例而非直接传入string。

原理说明 #

通过将不可变的string包装为实现INotifyPropertyChanged的MessageTextModel类，Editor修改Text属性时会触发属性变更通知，自动同步回数据源；同时ObservableCollection在添加/删除元素时会通知UI更新，双向绑定机制即可正常工作。

内容的提问来源于stack exchange，提问作者казённый унитаз