Nativescript Vue 图像拉伸 aspectFill 不起作用

Question

我正在开发一个 Nativescript-vue 应用程序，我遇到了一个奇怪的问题，图像组件没有正确调整大小。

我正在尝试使用 stretch="aspectFill" 为组件正确调整图像大小。它最初在 ios 模拟器中进行实时预览时有效，但当您下次渲染组件时，它会缩小尺寸以适应 space 而不是 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 设备上预览时，图像显示如下，而不是上面预期的纵横比填充图像。

我希望之前有人运行了解过这个问题，也许能够协助制定解决方案。

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

Nativescript Vue 图像拉伸 aspectFill 不起作用

Nativescript Vue Image stretch aspectFill not working

nativescript-vue