Nativescript Vue Аспект растягивания изображенияНе работает - PullRequest
Новая
       23

Nativescript Vue Аспект растягивания изображенияНе работает

0 голосов
/ 19 февраля 2020

Я работаю над приложением 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>

При изменении параметра растяжения предварительный просмотр в ios показывает ожидаемое поведение, как показано ниже

enter image description here

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

Unexpected behavior

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

1 Ответ

0 голосов
/ 20 февраля 2020

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

...