Xamarin中嵌套ListView子项无法显示的技术求助

我在Xamarin.Forms中实现了两层嵌套ListView结构，外层绑定ChecklistSections数据可以正常展示，但内层的ChecklistItems列表项完全不显示，两者实现逻辑一致，找不到问题所在。

XAML代码 #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModels="clr-namespace:Xxx.App.ViewModels"
             xmlns:converters="clr-namespace:Xxx.App.Converters"
             xmlns:model="clr-namespace:Xxx.Core.Models;assembly=Xxx.Core"
             x:Class="Xxx.App.Views.Checklist"
             x:DataType="viewModels:ChecklistViewModel"
             NavigationPage.HasNavigationBar="False"
             BackgroundColor="Black">

<ContentPage.Resources>
    <ResourceDictionary>
        <converters:ItemCountToHeightConverter x:Key="ItemCountToHeightConverter" />
    </ResourceDictionary>
</ContentPage.Resources>

<StackLayout Padding="10">
    <Label Text="Checklist Items" FontSize="Large" TextColor="White" HorizontalOptions="Center" VerticalOptions="StartAndExpand" Margin="0,20,0,0" />

    <ListView ItemsSource="{Binding ChecklistSections}"
              HorizontalOptions="FillAndExpand"
              VerticalOptions="FillAndExpand"
              BackgroundColor="{StaticResource BlackBackgroundColor}"
              Margin="0,10,0,0">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="model:ChecklistSection">
                <ViewCell>
                    <StackLayout Padding="10">
                        <Label Text="{Binding ChecklistCategory.Name}" FontAttributes="Bold" Padding="5,0,0,0" FontSize="Large" TextColor="White" />
                        <ListView ItemsSource="{Binding ChecklistItems}" SeparatorVisibility="None" HeightRequest="{Binding ChecklistItems, Converter={StaticResource ItemCountToHeightConverter}}">
                            <ListView.ItemTemplate>
                                <DataTemplate x:DataType="model:ChecklistItem">
                                    <ViewCell>
                                        <StackLayout Padding="25,0,0,0">
                                            <Label Text="{Binding ItemText}" FontSize="Medium" TextColor="White" />
                                        </StackLayout>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

    <Button Text="Submit" Command="{Binding SubmitCommand}" BackgroundColor="{StaticResource PrimaryAccentColor}" BorderRadius="10" FontAttributes="Bold" TextColor="White" HorizontalOptions="Center" VerticalOptions="EndAndExpand" Margin="0,20" />

</StackLayout>
</ContentPage>

转换器代码 #

public class ItemCountToHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is System.Collections.ICollection collection)
        {
            double itemHeight = 40;
            var itemCount = collection.Count;
            var totalHeight = itemHeight * itemCount;

            double extraPadding = 20;
            totalHeight += extraPadding;

            return totalHeight;
        }

        return 200;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

模型类代码 #

public class ChecklistSection
{
    public string Id { get; set; }
    public ChecklistCategory ChecklistCategory { get; set; }
    public List<ChecklistItem> ChecklistItems { get; set; }
}

public class ChecklistItem
{
    public string ItemText { get; set; }
    public bool Value { get; set; }
}

问题原因与修复方案 #

1. 嵌套ListView的布局约束问题 #

Xamarin.Forms中嵌套ListView容易出现渲染异常，你手动计算的HeightRequest可能和实际需要的高度不匹配，导致内层列表被挤压或隐藏。

修复：

• 移除内层ListView的HeightRequest绑定
• 给外层ListView添加HasUnevenRows="True"，让它自动适配子项高度
• 内层ListView设置VerticalOptions="FillAndExpand"

修改后的内层ListView代码：

<ListView ItemsSource="{Binding ChecklistItems}" 
          SeparatorVisibility="None"
          HasUnevenRows="True"
          VerticalOptions="FillAndExpand">
    <!-- 其余代码不变 -->
</ListView>

2. 数据初始化问题 #

如果ChecklistSection的ChecklistItems集合为null，绑定会直接失效，界面不会渲染任何内容。

修复：
在ChecklistSection构造时初始化集合：

public class ChecklistSection
{
    public string Id { get; set; }
    public ChecklistCategory ChecklistCategory { get; set; }
    // 初始化集合避免null
    public List<ChecklistItem> ChecklistItems { get; set; } = new List<ChecklistItem>();
}

3. 绑定调试验证 #

可以开启Xamarin.Forms的绑定诊断，查看是否有绑定失败的情况：
在ContentPage标签中添加：

xmlns:diagnostics="clr-namespace:Xamarin.Forms.Diagnostics;assembly=Xamarin.Forms.Core"
diagnostics:BindingDiagnostics.TraceBindingFailures="True"

运行后查看输出日志，确认ChecklistItems的绑定是否正常。

4. 更优替代方案：用Expander+CollectionView实现 #

嵌套ListView本身不是Xamarin.Forms推荐的嵌套列表实现方式，Expander+CollectionView的组合更稳定，也更符合用户交互习惯：

<ListView ItemsSource="{Binding ChecklistSections}"
          HorizontalOptions="FillAndExpand"
          VerticalOptions="FillAndExpand"
          BackgroundColor="{StaticResource BlackBackgroundColor}"
          Margin="0,10,0,0"
          HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="model:ChecklistSection">
            <ViewCell>
                <Expander Header="{Binding ChecklistCategory.Name}" 
                          HeaderFontAttributes="Bold"
                          HeaderFontSize="Large"
                          HeaderTextColor="White"
                          Padding="5,0,0,0">
                    <CollectionView ItemsSource="{Binding ChecklistItems}"
                                    Margin="25,0,0,0">
                        <CollectionView.ItemTemplate>
                            <DataTemplate x:DataType="model:ChecklistItem">
                                <Label Text="{Binding ItemText}" 
                                       FontSize="Medium" 
                                       TextColor="White"
                                       Margin="0,5"/>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                </Expander>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

内容的提问来源于stack exchange，提问作者sina .s