Xamarin Forms中將ListView與DataTemplate一起使用時的性能和布局問題

Question

我目前正在使用Xamarin Forms為iOS和Android制作應用程序。 整個應用程序運行正常，除了一個菜單，這給了我一些麻煩。 這是一張圖片列表，以卡片視圖樣式顯示，並帶有標題和文本。 沒有什么真正的瘋狂。 目的是得到這個（這是我的應用中使用隨機圖片的屏幕截圖）：

在執行此菜單時，我遇到了許多問題。 每次嘗試一種新方法時，我都會遇到新問題。

性能：在iOS上，即使有很多圖片（現在大約30張，但我打算添加更多圖片），我的列表視圖也很好，並且不會滯后。 但是在Android上，當我添加“太多”后（超過10個足以使菜單完全不起作用），它開始滯后並且圖片停止顯示。 圖片嵌入在應用程序中，我認為減小尺寸會有所幫助。 我已經將它們設置為“最大”（高度或寬度）“ 800”，但這無濟於事。 然后我以為布局太復雜了。 我用一個ListView進行了測試，該ListView僅在數據模板中包含以下內容：

<StackLayout Orientation="Vertical">
    <Image HorizontalOptions="Fill" Source="{Binding ImageSource}" Margin="0" Aspect="AspectFit"/>
</StackLayout>

`

而且它仍然滯后。我想布局不是問題。 所以我的問題是：Android真的不能夠使用數據模板並排顯示10/20圖片列表嗎？ 然后，我嘗試使用第三方（FFImageLoading）。 我有更好的結果。 但這完全破壞了iOS上的布局...

錯誤我有很多錯誤（渲染錯誤）。 我嘗試解決所有問題，但仍然可以在上面的屏幕快照中直接看到2個：-標題3很好，當標題4不應該位於圖片上方幾像素時-保留給圖片的位置描述應該更大（2/3行），就像圖像4的描述一樣

布局我的工作方式以及嘗試的2種主要方法：當前方法（來自屏幕截圖）是這樣的：

<Frame Style="{StaticResource CardStyle}" Padding="0">
    <StackLayout>
        <Image HorizontalOptions="Fill" Source="{Binding ImageSource}" Margin="0" Aspect="AspectFit"/>
        <Frame HasShadow="false" Padding="0" Margin="0,-50,0,0" HeightRequest="45" CornerRadius="0" BackgroundColor="{StaticResource TranslucidFrameBackgroundColor}"
               HorizontalOptions="FillAndExpand">
            <Label Text="{Binding Title}" Margin="10" Style="{StaticResource LightLabelStyle}" FontSize="18" VerticalTextAlignment="Center"/>
        </Frame>
        <Label Text="{Binding Text}" Margin="5"/>
    </StackLayout>
</Frame>

`

我討厭必須在標題框架上加上“ -50”的空白。 這就是為什么我有時會增加或減少幾個像素，並且它並不總是與照片完美對齊的原因。 我無法解釋自己的原因，為什么描述（最后一個標簽）並不總是具有完美的尺寸（或者當文本相同時，至少總是相同）...

當然，您會說“當您在Xamarin上使用圖像時，您應該使用Grid而不是StackLayout，渲染會更好，您不需要-50，並且與GridLayout相比，Grid的性能更好”至少在論壇上到處都有）。 好吧，猜猜是什么：笑臉：那是我首先要做的，那是一場災難！

我給你我使用的代碼：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <Image Grid.Row="0" HorizontalOptions="Fill" Source="{Binding ImageSource}" Margin="0" Aspect="AspectFit"/>
    <Frame Grid.Row="0" VerticalOptions="End" HasShadow="false" Padding="0" Margin="0" HeightRequest="45" CornerRadius="0" BackgroundColor="{StaticResource TranslucidFrameBackgroundColor}"
           HorizontalOptions="FillAndExpand">
        <Label Text="{Binding Title}" Margin="10" Style="{StaticResource LightLabelStyle}" FontSize="18" VerticalTextAlignment="Center"/>
    </Frame>
    <Label Grid.Row="1" Text="{Binding Text}" Margin="5"/>
</Grid>

`

我非常喜歡此版本的模板。 它更加清晰和精確，並且不需要任何奇怪的余量來使其工作。 但是看一下結果：

據我了解，至少使用Xamarin Forms的iOS（非Android）使用原始圖片獲取網格的大小，而不是圖片的“調整大小以適合屏幕大小”……所以我的網格很大且我們甚至都看不到這些卡片。 每次添加圖片時，兩張圖片之間的差距會越來越大...我看到了一些有關在后面使用代碼強制調整大小的調整，但是我真的不想這樣做，因為我發現它很丑陋。

誰能告訴我，我是Xamarin Forms的“新手”，我來自使用WPF / xaml進行開發的多年經驗：難道沒有辦法使用Xamarin Forms來做這種簡單的模板嗎？ 我在論壇（此處和stackoverflow）上看到了與該特定主題相關的maaaaany主題（數據模板中的圖片）。 我嘗試了許多其他解決方案，但不想污染這個已經很大的問題。 我嘗試強制使用固定大小，但我希望您猜對了，這不是我想要做的，因為我的圖片可以是人像或風景，無論大小。.請不要問我是否將“ HasUnevenRows”設置為true（是的，我做了：wink：）。

拜托，拜托，請幫我：blush：找到一個解決方案，告訴我“哦，你太愚蠢了，你忘了*在這里添加一些東西*它將起作用”：那會讓我很高興：smiley：

Answer 1

我認為您的主要問題是您沒有為模板提供合適的尺寸來嘗試將圖像放入其中。 布局引擎必須查看所有圖像，然后嘗試找出如何調整每個元素的大小以適合它們。

可以給網格或堆棧布局一個高度嗎？ 還是圖像？ 然后使用寬高比填充將圖像放入其中。

我看到您嘗試過FFImageLoading-在Android上使用圖像時，應始終使用該插件，否則會遇到性能和內存問題。