Nativescript Listview другое поведение на IOS

Я использую Nativscript-ui-listview, компонент RadListView. В списке я отображаю виджеты, которые построил сам. На Android проблем нет, все они загружаются и отображаются, как только я открываю список. Но на IOS некоторая нагрузка после того, как я прокручиваю мимо них, а затем прокручиваю их назад, а некоторые вообще не отображаются. Левое изображение - Android, а правое - IOS. В списке показаны три виджета, виджет диаграммы, карта и виджет с числами. Как мне заставить их показывать на IOS?

@Component({
  selector: 'app-newlist',
  templateUrl: './new-widgets-list.component.html',
  styleUrls: ['./new-widgets-list.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  moduleId: module.id,
})

export class NewListComponent implements OnInit {
  public title: String = 'Widgets';
  public widgetsListSubscription = new Subscription;
  public widgets$: ObservableArray < Widget > ;
  public _sourceDataItems: ObservableArray < Widget > ;
  public _sourceDataItems2: ObservableArray < Widget > ;
  public processing$ = new BehaviorSubject < boolean > (true);
  public listview: RadListView;
  public layout: ListViewLinearLayout;

  constructor(public page: Page,
    private readonly store: Store < AppState > ) {
    this.initData();
  }

  ngOnInit(): void {
    this.widgets$ = new ObservableArray < Widget > ();
  }

  public get dataItems(): ObservableArray < Widget > {
    return this._sourceDataItems2;
  }

  private initData(): void {
    this._sourceDataItems = new ObservableArray < Widget > ();
    const data = this.store.pipe(
      select(getDisplayedWidgets),
      map(idmap => Object.values(idmap))
    );
    data.subscribe(list => this._sourceDataItems.push(list));
    this._sourceDataItems2 = this._sourceDataItems;
  }
}
<GridLayout tkExampleTitle tkToggleNavButton>
  <app-action-bar [title]="title"></app-action-bar>
  <RadListView [items]="dataItems" id="rlv">
    <ng-template tkListItemTemplate let-item="item">
      <StackLayout orientation="vertical">
        <GridLayout columns="auto">
          <app-widgets-picker horizontalAlignment="left" [widget]="item"></app-widgets-picker>
        </GridLayout>
      </StackLayout>
    </ng-template>
    <ListViewLinearLayout *appIfIos tkListViewLayout itemHeight="250"></ListViewLinearLayout>
  </RadListView>
</GridLayout>


nativescript angular angular2-nativescript nativescript-telerik-ui
person Johannes Kraft    schedule 04.03.2019    source источник
comment
Не могли бы вы поделиться полным образцом игровой площадки, где можно воспроизвести проблему?   -  person Manoj    schedule 04.03.2019
comment
Я обошел эту проблему, используя повторитель, а не просмотр списка. Если этот подход работает для вас, повторители на iOS намного более предсказуемы.   -  person David    schedule 05.03.2019
comment
Могу ли я использовать повторитель в проекте Angular?   -  person Johannes Kraft    schedule 05.03.2019

Ответы (3)


arrow_upward
0
arrow_downward

В iOS ListView должен иметь предопределенный размер, иначе он либо не будет занимать места, либо приведет к некоторым побочным эффектам, поскольку динамический размер строки не поддерживается конструкцией в ios U | X. Я уже сталкивался с подобными проблемами раньше. Предоставление высоты элементам в шаблоне строки устранило проблемы для меня, например

<ng-template tkListItemTemplate let-item="item">
      <StackLayout orientation="vertical" height="250">
        <GridLayout columns="auto" height="250">
          <app-widgets-picker horizontalAlignment="left" [widget]="item"></app-widgets-picker>
        </GridLayout>
      </StackLayout>
</ng-template>

Убедитесь, что в вашем app-widgets-picker компоненте также назначена высота.

P.S. Да, я заметил, что вы используете ListViewLinearLayout, но это не решает цели.

person Narendra    schedule 05.03.2019
comment
Спасибо за ответ, я получил лучший результат с вашим примером, но я изменил RadListView на ListView. Но ListView, похоже, не обновляет мои виджеты автоматически новыми данными по мере их поступления. И если я прокручиваю от виджета диаграммы и возвращаюсь к нему, он просто загружается, но ничего не происходит. Остальные элементы в списке загружаются и исчезают при прокрутке. Не очень последовательное поведение. - person Johannes Kraft; 05.03.2019
comment
Если это угловой, то использование ngOnChanges решает цель - person Narendra; 05.03.2019
comment
я должен обновить список OnChanges? - person Johannes Kraft; 05.03.2019
comment
Сделайте элемент строки как компонент и обновите внешний вид данных на ngonchange - person Narendra; 05.03.2019
comment
Я не понимаю, как это сделать? Есть детская площадка или хороший тому пример? - person Johannes Kraft; 05.03.2019

arrow_upward
0
arrow_downward

Итак, я перепробовал столько разных вещей, чтобы решить эту проблему, и наконец нашел тот, который работает как для Android, так и для iOS. Возможно, в него не встроены все причудливые функции, как в ListView, но он прекрасно работает на обеих платформах. Он обновляет пользовательский интерфейс, когда наблюдаемый получает новые данные и нет сбоев пользовательского интерфейса.

Решение состоит в том, чтобы просто использовать ScrollView и ngFor для отображения элементов списка. Я пробовал это только с меньшим количеством элементов списков (10-20), и он загружается очень быстро.

<ScrollView orientation="vertical">
  <GridLayout rows="auto, auto">
    <StackLayout row="0">
      <StackLayout *ngFor="let item of obs$ | async" class="card">
        <app-widgets-picker horizontalAlignment="left" [widget]="item"></app-widgets-picker>
      </StackLayout>
    </StackLayout>
  </GridLayout>
</ScrollView>

Это не решает проблем, с которыми я столкнулся с LitView на iOS, но пока работает.

person Johannes Kraft    schedule 07.03.2019
comment
ListView виртуализирован, что означает, что он может обрабатывать тысячи строк. Он создает элементы графического интерфейса только для того, что находится внутри области отображения, а затем меняет эти элементы при прокрутке, чтобы имитировать прокрутку длинного списка. - person Narendra; 13.03.2019
comment
Да, я знаю, прокрутка не так хороша, как правильное представление списка при отображении большего количества строк. Но я не мог заставить список работать. И мне нужно, чтобы это приложение было доступно клиентам. И в этом случае списки никогда не будут очень большими. Я бы хотел использовать представление списка, но я не могу заставить его работать на iOS. - person Johannes Kraft; 13.03.2019

arrow_upward
0
arrow_downward

мои данные не отображались на Android, когда они вышли из строя. Я сделал, как сказал @Narendra, и выполнил соответствующие коды в функции ngOnChanges.

ngOnChanges(){
    if (this.item.profilePhoto === undefined) this.setAnonimProfilePhoto();
    if (!this.item.isOnline) this.userOfflineFromNow();
    this.getCityName();
}

@ Нарендра, спасибо.

person nazimmertbilgi    schedule 28.05.2020