嵌套列表项不会显示在Xamarin的屏幕上

pxiryf3j  于 2023-08-01  发布在  其他
关注(0)|答案(1)|浏览(125)

我有两个名单。其中一个是另一个列表下的列表。当我想在屏幕上显示它时,嵌套的列表项不会出现在屏幕上。我对两个列表都遵循相同的逻辑,但我不明白为什么第二个列表项不出现。
下面是我的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">
    <!-- Add padding to the StackLayout to create free space on all sides -->

    <!-- Add the label at the top -->
    <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">
        <!-- Add margin to the ListView to create free space at the top -->

        <ListView.ItemTemplate>
            <DataTemplate x:DataType="model:ChecklistSection">
                <ViewCell>
                    <StackLayout Padding="10">
                        <!-- Add padding to the StackLayout to create free space on all sides -->
                        <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>
                                        <!-- Define the layout for each ChecklistItem item here -->
                                        <StackLayout Padding="25,0,0,0">
                                            <!-- Add padding to create space on the left for ChecklistItems -->
                                            <!-- Use a smaller font size for ChecklistItems -->
                                            <Label Text="{Binding ItemText}" FontSize="Medium" TextColor="White" />
                                        </StackLayout>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

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

</StackLayout>

字符串
下面是转换器:

public class ItemCountToHeightConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            // Check if the value is a valid collection and calculate the height accordingly
            if (value is System.Collections.ICollection collection)
            {
            // Customize the item height based on your requirements
            // For example, you can use the number of items to calculate the total height
            // You can adjust the height value as needed for your layout
            double itemHeight = 40; // Set the height of each item in the nested ListView
            var itemCount = collection.Count;
            var totalHeight = itemHeight * itemCount;

            // Add some extra padding, if needed
            double extraPadding = 20; // Set the desired extra padding
            totalHeight += extraPadding;

            return totalHeight;
        }

        // If the value is not a collection or null, return a default height
        return 200; // Set a default height if the collection is not valid or empty
    }

    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; }
}

fjnneemd

fjnneemd1#

不支持列表视图中的列表视图选项。ListView被设计为页面上唯一的根控件,主要是考虑到大小调整和滚动问题。
此外,页面的复杂性可能会导致性能低下。
建议您使用BindableLayout来显示项目集合,而不要将其 Package 在ListView中。
可以参考以下代码:

<ListView ItemsSource="{Binding ChecklistSections}" HasUnevenRows="True"
          HorizontalOptions="FillAndExpand"
          VerticalOptions="FillAndExpand"
          Margin="0,10,0,0">
            <!-- Add margin to the ListView to create free space at the top -->

            <ListView.ItemTemplate>
                <DataTemplate x:DataType="models:ChecklistSection">
                    <ViewCell>
                        <StackLayout Padding="10">
                            <!-- Add padding to the StackLayout to create free space on all sides -->
                            <Label Text="{Binding ChecklistCategory.Name}" FontAttributes="Bold" Padding="5,0,0,0" FontSize="Large" TextColor="White" />

                            <StackLayout  BindableLayout.ItemsSource="{Binding ChecklistItems}">
                                <BindableLayout.ItemTemplate>
                                    <DataTemplate x:DataType="models:ChecklistItem">
                                        <!-- Define the layout for each ChecklistItem item here -->
                                        <StackLayout Padding="25,0,0,0"  BackgroundColor="Purple">
                                            <!-- Add padding to create space on the left for ChecklistItems -->
                                            <!-- Use a smaller font size for ChecklistItems -->
                                            <Label Text="{Binding ItemText}" FontSize="Medium" TextColor="White" />
                                        </StackLayout>
                                    </DataTemplate>
                                </BindableLayout.ItemTemplate>
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

字符串

注:

记住将属性HasUnevenRows="True"添加到ListView

相关问题