时间戳

首页 > 解决方案 > Nativescript 6 外部图像父级不尊重高度

nativescript - Nativescript 6 外部图像父级不尊重高度

问题描述

我有一个 NS 6 应用程序并在带有 iOS 13 的 iPhone 6+ 上进行测试。

在这个应用程序中，我有一个 ListView，在 ListView 中我有一个nativescript-carousel。

在轮播中，我有一个加载外部图像的图像组件。问题是当我加载页面时，图像被加载，但父级没有垂直扩展以适应图像的整个高度。我只能看到它的一小部分。

我尝试刷新 ListView 并调用 page.requestLayout()，但这并没有帮助。如果我设置图像高度，一切正常，但问题是某些轮播项目可能没有图像，所以我不能承诺设置高度。

这是我的代码（为简洁起见截断）：

<ListView id="lst" items="{{ asks }}">
      <ListView.itemTemplate>
           <StackLayout class="ask-item">
                    
			…

             <GridLayout rows="*" columns="*" marginTop="10">

             <ns:Carousel items="{{ recs }}" color="white" pageChanged="myChangeEvent" android:indicatorAnimation="slide" indicatorColor="#999999" indicatorColorUnselected="#dddddd" indicatorOffset="0,15" showIndicator="true">
                  <ns:Carousel.itemTemplate>
                       <ns:CarouselItem backgroundColor="#f9f9f9" verticalAlignment="middle">
                             <StackLayout class="rec-item">

                                …

                                <Image src="{{ image }}" stretch="aspectFit" horizontalAlignment="center" />
                                            
					            …

                              </StackLayout>
                         </ns:CarouselItem>
                   </ns:Carousel.itemTemplate>
                </ns:Carousel>

           </GridLayout>
      </StackLayout>

 </ListView.itemTemplate>
</ListView>

处理这个问题的最佳方法是什么？

谢谢你。

标签： nativescript

解决方案

从本质上讲，iOS ListView 的高度一旦渲染就无法更改，您必须更新特定的列表项。

尝试预先下载图像或听 isLoading 属性更改，然后捕获原始图像的高度并将高度绑定到布局。图像高度可以是原始像素，您可能希望将其转换为与密度无关的像素，以便在高分辨率设备上更好地显示。

推荐阅读