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 正常运行，但将 overlay 保持在顶部。当我这样做时，滚动会一起中断。这是中断滚动的视图：

<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 AND "Overlay"

Answer 2

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

问题出在 AbsoluteLayout 以无穷大 space 测量其所有子级这一事实，因此 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) 的 %。由于绝对布局是根元素，实际上这些值将是屏幕尺寸的百分比。

Angular Nativescript - 在 AbsoluteLayout 中使用 ScrollView

Angular Nativescript - Using a ScrollView within an AbsoluteLayout

ios

nativescript

angular