Nativescript Listview在IOS上的不同行为

Question

我正在使用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>

Answer 1

在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组件中也分配了高度。

附：是的，我注意到你正在使用ListViewLinearLayout，但这并没有解决目的。

Answer 2

所以我尝试了很多不同的东西来解决这个问题，我终于找到了一个适用于android和ios的东西。它可能不像ListView那样内置所有花哨的东西，但它在两个平台上都能很好地工作。当observable获取新数据并且没有ui毛刺时，它会更新ui。

解决方案是只使用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>

这并没有解决我在ios上使用LitView时遇到的问题，但它暂时有效。