Nativescript Vue图像拉伸aspectFill不起作用

Posted 2023-04-14

【中文标题】Nativescript Vue图像拉伸aspectFill不起作用

【英文标题】：Nativescript Vue Image stretch aspectFill not working

【发布时间】：2020-06-03 01:25:49

【问题描述】：

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

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

 <StackLayout>
    <Image :src="promo.image" stretch="aspectFill"  />
    <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>

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

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

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

【问题讨论】：

您是否尝试过将图像宽度的大小固定为组件的 100%？

【参考方案1】：

组件被添加到 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 计算其项目大小的方式不同，并且与图像拉伸不兼容，至少在涉及其他内容时是这样。