如何解决列表视图中列表视图的高度问题

Question

我花了很多时间来解决这个问题......有人可以帮我解决这个问题吗？
我的目标是制作一张卡片（框架）列表，每张卡片都有两个标签和一个（短）项目列表。

为了使内容更具可读性，我选择使用框架及其组件制作一个自定义组件。
如果我制作一个框架列表，每个框架只有标签，每件事看起来都很好（第一张图片）。框架的高度只是需要的高度，没有更多。
但是......当我在框架中添加第二级列表视图时，所有这些列表在它们的项目（第二张图片）之后浪费了很多空白高度！而且我无法摆脱这个浪费的空间...... Grrrr ...

我只给你发布自定义组件的代码（带二级listview）：

  <ContentView.Content>
        <Frame BorderColor="Gray"
               CornerRadius="5"
               Padding="8">
            <StackLayout>
                <Label Text="{Binding Data.TaskHeading, Source={x:Reference this}}"/>
                <Label Text="{Binding Data.PeopleHeading, Source={x:Reference this}}"/>
                
                <BoxView Color="Gray"
                         HeightRequest="2"
                         HorizontalOptions="Fill" />

                <ListView ItemsSource="{Binding Data.Tasks, Source={x:Reference this}}" BackgroundColor="Pink" HasUnevenRows="True">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Horizontal">
                                    <Label Text="{Binding mark}"/>
                                    <Label Text="{Binding description}"/>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </Frame>
    </ContentView.Content>

我尝试在任何地方添加 VerticalAlign="Start"，但没有帮助。
使用 HasUnevenRows="True" 对这个问题没有影响。

谁能帮帮我？

Answer 1

你可以使用BindableLayouts解决它。

以下代码与您需要的非常相似。我写了一个基本的模型，如果你需要，你可以随时实现INotifyPropertyChanged接口。

模型/视图模型：

public class CardModel
{
    public string TaskHeading { get; set; }
    public string PeopleHeading { get; set; }

    public CardItemModel[] Items { get; set; }

    public class CardItemModel
    {
        public string Mark { get; set; }
        public string Description { get; set; }
    }
}

public class CardsPageViewModel
{
    public CardModel[] Tasks { get; set; }

    public CardsPageViewModel()
    {
        Tasks = Enumerable.Range(1, 10).Select(i =>
            new CardModel
            {
                TaskHeading = $"TaskHeading {i}",
                PeopleHeading = $"People Heading {i}",
                Items = Enumerable.Range(1, 4).Select(j =>
                    new CardModel.CardItemModel
                    {
                        Mark = $"Mark {j}",
                        Description = $"Description {j}"
                    }).ToArray()
            }).ToArray();
    }
}

XAML：

...
<ScrollView>
    <StackLayout BindableLayout.ItemsSource="{Binding Tasks, Mode=OneWay}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Frame>
                    <StackLayout>
                        <Label Text="{Binding TaskHeading, Mode=OneWay}" FontAttributes="Bold"/>
                        <Label Text="{Binding PeopleHeading, Mode=OneWay}"/>
                        <StackLayout  BindableLayout.ItemsSource="{Binding Items, Mode=OneWay}" BackgroundColor="LightPink">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <StackLayout Orientation="Horizontal">
                                        <Label Text="{Binding Mark, Mode=OneWay}"/>
                                        <Label Text="{Binding Description, Mode=OneWay}"/>
                                    </StackLayout>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </StackLayout>
                    </StackLayout>
                </Frame>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</ScrollView>
...

输出：

编辑：我忘记添加 ViewBox 分隔符以及 Frame CornerRadius 和 BorderColor。