MAUI中IcsView父视图与SideView子视图的数据绑定问题

核心问题 #

1. 无法实现IcsView到SideView的选中文件/文件夹数据绑定
2. 不清楚如何为更新后的ViewModel添加属性设置方法

第一步：修正Model（Data类） #

Data类需正确实现属性变更通知，利用CommunityToolkit.Mvvm特性简化代码：

public partial class Data : ObservableObject
{
    [ObservableProperty]
    private string filePath;
}

注：[ObservableProperty]会自动生成带变更通知的FilePath属性，无需手动编写get/set逻辑。

第二步：完善ViewModel（ParentViewModel） #

修正命名不一致、属性无通知、命令返回类型错误等问题，优化后代码：

namespace ICSViewer.MVVM.ViewModel
{
    internal partial class ParentViewModel : ObservableObject
    {
        // 用ObservableCollection实现集合变更通知，命名规范为Items
        [ObservableProperty]
        private ObservableCollection<Data> _items = new();

        [RelayCommand]
        // 异步命令返回Task，避免异常丢失
        public async Task AddFileAsync()
        {
            var customFileType = new FilePickerFileType(new Dictionary<DevicePlatform, IEnumerable<string>>
            {
                { DevicePlatform.WinUI, new[] { "ics" } },
            });
            var results = await FilePicker.PickMultipleAsync(new PickOptions
            {
                FileTypes = customFileType,
            });

            if (results == null) return;

            foreach (var result in results)
            {
                var existingItem = Items.FirstOrDefault(x => x.FilePath == result.FullPath);
                if (existingItem != null)
                {
                    await App.Current.MainPage.DisplayAlert("提示", "文件已存在！", "确定");
                    continue;
                }

                Items.Add(new Data
                {
                    FilePath = result.FullPath
                });
            }
        }

        public void GetFiles(FileInfo path)
        {
            var existingItem = Items.FirstOrDefault(x => x.FilePath == path.FullName);
            if (existingItem != null) return;

            Items.Add(new Data
            {
                FilePath = path.FullName
            });
        }

        public double GetFileSize(FileInfo file)
        {
            double fileSize = file.Length;
            double sizeMb = fileSize * 0.000001;
            return Math.Round(sizeMb, 2);
        }
    }
}

关键修正点： #

• 继承ObservableObject替代手动实现INotifyPropertyChanged，简化代码
• 用[ObservableProperty]自动生成带变更通知的属性
• 异步命令返回Task而非void，符合MAUI最佳实践
• 用FirstOrDefault替代循环查找，简化重复文件判断
• 规范方法与属性命名

第三步：父视图（IcsView）绑定调整 #

XAML部分： #

确保BindingContext正确引用ViewModel，并传递给子视图：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ICSViewer.MVVM.View.IcsView"
             xmlns:v="clr-namespace:ICSViewer.MVVM.View"
             xmlns:vm="clr-namespace:ICSViewer.MVVM.ViewModel"
             x:Name="ParentPage">

    <ContentPage.BindingContext>
        <vm:ParentViewModel/>
    </ContentPage.BindingContext>

    <Grid>
        <!-- 其他布局元素 -->
        <v:SideView Grid.Column="0" Grid.RowSpan="3" 
                    BindingContext="{Binding Source={x:Reference ParentPage}, Path=BindingContext}"/>
    </Grid>
</ContentPage>

代码隐藏部分： #

移除静态Items集合，直接使用ViewModel属性：

private readonly IFolderPicker _folderPicker;
private ParentViewModel ViewModel => (ParentViewModel)BindingContext;

public IcsView(IFolderPicker folderPicker)
{
    InitializeComponent();
    _folderPicker = folderPicker;
}

注：添加文件按钮直接在XAML中绑定Command="{Binding AddFileCommand}"，无需在代码隐藏中处理点击事件。

第四步：子视图（SideView）优化 #

XAML部分： #

直接使用继承的BindingContext，简化绑定逻辑：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ICSViewer.MVVM.View.SideView">

    <StackLayout>
        <Label Text="已选择的文件" FontSize="18" FontAttributes="Bold" Padding="5"/>
        <CollectionView ItemsSource="{Binding Items}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding FilePath}"/>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentView>

代码隐藏部分： #

移除多余BindableProperty，简化代码：

public partial class SideView : ContentView
{
    public SideView()
    {
        InitializeComponent();
    }
}

关键原理说明 #

1. 数据流向：所有操作通过ViewModel完成，Items集合变更自动通知UI更新
2. 子视图绑定：子视图继承父视图的BindingContext，无需额外传递ViewModel
3. 变更通知：ObservableCollection实现集合变更通知，[ObservableProperty]实现单个属性变更通知，确保UI实时响应数据变化

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