首页 文章

在Xamarin Forms中使用ListView和DataTemplate的性能和布局问题

提问于
浏览
1

我目前正在使用Xamarin Forms为iOS和Android制作应用程序 . 整个应用程序工作正常,除了一个菜单给我一些困难时间 . 这是一张图片列表,以卡片视图样式显示,带有 Headers 和文字 . 没什么好疯狂的 . 目标是得到这个(这是我的应用程序使用随机图片截图):

做这个菜单,我遇到了很多问题 . 每当我尝试新方法时,我都会遇到新问题 .

Performance : 在iOS上,我的列表视图很好,并且从不滞后,即使有很多图片(现在大约30张,但我打算添加更多) . 但是在Android上,它开始滞后并且在我添加"too many"之后图片停止显示(超过10个就足以让菜单完全不起作用) . 图片嵌入在应用程序中,我想可能减小尺寸会有所帮助 . 我've made them 2835499 max (height or width) but that didn' t帮忙 . 然后我认为布局是"too complicated" . 我在数据模板中使用只包含它的ListView进行了测试:`

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

`

它仍然滞后..我猜布局不是问题 . 所以我的问题是:真的Android无法使用数据模板并排显示10/20图片列表吗?然后我尝试使用第三方(FFImageLoading) . 我有更好的结果 . 但它完全摧毁了iOS上的布局......

Bugs 我有很多错误(渲染错误) . 我试图解决所有这些但仍然,在上面的截图中,已经有2个我可以直接看到: - Headers 3很好,当 Headers 4是图片上方几个像素时它不应该 - 保留的位置当它应该像图像4的描述时,描述更大(2/3行)

Layout 我是怎么做的,我尝试了两种主要方式:目前的方式(来自截图)是:`

<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”边距,我不得不把它放在 Headers 的框架上 . 这就是为什么我有时上下几个像素,并不总是与照片完全对齐 . 我无法解释自己为什么描述(最后一个标签)并不总是具有完美的尺寸(或者至少总是相同的,当文本相同时)......

当然你会说“你应该使用Grid而不是StackLayout,渲染会更好,你不需要-50,当你在Xamarin上使用图像时,Grid的性能比StackLayout更好”(我读过至少在论坛的每个地方) . 好吧,猜猜看:笑脸:这就是我先做的事情,这是一场灾难!

我给你使用的代码:`

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

`

我非常喜欢这个版本的模板 . 它需要一些奇怪的余地来使其发挥作用 . 但看看结果:

根据我的理解,iOS(不是Android),至少使用Xamarin Forms,使用原始图片获取网格的大小,而不是图片的“调整大小以适应屏幕”...所以我的网格很大,我们甚至都看不到卡了 . 每次添加图片时,两张图片之间的差距越来越大......我看到一些关于使用代码强制调整大小的调整但是我真的不想这样做,因为我觉得它很难看 .

任何人都可以告诉我,我是Xamarin Forms的“新手”,我来自使用WPF / xaml开发多年:是否有办法使用Xamarin Forms做这么简单的模板?我在论坛(这里和stackoverflow)上看到了关于这个特定主题的maaaaany线程(数据模板中的图片) . 我尝试了许多其他解决方案,但不想污染这个已经很大的问题 . 我尝试强制固定大小,但我希望你猜对了,这不是我想要做的,因为我的照片可以是肖像或风景,无论大小 . 请不要问我是否将“HasUnevenRows”设为真(是的我做了:眨眼:) .

拜托,拜托,请帮助我:脸红:找一个解决方案,告诉我“你太愚蠢了,你忘记了在这里添加一些东西它会起作用”:这会让我很开心:笑脸:

1 回答

  • 2

    我认为你的主要问题是你没有给模板一个大小来尝试使图像适合 . 布局引擎必须查看所有图像,并尝试找出如何调整每个元素的大小以适应它们 .

    你能给网格或堆栈布局一个高度吗?还是形象?然后使用纵横填充将图像放入其中 .

    我看到你尝试过FFImageLoading - 在Android上使用图像时应该总是使用该插件,否则会遇到性能和内存问题 .

相关问题