Question

我正在尝试在Nativescript中创建一个视图（在Android上对其进行测试），该视图包含一个Donut Chart及其下方的类似手风琴的列表，并启用无限滚动，以便当我向下滚动时，该图表将向上滚动视图，整个屏幕都可用于列表。

问题是，无论我尝试什么，手风琴列表都将滚动到视图之外，将图表放在其顶部，基本上看起来像是在图表的后面，或者元素无法正确显示/完全没有。

到目前为止，这是我制作布局的方式

索引屏幕

<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）组件，而是移动了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>

如何在Nativescript / Angular

1 个答案: