Блог

Я пытаюсь создать в 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>
  

Компонент Accordion

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

GridLayout, обтекающий диаграмму, используется для добавления некоторой информации в центр пончика, а высота аккордеона 100% установлена для предотвращения того, чтобы представление списка занимало высоту одной ячейки.

Я подозреваю, что проблема связана с тем, что ListView по умолчанию интегрирует ScrollView, таким образом, устанавливая приоритет прокрутки в ListView и никогда не запуская прокрутку внешнего ScrollView, поскольку содержимое никогда не превышает размер экрана.

Поскольку ответа не было уже неделю, я поделюсь решением, которое я придумал. Вместо того, чтобы использовать ScrollView для прокрутки моих компонентов chart и accordion (в основном 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>