.NET MAUI动态生成Picker数据加载后不显示问题求助

问题描述 #

在MAUI项目中，根据用户输入的住宿晚数动态生成对应数量的Picker控件，ViewModel已成功加载Locations数据，但Picker下拉选项始终不可见。

代码检查与问题诊断 #

核心问题1：NightLocations集合未定义且无联动更新 #

ViewModel中缺少NightLocations集合的定义，也未在NoOfNights属性变化时动态生成对应数量的子项。CollectionView绑定的NightLocations不存在，导致Picker无法正常生成或获取数据上下文。

核心问题2：DataTemplate绑定上下文错误 #

CollectionView的ItemTemplate中，PickerField的ItemsSource="{Binding Locations}"是绑定到子项的Locations属性，但子项无该属性，实际Locations数据存储在父ViewModel中，绑定路径错误导致Picker无法获取数据。

核心问题3：NoOfNights属性缺失 #

ViewModel未定义NoOfNights属性，无法接收用户输入的晚数并触发NightLocations的更新。

修改后的完整代码方案 #

1. 更新NewPostViewModel.cs #

新增NoOfNights属性、NightLocations集合及联动更新逻辑：

public class NewPostViewModel : INotifyPropertyChanged
{
    private int _noOfNights;
    public int NoOfNights
    {
        get => _noOfNights;
        set
        {
            _noOfNights = value;
            OnPropertyChanged(nameof(NoOfNights));
            UpdateNightLocations(); // 晚数变化时更新动态Picker集合
        }
    }

    // 动态生成Picker的子项集合，每个子项维护自己的选中状态
    public ObservableCollection<NightLocationItem> NightLocations { get; set; } = new();

    private ObservableCollection<Location> _locations;
    public ObservableCollection<Location> Locations
    {
        get => _locations;
        set
        {
            _locations = value;
            OnPropertyChanged(nameof(Locations));
        }
    }

    // 子项模型：存储单个Picker的选中项
    public class NightLocationItem : INotifyPropertyChanged
    {
        private Location _selectedLocation;
        public Location SelectedLocation
        {
            get => _selectedLocation;
            set
            {
                _selectedLocation = value;
                OnPropertyChanged(nameof(SelectedLocation));
            }
        }

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

    private void UpdateNightLocations()
    {
        NightLocations.Clear();
        for (int i = 0; i < NoOfNights; i++)
        {
            NightLocations.Add(new NightLocationItem());
        }
    }

    public async Task LoadLocationsAsync()
    {
        try
        {
            var locations = await ApiService.GetLocation();
            Locations = new ObservableCollection<Location>(locations);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error loading locations: {ex.Message}");
        }
    }

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

2. 修改NewPostPage.xaml中的Picker绑定 #

使用RelativeSource绑定到父ViewModel的Locations集合：

<CollectionView ItemsSource="{Binding NightLocations}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <ur:PickerField Title="Enter location"
                            ItemsSource="{Binding Source={RelativeSource AncestorType={x:Type vm:NewPostViewModel}}, Path=Locations}"
                            ItemDisplayBinding="{Binding LocationName}"
                            SelectedItem="{Binding SelectedLocation, Mode=TwoWay}" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

3. 修正NewPostPage.xaml.cs中的重复绑定 #

移除XAML中重复的BindingContext定义（保留代码中的实例化即可）：

public partial class NewPostPage : ContentPage
{
    private NewPostViewModel viewModel;

    public NewPostPage()
    {
        InitializeComponent();

        viewModel = new NewPostViewModel();
        BindingContext = viewModel;

        _ = LoadLocationsAsync();
    }

    private async Task LoadLocationsAsync()
    {
        await viewModel.LoadLocationsAsync();
    }
}

关键说明 #

• NightLocationItem作为单个Picker的数据模型，独立维护选中状态，避免多个Picker共享同一选中项。
• 通过RelativeSource解决子Picker与父ViewModel的数据上下文不一致问题，确保能正确获取Locations集合。
• NoOfNights属性变化时触发UpdateNightLocations方法，动态生成对应数量的Picker项。

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