Angular Nativescript - 在 AbsoluteLayout 中使用 ScrollView答案

【问题标题】：Angular Nativescript - Using a ScrollView within an AbsoluteLayoutAngular Nativescript - 在 AbsoluteLayout 中使用 ScrollView
【发布时间】：2016-04-14 20:18:05
【问题描述】：

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

<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>

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

【问题讨论】：

标签： ios angular nativescript

【解决方案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 和“Overlay”

【讨论】：

使用此布局时滚动仍然会中断。
我用我使用的实际测试模板更新了答案，还有一个动画 gif 显示它工作......
是的，那个布局也不起作用。它必须是一个原生脚本角度错误。我会记录下来的。

【解决方案2】：

我从我提交的错误中得到了答案：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) 的 %。由于绝对布局是一个根元素，实际上这些值将是屏幕大小的 %。

【讨论】：