在ScrollView中使用AbsoluteLayout

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

我从一个错误中得到了一个答案：https://github.com/NativeScript/nativescript-angular/issues/184

这个问题来自于这样一个事实: AbsoluteLayout用无限空间来度量它的所有子级，所以ScrollView和它的内容一样大，而且滚动也不起作用。一个可能的解决方法是为ScrollView设置一个大小。在这种情况下，可以使用%布局大小。

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

两个%值都来自测量父布局控件的大小(AbsoluteLayout)。由于绝对布局实际上是根元素，这些值将是屏幕大小的%。

Answer 2

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

<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前面的项目。这就是为什么标签被移动到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>

​

​

这个布局有两个网格行，这样您就可以看到ScrollView结束的位置；第一行有ScrollView和"Overlay“