时间戳

首页 > 解决方案 > Nativescript Vue图像拉伸aspectFill不起作用

nativescript-vue - Nativescript Vue图像拉伸aspectFill不起作用

问题描述

我正在开发一个 Nativescript-vue 应用程序，并且在 Image 组件大小不正确时遇到了一个奇怪的问题。

我正在尝试使用 stretch="aspectFill" 来正确调整组件的图像大小。它最初在 ios 模拟器中实时预览时工作，但是当您下一次渲染组件时，它会减小大小以适应空间而不是 aspectFill。我的组件代码如下。

 <StackLayout>
    <Image :src="promo.image" stretch="aspectFill" height="200" />
    <StackLayout class="promocontainer" row="1" padding="0">
      <GridLayout columns="*,*" class="region">
        <Label col="0" :text="promo.region" />
        <Label col="1" :text="'$' + promo.price" textAlignment="right" />
      </GridLayout>
      <Label :text="promo.inclusions_heading" class="heading" />
      <Label :text="promo.heading" padding="10" textWrap="true" class="tagline" />
      <Label :text="promo.introText" padding="10" textWrap="true" class="text" />
    </StackLayout>
  </StackLayout>

当您更改 strech 选项时，ios 中的实时预览会显示预期的行为，如下所示

在此处输入图像描述

当与应用程序交互、离开此页面并返回或在物理 ios 设备上预览时，图像如下所示，而不是上面预期的填充图像。

意外行为

我希望有人以前遇到过这种情况，并且可能能够帮助制定解决方案。

标签： nativescript-vue

解决方案

该组件被添加到 ListView，这导致了上面的呈现问题。我通过将组件包装在 ScrollView 和 StackLayout 中解决了这个问题。这立即解决了拉伸渲染问题。

带有拉伸错误的原始代码：

<ListView for="promo in promos" @itemTap="onPromoTap">
   <v-template>
      <PromoListItem :promo="promo" />
   </v-template>
</ListView>

解决方案：

<ScrollView>
    <StackLayout>
        <PromoListItem margin="10" v-for="promo in promos" :key="promo.heading" :promo="promo" />
    </StackLayout>
</ScrollView>

看起来 ListView 计算其项目大小的方式不同，并且与图像拉伸不兼容，至少在涉及其他内容时是这样。

推荐阅读