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

Question

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

为了使内容更具可读性，我选择使用框架及其内容制作自定义组件。
如果我制作一个帧列表，每个帧只有标签，那么每件事看起来都不错（第一张图片）。框架的高度只是需要的高度，没有更多。
但是......当我在框架中添加第二级列表视图时，所有这些列表在他们的项目（第二张图片）之后浪费了很多空高度！而且我无法摆脱这种浪费 space ... 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 接口。

Model/ViewModel:

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。

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

How to fix height problem with listview in listview

listview

xamarin

xamarin.forms

height