如何在MVVM表单中实现自定义数量控制命令并解决视图更新问题

核心问题分析 #

Entry无法同步更新的根源在于三个关键错误：

• 数据模型ProductDetail未实现INotifyPropertyChanged接口，属性变更无法通知UI
• ViewModel中错误调用OnPropertyChanged方法，传递参数不符合要求
• 部分绑定语法和Mode设置错误

步骤1：修复ProductDetail数据模型 #

让数据模型实现属性变更通知，这是UI同步的基础：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class ProductDetail : INotifyPropertyChanged
{
    private string _name;
    private string _productDetails;
    private string _price;
    private string _price1;
    private string _imageUrl;
    private byte[] _imageData;
    private string _quantity;

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public string Name
    {
        get => _name;
        set { _name = value; OnPropertyChanged(); }
    }

    public string ProductDetails
    {
        get => _productDetails;
        set { _productDetails = value; OnPropertyChanged(); }
    }

    public string Price
    {
        get => _price;
        set { _price = value; OnPropertyChanged(); }
    }

    public string Price1
    {
        get => _price1;
        set { _price1 = value; OnPropertyChanged(); }
    }

    public string ImageUrl
    {
        get => _imageUrl;
        set { _imageUrl = value; OnPropertyChanged(); }
    }

    public byte[] ImageData
    {
        get => _imageData;
        set { _imageData = value; OnPropertyChanged(); }
    }

    public string Quantity
    {
        get => _quantity;
        set { _quantity = value; OnPropertyChanged(); }
    }
}

注：已删除冗余的QuantityOld属性，直接维护Quantity即可

步骤2：修正ViewModel中的命令逻辑 #

修改增减数量的方法，移除错误的OnPropertyChanged调用（数据模型已自行处理通知）：

private async Task OnQuantityAddSelected(ProductDetail productdetail)
{
    int currentQty = Convert.ToInt32(productdetail.Quantity);
    productdetail.Quantity = (currentQty + 1).ToString();
    RefreshCanExcutes();
}

private async Task OnQuantityMinusSelected(ProductDetail productdetail)
{
    int currentQty = Convert.ToInt32(productdetail.Quantity);
    if (currentQty > 0)
    {
        productdetail.Quantity = (currentQty - 1).ToString();
        RefreshCanExcutes();
    }
}

同时调整GetProductDetails方法中的对象初始化：

ProductDetail productdetail = new ProductDetail
{
    Name = reader.GetString(0),
    ProductDetails = reader.GetString(1),
    Price = "R " + reader.GetString(2),
    Price1 = reader.GetString(2),
    ImageUrl = reader.GetString(3),
    Quantity = reader.GetString(4)
};

步骤3：修正XAML中的绑定 #

简化数量控制区域的布局，修正绑定语法：

<StackLayout Orientation="Horizontal">
    <Button
        ImageSource="minus.png" 
        Command="{Binding Source={x:Reference productdetailsCollectionView}, Path=BindingContext.QuantityMinusCommand}"
        CommandParameter="{Binding .}"
        BackgroundColor="Transparent"/>
    <Entry Text="{Binding Quantity, Mode=TwoWay}"/>
    <Button
        ImageSource="Plus.png"
        Command="{Binding Source={x:Reference productdetailsCollectionView}, Path=BindingContext.QuantityAddCommand}"
        CommandParameter="{Binding .}"
        BackgroundColor="Transparent"/>
</StackLayout>

移除CollectionView外冗余的txtQuantity和txtQuantityOld（若需展示选中项数量，需在ViewModel中新增SelectedProduct属性并绑定）。

关键修复要点总结 #

1. 数据模型必须实现INotifyPropertyChanged：这是MVVM模式下UI与数据同步的核心机制
2. 避免冗余属性：QuantityOld属于重复维护，直接修改Quantity即可
3. 正确调用通知方法：数据模型内部处理属性变更通知，ViewModel无需额外操作
4. 绑定Mode设置合理：数量Entry使用TwoWay确保双向同步

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