Angular Nativescript-在AbsoluteLayout中使用ScrollView

Question

我正在构建一个照片浏览器应用程序，用户应在其中浏览页面以查看不同的照片。这是目前对我有用的视图。

<ScrollView orientation="horizontal" ios.pagingEnabled="true" >
  <StackLayout orientation="horizontal">
    <Image *ngFor="#picture of buffer" [src]="picture.originUrl" stretch="aspectFit"></Image>
  </StackLayout>
</ScrollView>

当我尝试应用叠加层时，问题就来了。因此，我尝试将整个包装成一个包，AbsoluteLayout以便可以ScrollView正常进行操作，但将覆盖层放在顶部。当我这样做时，滚动会完全中断。这是中断滚动的视图：

<AbsoluteLayout>
  <Label text="overlay" left="0" tope="0"></Label>
  <ScrollView orientation="horizontal" ios.pagingEnabled="true" left="0" top="0">
    <StackLayout orientation="horizontal">
      <Image *ngFor="#picture of buffer" [src]="picture.originUrl" stretch="aspectFit"></Image>
    </StackLayout>
  </ScrollView>
</AbsoluteLayout>

布局似乎可以正常工作，但是滚动会中断。有人对如何实现这一目标有任何想法吗？

Answer 1

如果我正在做这个布局，我会这样做：

<GridLayout rows="*">
  <ScrollView row="0" orientation="horizontal" ios.pagingEnabled="true">
    <StackLayout orientation="horizontal">
      <Image *ngFor="#picture of buffer" [src]="picture.originUrl" stretch="aspectFit"></Image>
    </StackLayout>
  </ScrollView>
  <Label row="0" text="overlay"></Label>
</GridLayout>

通过使用相同的行，它们将位于相同的位置。我使用这种技术创建了一个完整的搜索界面，当他们单击搜索按钮时，该界面会覆盖部分屏幕。请注意; GridLayout后面的项目显示在GridLayout前面的项目上方。这就是将Label移动到GridLayout底部的原因，因此它将在ScrollLayout上方可见。

这是我做过的实际测试模板：

<Page id="Page" onloaded="pageLoaded" class="">
    <GridLayout rows="100,*">
      <ScrollView row="0">
         <StackLayout>
           <Label visibility="{{ pageData.visible ? 'visible' : 'collapsed' }}" text="Hi1 this should appear/disappear" class ="lab1"/>
          <Label visibility="{{ pageObs.visible ? 'visible' : 'collapsed' }}" text="Hi2 this should appear/disappear" class ="lab1"/>
          <Label visibility="{{pageData, pageData.visible ? 'visible' : 'collapsed' }}"  text="Hi3 this should appear/disappear" class ="lab1"/>
          <Label left="10" top="70" visibility="{{visible ? 'visible' : 'collapsed' }}"  text="Hi4 this should appear/disappear" class ="lab1"/>
          <Label text="{{pageObs.visible}}"/>
          <Label text="I'm at 120"/>
          <Button text="tap"  tap="onTap"/>
          <Label text="Another text"/>
          <Label text="Another text 2"/>
        </StackLayout>
      </ScrollView> 
      <Label row="0" text="Overlay"/>
      <Label row="1" text="Grid row 1"/>
    </GridLayout>

</Page>

此布局有两个Grid行，因此您可以看到ScrollView的结束位置。第一行具有ScrollView和“叠加层”