Xamarin ListView 行非常小答案

【问题标题】：Xamarin ListView row is very smallXamarin ListView 行非常小
【发布时间】：2019-11-19 17:14:03
【问题描述】：

我有问题。我用代码创建了这个 ContentPage：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="MyApp.HomePage">
    <ContentPage.Content>
        <ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Label Text="{Binding EmployeeName}" Grid.Column="1" Grid.Row="0" HorizontalOptions="Start"/>
                            <Image Source="VoteUp.png" VerticalOptions="End" Grid.Row="1" Grid.Column="0"/>
                            <Image Source="VoteDown.png" VerticalOptions="Start" Grid.Row="2" Grid.Column="0"/>
                            <Image Source="{Binding ImageLocation}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
                            <Image Source="Favorite.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start"/>
                            <Image Source="Send.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
                            <Image Source="Save.png" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

但我的结果如下：

但是，我想看到的结果应该是这样的：

所以要明确一点：

图片宽度必须为屏幕宽度的85%
图片的高度必须和图片的宽度一样大，所以它将是一个正方形
图片旁边的边必须是屏幕剩余的 15%
行的上下部分必须是屏幕宽度的 15% 的高度

这有可能吗？

【问题讨论】：

指定行高
我可以使用百分比吗？
否，但您可以在运行时计算。计算 ListView 的布局有很多复杂性。如果你有一个复杂的布局，我建议你试试 CollectionView
好的，但是我怎样才能为每一行设置高度呢？我怎样才能访问它们，因为我现在给它们起了这样的名字：<RowDefinition Height="Auto" x:Name="Row0_Height" />，但是我怎样才能改变它们呢？
我建议您从HasUnevenRows 开始为true，一旦您这样做，您可以简单地获取屏幕高度并动态设置RowHeight！使用 FFImageLoading 以便您可以缓存它。确保正确处理图像，以免出现 OOM。祝你好运

标签： xamarin xamarin.forms xamarin.android xamarin.ios

【解决方案1】：

尝试将 HasUnevenRows 属性设置为“True”，并将列表模型绑定到列表视图，而不是直接在数据模板中

【讨论】：