Как правильно обрабатывать вложенные представления прокрутки в Nativescript / Angular - PullRequest
Новая
       18

Как правильно обрабатывать вложенные представления прокрутки в Nativescript / Angular

0 голосов
/ 04 апреля 2019

Я пытаюсь создать в 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, так как содержимое никогда не превышает размер экрана.

1 Ответ

0 голосов
/ 11 апреля 2019

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

...