如何使用RadListView制作手风琴列表? (本语) [英] How to make an accordion list with RadListView? (Nativescript)

问题描述

我正在使用RadListView显示具有类别和子条目(Nativescript Angular，iOS)的数据.

I am showing data with RadListView that has categories and subentries (Nativescript Angular, iOS).

我希望页面加载仅显示类别，并且如果用户单击任何类别，它将切换条目(单击显示，然后隐藏另一单击).

I want to have the page load showing only the categories, and if the user clicks on any category, it toggles the entries (showing on click, then hiding on another click).

这可能吗?

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

I have not seen this successfully accomplished with the current version of pro ui and NS. I have not been able to get it to work myself.

有关其他方法的更多详细信息，请此处.

Further details about other approaches are here.

有一个NS手风琴插件，但是我认为这里的目标应该可以通过简单的代码实现，特别是因为就我而言，我想自定义一点.

There is an NS accordion plugin, but I think the goal here should be possible with straight code, especially because in my case I want to customize a fair bit.

我遇到了两个问题:

1)如何隔离类别本身的点击?分组功能似乎以编程方式隐藏"了类别标题-我不知道用户何时单击它(而不是仅单击整个组即可进行注册)，并且无法设置该组标题的样式.

1) How do I isolate the click on category itself? The grouping function seems to "hide" the category title programmatically--I have not been able to know when the user clicks on it (instead of registering just clicks on the whole group) and have not been able to style that group header.

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

2) Once the category header is clicked, how do I show / hide the entries below? Normally, I would use something like visibility="{{isClicked ? 'visible' : 'collapsed'}}, but that is not working with RadListView.

下面是一些示例代码，可让您更好地了解目标:

Here is some sample code to give a better sense of the goal:

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?*****/
    }
}

推荐答案

要使标题条目可点击，您可以将tkGroupTemplate与类别(<ng-template tkGroupTemplate let-category="category">)结合使用，如答案

To make the header entries clickable, you can use tkGroupTemplate with categories (<ng-template tkGroupTemplate let-category="category"> ), as further detailed in the answer here.

但是，带有Nativescript的iOS当前不支持切换显示和隐藏条目.在此处中查看更多讨论.在此讨论中，您似乎可以显示/隐藏条目.但是，在iOS上，该应用程序不会缩小隐藏区域或扩大显示区域.无论是否显示条目，该区域都将保持与加载时相同.看来Android没有此限制.

However, toggling show and hide entries is not currently supported in iOS with Nativescript. See further discussion here. From this discussion, it looks like you can show/hide entries. However, on iOS, the app will not shrink the area on hide or enlarge the area on show. The area will stay the same as it is when loaded, whether or not the entries are shown. It looks like Android does not have this limitation.

nativescript手风琴插件为切换提供了一些帮助，即使某些功能尚待解决.如果任何人都不愿意在Nativescript iOS上手风琴，那可能就是开始的地方.

The nativescript accordion plugin provides some help for toggling, even though some features have yet to be ironed out. If anyone is desparate for an accordion on Nativescript iOS, that is probably the place to start.

这篇关于如何使用RadListView制作手风琴列表? (本语)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！