如何使用 RadListView 制作手风琴列表？（本机脚本）答案

【问题标题】：How to make an accordion list with RadListView? (Nativescript)如何使用 RadListView 制作手风琴列表？（本机脚本）
【发布时间】：2018-12-11 19:56:18
【问题描述】：

我正在使用具有类别和子条目（Nativescript Angular、iOS）的 RadListView 显示数据。

我想让页面加载只显示类别，如果用户点击任何类别，它会切换条目（在点击时显示，然后在再次点击时隐藏）。

这可能吗？

我还没有看到使用当前版本的 pro ui 和 NS 成功完成此操作。我自己无法让它工作。

有关其他方法的更多详细信息是here。

有一个 NS 手风琴插件，但我认为这里的目标应该可以通过直接代码实现，尤其是因为在我的情况下，我想自定义一些。

我遇到了两个问题：

1) 如何隔离对类别本身的点击？ 分组功能似乎以编程方式“隐藏”了类别标题——我无法知道用户何时点击它（而不是只注册整个组的点击）并且无法设置该组标题的样式。

2) 单击类别标题后，如何显示/隐藏下面的条目？ 通常，我会使用visibility="{{isClicked ? 'visible' : 'collapsed'}} 之类的东西，但这不适用于 RadListView。 p>

这里有一些示例代码可以更好地理解目标：

html:

<GridLayout >
    <RadListView [items]="places" selectionBehavior="Press" (itemSelected)="itemSelected($event)" [groupingFunction]="myGroupingFunc" >
        <ng-template tkListItemTemplate let-place="item" >
            <StackLayout>
                <Label [text]="place.city"></Label>
                 <Label [text]="place.people" ></Label> //NOTE: I have not yet determined how to show this second level data within RadListView. 
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

ts：

import { Component, OnInit, } from "@angular/core";
import { Router, } from "@angular/router";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { RadListView, ListViewEventData, } from "nativescript-ui-listview";

@Component({
    selector: "Sample",
    moduleId: module.id,
    templateUrl: "./sample.component.html",
})

export class SampleComponent implements OnInit  {

    public places = [
        {country: 'US', city: 'New York', people: [{name: 'Bill', age: 22}, {name: 'Suzy', age: 23} ] }, 
        {country: 'US', city: 'Los Angeles', people: [{name: 'Sarah', age: 21}, {name: 'Barb', age: 23} ] },     
        {country: 'Canada', city: 'Toronto', people: [{name: 'Fred', age: 30}, {name: 'Ted', age: 31} ] },
        {country: 'England', city: 'London', people: [{name: 'Jim', age: 22}, {name: 'Joe', age: 19} ] }
        ]

    constructor() {
    }

    myGroupingFunc(value) {
      return value.country;
    }

    itemSelected(args) {
       /***is there a way this can isolate the tap on country name?*****/
    }
}

【问题讨论】：

你为什么不用nativescript-accordion插件？
我已经尝试过了，但是我需要对数据做很多事情，我最终与插件进行了太多的斗争来尝试自定义它。由于数据的所有自定义和操作，我需要了解呈现数据的底层代码。使用 *ngFor，这很简单（只需几分钟的编码）。我希望也可以使用 RadListView。

标签： nativescript

【解决方案1】：

要使标题条目可点击，您可以将 tkGroupTemplate 与类别 (<ng-template tkGroupTemplate let-category="category"> ) 一起使用，如答案 here 中进一步详细说明。

但是，iOS 中当前不支持切换显示和隐藏条目与 Nativescript。请参阅进一步讨论here。从this discussion 看来，您可以显示/隐藏条目。但是，在 iOS 上，应用程序不会缩小隐藏区域或放大显示区域。无论条目是否显示，该区域都将保持与加载时相同。 Android 好像没有这个限制。

nativescript 手风琴插件为切换提供了一些帮助，即使某些功能尚未解决。如果有人对 Nativescript iOS 上的手风琴感到绝望，那可能是开始的地方。

【讨论】：