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

Я пытаюсь создать в 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
person LaXfar    schedule 04.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

person LaXfar    schedule 11.04.2019