如何正确处理 Nativescript/Angular 中的嵌套滚动视图答案

【问题标题】：How to correctly handle nested scroll views in Nativescript/Angular如何正确处理 Nativescript/Angular 中的嵌套滚动视图
【发布时间】：2019-08-26 09:28:00
【问题描述】：

我正在尝试在 Nativescript（在 Android 上测试）中创建一个包含环形图和其下方类似手风琴的列表的视图，并启用无限滚动，这样当我向下滚动时，图表将向上滚动视图，整个屏幕都可用于列表。

问题是，无论我尝试什么，手风琴列表都会滚动出视图，将图表留在上面，基本上看起来就像它隐藏在图表后面，或者元素无法正确显示/完全没有。

到目前为止，我的布局是这样的

索引屏幕

<ScrollView heiht="100%>
    <StackLayout>
        <DonutChart [chartDataIterable]="chartData"></DonutChart>
        <Accordion  [items]="items"></Accordion>
    </StackLayout>
</ScrollView>

圆环图组件

<GridLayout rows="auto">
    <RadPieChart row="0" height="300" allowAnimation="true" (pointSelected)="changeDisplayValue($event)" (pointDeselected)="resetToTotal($event)">
        <DonutSeries tkPieSeries seriesName="dataSeries" selectionMode="DataPoint" outerRadiusFactor="0.9" expandRadius="0.4"
            outerRadiusFactor="0.7" innerRadiusFactor="0.7" [items]="chartDataObservable" valueProperty="value" legendLabel="type"></DonutSeries>
    </RadPieChart>
    <StackLayout row="0" horizontalAlignment="center" verticalAlignment="center">
        <Label horizontalAlignment="center" [text]="currentType"></Label>
        <Label horizontalAlignment="center" [text]="currentTypeAmount"></Label>
    </StackLayout>
</GridLayout>

手风琴组件

<ListView [items]="items" height="100%">
    <ng-template let-item="item">
        <AccordionCell [item]="item"></AccordionCell>
    </ng-template>
</ListView>

包裹图表的GridLayout用于在甜甜圈的中心添加一些信息，并设置手风琴高度100%以防止列表视图占用单个单元格的高度。

我怀疑问题是由于 ListView 默认集成了一个 ScrollView，因此优先考虑在 ListView 中滚动并且永远不会触发外部 ScrollView 的滚动，因为内容永远不会超过屏幕大小。

【问题讨论】：

标签： user-interface angular2-nativescript nativescript-telerik-ui

【解决方案1】：

由于一周没有答案，我将分享我想出的解决方法。我没有使用 ScrollView 滚动我的图表和手风琴（基本上是 ListView）组件，而是移动了 Chart 并将其定位为 ListView 的第一个单元格，这样滚动和单元格回收都可以很好地工作。唯一的缺点是需要进行一些额外的单元格管理，以确保图表保持在顶部，而不会丢失列表数据源的第一个条目。

accordion.component.ts

ngOnInit(): void {
    this.observableItems = new ObservableArray(this.items);
    this.observableItems.unshift({});
}

public templateSelector (item: any, index: number, items: ObservableArray<any>){
    if(index === 0)
        return "chart";
    else if(item.date != items.getItem(index-1).date)
        return "date";
    else
        return "default";
}

accordion.component.html

<RadListView [items]="observableItems" [itemTemplateSelector]="templateSelector" (itemLoading)="itemLoading($event)">

<ng-template tkListItemTemplate let-item="item" let-index="index">
    <AccordionCell [item]="item" [index]="index" [itemLoadedEvent]="itemLoadedEvent.asObservable()"></AccordionCell>
</ng-template>

<ng-template tkTemplateKey="date" let-item="item" let-index="index">
    <StackLayout>
        <Label [text]="item?.date | date: 'dd/MM/yyyy'"></Label>
        <AccordionCell [item]="item" [index]="index" [itemLoadedEvent]="itemLoadedEvent.asObservable()"></AccordionCell>
    </StackLayout>
</ng-template>

<ng-template tkTemplateKey="chart">
    <DonutChart [chartDataIterable]="chartDataIterable (chartSectionSelected)="chartSectionSelectedHandler($event)" (chartSectionDeselected)="chartSectionDeselectedHandler()"></DonutChart>
</ng-template>

【讨论】：