Xamarin.Forms中嵌套列表实现咨询：父级商品绑定子级尺码数量价格选择

1. 基础数据结构设计 #

首先定义两级数据模型，均实现INotifyPropertyChanged接口用于绑定通知：

• 子级SKU模型（存储尺码、价格、数量、选中状态）

public class ProductSku : INotifyPropertyChanged
{
    private bool _isSelected;
    private int _quantity;
    public string Size { get; set; }
    public decimal Price { get; set; }

    public bool IsSelected
    {
        get => _isSelected;
        set { _isSelected = value; OnPropertyChanged(); }
    }

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

    // INotifyPropertyChanged通知实现逻辑省略
}

• 父级商品模型（存储商品基础信息、SKU列表、父级可选状态、选中状态）

public class ProductItem : INotifyPropertyChanged
{
    private bool _isSelected;
    public string ProductName { get; set; }
    public List<ProductSku> SkuList { get; set; }

    // 父级选择控件是否可用：至少有1个SKU被选中且数量≥1时为true
    public bool CanSelect => SkuList.Any(s => s.IsSelected && s.Quantity >= 1);

    public bool IsSelected
    {
        get => _isSelected;
        set 
        { 
            // 仅当CanSelect为true时允许修改选中状态
            if (CanSelect) _isSelected = value;
            OnPropertyChanged();
        }
    }

    // 子级SKU属性变更时触发父级CanSelect状态更新
    public void OnSkuPropertyChanged()
    {
        OnPropertyChanged(nameof(CanSelect));
        // 如果可选状态变为false，自动取消父级选中
        if (!CanSelect) IsSelected = false;
    }

    // INotifyPropertyChanged通知实现逻辑省略
}

2. 嵌套列表UI实现 #

推荐使用Xamarin.CommunityToolkit的Expander控件实现折叠/展开效果，搭配嵌套CollectionView实现两级列表：

<!-- 父级商品列表 -->
<CollectionView ItemsSource="{Binding ProductList}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Expander>
                <Expander.Header>
                    <HorizontalStackLayout Spacing="10">
                        <!-- 父级选择框，IsEnabled绑定CanSelect -->
                        <CheckBox IsChecked="{Binding IsSelected}" IsEnabled="{Binding CanSelect}" />
                        <Label Text="{Binding ProductName}" FontSize="16" VerticalOptions="Center"/>
                    </HorizontalStackLayout>
                </Expander.Header>
                <!-- 子级SKU列表 -->
                <CollectionView ItemsSource="{Binding SkuList}" Margin="20,0,0,0">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <HorizontalStackLayout Spacing="10">
                                <CheckBox IsChecked="{Binding IsSelected}" />
                                <Label Text="{Binding Size}" Width="50"/>
                                <Label Text="{Binding Price, StringFormat='¥{0:F2}'}" Width="80"/>
                                <Entry Text="{Binding Quantity}" Keyboard="Numeric" Width="60" Placeholder="数量"/>
                            </HorizontalStackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </Expander>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

3. 交互逻辑联动处理 #

• 在SKU的IsSelected和Quantity属性的set方法中，调用所属父级ProductItem的OnSkuPropertyChanged方法，触发父级可选状态更新
• 给数量输入框加输入校验，禁止输入负数和非数字字符，避免无效值导致逻辑异常
• 父级选中后提交数据时，可遍历所有选中父级商品下的选中SKU，汇总提交即可

效果参考 #

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