ScrollView 中的 GridLayout - NativeScript

Question

我是 NativeScript 的新手。我的页面中有 4 张图片，我想实现这一点。

除非我希望我的封面图片是屏幕的全高。这是我正在尝试的代码。

<ScrollView>
    <StackLayout height="100%" width="100%">
      <GridLayout columns="*, *" rows="5*, *, *">
        <StackLayout
          :row="0"
          :col="0"
          :colSpan="2"
          class="bgImage coverImage"
          :style="{backgroundImage:`url('${defaultImg}')`}"
        ></StackLayout>
        <StackLayout
          :row="calcRow(idx)"
          :col="calcCol(idx)"
          :colSpan="idx==0?2:1"
          v-for="(item,idx) in event.imgs"
          :key="idx"
          class="bgImage eventImage"
          :style="{backgroundImage:`url('${item}')`}"
        ></StackLayout>
      </GridLayout>
    </StackLayout>
  </ScrollView>

如果我没有为 StackLayout 提供 height="100%"，它甚至不会加载图像。如果我确实给了它，那么就没有卷轴了。

这里是游乐场linkPlayground Link

Answer 1

您可以使用 ScrollView 的 layoutChanged 事件，您可以在其中计算它的高度并将其用作第一张图片的高度。

Playground Sample

ScrollView 中的 GridLayout - NativeScript

GridLayout in ScrollView - NativeScript

nativescript

nativescript-vue