Nativescript Vue Image stretch aspectFill не работает

Я работаю над приложением Nativescript-vue, и у меня возникла странная проблема с некорректным размером компонента изображения.

Я пытаюсь использовать stretch = "aspectFill" для правильного определения размера изображения для компонента. Первоначально он работает при предварительном просмотре в реальном времени в симуляторе ios, но при следующем рендеринге компонента он уменьшает размер, чтобы соответствовать пространству, а не аспектуFill. Код моего компонента ниже.

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

Когда вы изменяете опцию растяжения, предварительный просмотр в реальном времени в ios показывает предполагаемое поведение, как показано ниже.

введите здесь описание изображения

При взаимодействии с приложением, переходе с этой страницы и обратно или предварительном просмотре на физическом устройстве ios изображение отображается, как показано ниже, вместо изображения с предполагаемой заливкой, как указано выше.

Неожиданное поведение

Я надеюсь, что кто-то сталкивался с этим раньше и сможет помочь с разработкой решения.


nativescript-vue
person Matt Presland    schedule 18.02.2020    source источник
comment
Вы пытались установить размер изображения по ширине на 100% от вашего компонента?   -  person Plpicard    schedule 20.02.2020

Ответы (1)


arrow_upward
1
arrow_downward

Компонент добавлялся в 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 вычисляет размер элемента по-другому и несовместим с Image stretch, по крайней мере, когда задействован другой контент.

person Matt Presland    schedule 19.02.2020