HarmonyOS NEXT鸿蒙开发:ForEach循环渲染List列表、ListItem 案例

ForEach循环渲染

详见链接:
https://www.malaoshi.top/show_1GW570S1SaU.html

代码


const SOUNDS:Array<Array<string>> = [
  ['声音1', 'a_muyu1.mp3'],
  ['声音2', 'a_muyu2.mp3'],
  ['声音3', 'a_muyu3.mp3'],
  ['声音4', 'a_muyu4.mp3'],
  ['声音5', 'a_muyu5.mp3'],
  ['声音6', 'a_muyu6.mp3'],
]

@Entry
@Component
struct ForEachDemo {
  @State message: string = 'Hello World';

  build() {
    Column() {
      // 铃声列表
      List() {

        ForEach(SOUNDS, (item:Array<string>,index:number)=>{
          ListItem() {
            Row() {
              Text(item[0])
                .fontSize(20)

              Radio({
                value: item[1],
                group: "type"
              })
            }
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .padding({
            top: 15,
            bottom: 15,
            left: 5
          })
        })
      }
      .width('90%')
      .height('100%')
      .divider({
        //设置分割线
        strokeWidth: 1,
        color: '#333',
        // startMargin: 10,
        // endMargin: 10
      })
      .scrollBar(BarState.On) // 显示滚动条
    }
    .height('100%')
    .width('100%')
  }
}

原文出处:/show_1GW1yB2beA68.html