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

Question

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

问题在于，无论我尝试什么，手风琴列表都会滚出视图，将图表放在顶部，基本上看起来像是隐藏在图表后面，或者元素无法正确显示。

这就是我的布局到目前为止的方式

索引屏幕

<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的滚动，因为内容永远不会超出屏幕大小。

Answer 1

由于现在没有一个答案，我将分享我提出的解决方法。我没有使用ScrollView滚动我的图表和手风琴（基本上是ListView）组件，而是移动了图表并将其定位为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>