Угловой Nativescript - использование 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). Поскольку Absolute layout является корневым элементом, на самом деле эти значения будут составлять% от размера экрана.

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 и «Перекрытие»