Nativescript Listview отличается поведением на IOS - PullRequest
Новая
       53

Nativescript Listview отличается поведением на IOS

0 голосов
/ 04 марта 2019

Я использую 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>

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Итак, я пробовал так много разных вещей, чтобы решить эту проблему, и наконец нашел тот, который работает как для 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, но пока работает.

0 голосов
/ 05 марта 2019

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

<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 компоненте.

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

...