Angular Nativescript — использование ScrollView в AbsoluteLayout

Я создаю приложение для просмотра фотографий, в котором пользователь должен перемещаться между страницами, чтобы увидеть разные фотографии. Вот представление, которое в настоящее время работает для меня.

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

Макеты работают правильно, но прокрутка прерывается. У кого-нибудь есть идеи о том, как это сделать?


ios nativescript angular
person jonnysamps    schedule 14.04.2016    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Если бы я делал этот макет, я бы сделал это:

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

Пример прокрутки

Этот макет имеет две строки Grid, так что вы можете видеть, где заканчивается ScrollView; первая строка имеет ScrollView И "Overlay"

person Nathanael    schedule 14.04.2016
comment
прокрутка по-прежнему прерывается при использовании этого макета. - person jonnysamps; 15.04.2016
comment
Я обновил ответ фактическим тестовым шаблоном, который я использовал, и анимированным gif, показывающим, что он работает... - person Nathanael; 15.04.2016
comment
Да, этот макет тоже не работает. Это должно быть ошибка nativescript-angular. Я запишу это. - person jonnysamps; 17.04.2016

arrow_upward
1
arrow_downward

Я получил ответ на ошибку, которую я зарегистрировал: 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 является корневым элементом, на самом деле эти значения будут % от размера экрана.

person jonnysamps    schedule 21.04.2016