list弹窗

弹窗

如何制作一个这样的list循环。

1. List的数据内容

这里面我们需要两个foreach循环嵌套，首先我们先写我们需要的数据内容。

class Contact {
  name: string;
  time:string
  constructor(name: string,time:string) {
    this.name = name;
    this.time=time
  }
}

contactsGroups: object[] = [
    {
      title: 'A',
      contacts: [
        new Contact('阿比让','GMT+00:00'),
        new Contact('阿布贾','GMT+01:00'),
        new Contact('阿尔及利亚','GMT+04:00' ),
        new Contact('安道尔','GMT+04:00' ),
      ],
    },
    {
      title: 'B',
      contacts: [
        new Contact('巴哈马','GMT+04:00'),
        new Contact('巴林','GMT+04:00'),
        new Contact('孟加拉国','GMT+04:00'),
        new Contact('巴巴多斯','GMT+04:00')
      ],
    },
  {
  title: 'C',
  contacts: [
  new Contact('柬埔寨','GMT+04:00'),
  new Contact('喀麦隆','GMT+04:00'),
    new Contact('加拿大','GMT+04:00'),
    new Contact('佛得角','GMT+04:00')
  ],
}
  ]

1. list循环

这里面是两个循环嵌套。我们先写一个list列表，然后学第一个foreach循环，这里面是循环的title。然后写列表项lisItem，在这里面写第二个foreach循环。书写格式。

List({ space: 20, initialIndex: 0 ,scroller: this.listScroller }) {
  ForEach(this.contactsGroups, item => {
    ListItemGroup({ header: this.itemHead(item.title) }) {
      // 循环渲染ListItem
      ForEach(item.contacts, contact => {
        ListItem() {
          Column({space:5}){
            Text(contact.name)
            Text(contact.time).fontSize(13).fontColor('#626365')
          }.padding(10).alignItems(HorizontalAlign.Start)
        }
        .onClick(()=>{
          this.controller.close()
          this.confirm()
        })
      })
    }
  })
}
.scrollBar(BarState.Auto)
.width('100%')
.height('100%')

1. 给title定义字体

@Builder itemHead(text: string) {
  // 列表分组的头部组件，对应联系人分组A、B等位置的组件
  Text(text)
    .fontSize(20)
    .backgroundColor('#fff1f3f5')
    .width('100%')
    .padding(5)
}

1. 源代码
2. class Contact {
     name: string;
     time:string
     constructor(name: string,time:string) {
       this.name = name;
       this.time=time
     }
   }
4. contactsGroups: object[] = [
       {
         title: 'A',
         contacts: [
           new Contact('阿比让','GMT+00:00'),
           new Contact('阿布贾','GMT+01:00'),
           new Contact('阿尔及利亚','GMT+04:00' ),
           new Contact('安道尔','GMT+04:00' ),
         ],
       },
       {
         title: 'B',
         contacts: [
           new Contact('巴哈马','GMT+04:00'),
           new Contact('巴林','GMT+04:00'),
           new Contact('孟加拉国','GMT+04:00'),
           new Contact('巴巴多斯','GMT+04:00')
         ],
       },
     {
     title: 'C',
     contacts: [
     new Contact('柬埔寨','GMT+04:00'),
     new Contact('喀麦隆','GMT+04:00'),
       new Contact('加拿大','GMT+04:00'),
       new Contact('佛得角','GMT+04:00')
     ],
   }
     ]

List({ space: 20, initialIndex: 0 ,scroller: this.listScroller }) {
  ForEach(this.contactsGroups, item => {
    ListItemGroup({ header: this.itemHead(item.title) }) {
      // 循环渲染ListItem
      ForEach(item.contacts, contact => {
        ListItem() {
          Column({space:5}){
            Text(contact.name)
            Text(contact.time).fontSize(13).fontColor('#626365')
          }.padding(10).alignItems(HorizontalAlign.Start)
        }
        .onClick(()=>{
          this.controller.close()
          this.confirm()
        })
      })
    }
  })
}
.scrollBar(BarState.Auto)
.width('100%')
.height('100%')

@Builder itemHead(text: string) {
  // 列表分组的头部组件，对应联系人分组A、B等位置的组件
  Text(text)
    .fontSize(20)
    .backgroundColor('#fff1f3f5')
    .width('100%')
    .padding(5)
}