HarmonyOS list数据加载问题

数组有几百个元素但是页面只显示一个，其中this.searchResult有几百个元素的。

@Styles listStyles(){
  .id('list')
    .backgroundColor(Color.Yellow)
    .margin({top:10})
    .alignRules({
      top:{anchor:'search',align:VerticalAlign.Bottom},
      left:{anchor:LayoutUtil.Container,align:HorizontalAlign.Start},
      bottom:{anchor:LayoutUtil.Container,align:VerticalAlign.Bottom},
      right:{anchor:LayoutUtil.Container,align:HorizontalAlign.End}
    })
}
RelativeContainer() {
  List() {
    ListItemGroup(){
      ForEach(this.searchResult, (item: object, index: number) => {
        ListItem() {
          RelativeContainer() {
            Image(item['profile_image_url'])
              .alt($rawfile('Contacts/ice_group_people_default_head.png'))
              .width(40)
              .height(40)
              .borderRadius(5)
              .margin({ left: 15, top: 5, bottom: 5 })
              .id('header')

            Text(item['name'])
              .fontSize(14)
              .height(20)
              .fontSize(14)
              .textAlign(TextAlign.Start)
              .id('name')
              .alignRules({
                left: { anchor: 'header', align: HorizontalAlign.End },
                right: { anchor: LayoutUtil.Container, align: HorizontalAlign.End },
                top: { anchor: 'header', align: VerticalAlign.Top }
              })
              .margin({ right: 15, left: 10 })

            Text(item['company_name'] + '/' + item['org_name'] + '/' + item['position'])
              .fontSize(12)
              .textAlign(TextAlign.Start)
              .maxLines(2)
              .id('info')
              .alignRules({
                left: { anchor: 'name', align: HorizontalAlign.Start },
                top: { anchor: 'name', align: VerticalAlign.Bottom },
                right: { anchor: 'name', align: HorizontalAlign.End }
              })
              .margin({ top: 8,right: 20 })
            Divider().height(0.5).backgroundColor(0xDDDDDD).id('dev')
              .alignRules({
                top:{anchor:'info',align:VerticalAlign.Bottom},
                left:{anchor:'header',align:HorizontalAlign.End},
                right:{anchor:'info',align:HorizontalAlign.End}
              })
              .margin({top:8,right:20})
          }
        }
      })
    }
  }
  .listStyles()
}

HarmonyOS

FengTianYa

16h前

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

参考示例：

build() {
  List() {
    ForEach([1,2,3,4], (item:number) => {
      ListItem() {
        Column() {
          Text('高度100')
            .fontSize(14)
            .height(20)
            .fontSize(14)
            .textAlign(TextAlign.Start)
            .width('100%')
            .height(100)
            .backgroundColor(Color.Yellow)
          Text('高度占满')
            .fontSize(14)
            .height(20)
            .fontSize(14)
            .textAlign(TextAlign.Start)
            .backgroundColor(Color.Pink)
            .width('100%')
            .flexGrow(1) // 设置组件在父容器的剩余空间所占比例
        }
        .width('100%')
        .height(300)
      }
    })
  }
}

Column、Row、 Flex组件都可以通过Flex布局控制子元素显示，文档参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-flex-layout-V5

14h前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS list数据加载问题

订阅鸿蒙技术特刊，精选内容抢先看