使用NativeScript创建可折叠列表 [英] Creating a collapsible list with NativeScript

问题描述

我正在尝试在我的应用中创建FAQs类型的屏幕，但是当有人点击该项目时，我没有找到显示问题和折叠答案的方法. 我已经尝试过使用RadDataForm组，并且能够进行折叠，但是我无法调整屏幕和元素的大小，因此现在尝试使用手风琴. 我仍然无法崩溃甚至无法显示问题.我在这里看到有人说，仅通过使用折叠和可见属性，他们就可以在没有Accordion的情况下使列表生效，但是他们没有分享他们的工作方式. 当我单击列表中的名称时，没有任何反应.我想找到一个简单有效的解决方案. 我的代码:

I am trying to create a FAQs type of screen in my app however am not finding a way to show questions and collapse the answers when someone tap in the item. I already tried using RadDataForm Groups and was able to do the collapsing but I was not able to resize the screen and elements so now am trying with Accordion. Still I am not able to collapse or even show the questions. I saw someone here saying they were able to make the list work without Accordion just by using collapse and visible attributes but they did not share how they did it. When I click in the names on the list nothing happens. I would like to find a simple and effective solution for this problem. My code:

    <Accordion [items]="myQuestions" itemTapped="tapped" headerTextBold="true" headerTextColor="white" headerColor="pink" headerTextColor="blue"
  allowMultiple="true">

  <ng-template accordionHeaderTemplate let-item="item" let-i="index">
      <GridLayout backgroundColor="blue" columns="auto,*">
          <Label [text]="item.question"></Label>
      </GridLayout>
  </ng-template>

  <ng-template accordionItemTemplate let-item="item" let-parent="parentIndex" let-even="even" let-child="childIndex">
      <StackLayout>
          <Label [text]="item.description"></Label>
      </StackLayout>
  </ng-template>

  <!-- IOS Only
  <ng-template accordionFooterTemplate let-item="item" let-i="index">
      <GridLayout backgroundColor="yellow" columns="auto,*">
          <Label [text]="hi"></Label>
          <Label col="1" text="-"></Label>
      </GridLayout>
  </ng-template> -->
</Accordion>

组件:

import { Component, OnInit, ViewChild} from "@angular/core";
import { Router } from "@angular/router";
import { Question } from "../../shared/question/question";
import { Observable } from "tns-core-modules/data/observable";
import { ObservableArray } from "tns-core-modules/data/observable-array";
// import { RadDataFormComponent } from "nativescript-ui-dataform/angular";

@Component({
  selector: "question",
  moduleId: module.id,
  templateUrl: "./question.html",
  styleUrls: ["./question-common.css", "./question.css"]
})
export class QuestionComponent extends Observable{ 
  public myQuestions: ObservableArray<any>;
  // @ViewChild('myRuntimeDataFormComp') myRuntimeDataFormComp: RadDataFormComponent;
  constructor(){
    super();
    this.myQuestions =new ObservableArray([
      new Question("Topic 1", "lorem ipsum lorem ipsum lorem ipsum"),
      new Question("Topic 2", "lorem ipsum lorem ipsum lorem ipsum"),
      new Question("Topic 3", "lorem ipsum lorem ipsum lorem ipsum"),
      new Question("Topic 4", "lorem ipsum lorem ipsum lorem ipsum"),
      new Question("Topic 5", "lorem ipsum lorem ipsum lorem ipsum"),
      new Question("Topic 6", "lorem ipsum lorem ipsum lorem ipsum")
      ]);   
  }

}

我的屏幕:

推荐答案

我终于能够弄清楚了，但是我在nativescript论坛中的@manojdcoder的代码中获得了帮助. 我使用了ListView和Observable数组.这是我的解决方案:

I was finally able to figure it out, but I had help from @manojdcoder's code in the nativescript forum. I used ListView and Observable arrays. This is my solution:

  import { Component, OnInit, ViewChild} from "@angular/core";
  import { Router } from "@angular/router";
  import { Question } from "../../shared/question/question";
  import { Observable } from "tns-core-modules/data/observable";
  import { ObservableArray } from "tns-core-modules/data/observable-array";
  import { RadListView, ListViewEventData } from "nativescript-ui-listview";
  // import { RadDataFormComponent } from "nativescript-ui-dataform/angular";

  import { isIOS, isAndroid } from "platform";
  import * as utils from "utils/utils";
  declare var UIView, NSMutableArray, NSIndexPath;


  @Component({
    selector: "question",
    moduleId: module.id,
    templateUrl: "./question.html",
    styleUrls: ["./question-common.css", "./question.css"]
  })
  export class QuestionComponent implements OnInit{ 
    public myQuestions: ObservableArray<any>;
    public isItemVisible: boolean;
    constructor(){
    }

    ngOnInit() {
      this.myQuestions =new ObservableArray([
        new Question("Topic 1", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 2", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 3", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 4", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 5", "lorem ipsum lorem ipsum lorem ipsum",false),
        new Question("Topic 6", "lorem ipsum lorem ipsum lorem ipsum",false)
        ]);  
    } 

    templateSelector(item: any, index: number, items: any): string {
      return item.expanded ? "expanded" : "default";
    }

    onItemTap(event: ListViewEventData) {
      const listView = event.object,
          rowIndex = event.index,
          dataItem = event.view.bindingContext;

      dataItem.expanded = !dataItem.expanded;
      if (isIOS) {
              var indexPaths = NSMutableArray.new();
              indexPaths.addObject(NSIndexPath.indexPathForRowInSection(rowIndex, event.groupIndex));
              listView.ios.reloadItemsAtIndexPaths(indexPaths);
      }
      if (isAndroid) {
          listView.androidListView.getAdapter().notifyItemChanged(rowIndex);
      }
    }

  }

这是使用RadListView的视图:

And here is the view, using a RadListView:

<RadListView [items]="myQuestions" [itemTemplateSelector]="templateSelector" class="list-group" (itemTap)="onItemTap($event)">
    <ng-template tkListItemTemplate let-item="item">
        <GridLayout rows="auto,auto" columns="6*,*" class="add-dropdown">
            <Label [text]="item.question" class="list-group-item" col="0"></Label>
            <Image src="res://arrow" col="1"></Image>
        </GridLayout>

    </ng-template>
    <ng-template tkTemplateKey="expanded" let-item="item">
        <GridLayout rows="auto,auto" columns="6*,*" class="list-group-item add-dropdown">
            <Label row="0" col="0" [text]="item.question" class="font-weight-bold"></Label>
            <Image row="0" col="1" src="res://arrow_horizontal"></Image>
            <Label row="1" col="0" [text]="item.description" class="show-answer"></Label>
        </GridLayout>

    </ng-template>
</RadListView>

这是我的屏幕:

这篇关于使用NativeScript创建可折叠列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！