鸿蒙开发-HarmonyOS UI架构

初步布局Index

当我们新建一个工程之后，首先会进入Index页。我们先简单的做一个文章列表的显示

class Article {
   
  title?: string
  desc?: string
  link?: string
}

@Entry
@Component
struct Index {
   
  @State articles: Article[] = []
  
  build() {
   
    Row() {
   
      Scroll() {
   
        Column() {
   
          ForEach(this.articles, (item: Article) => {
   
            Column() {
   
              Text(item.title)
                .fontWeight(FontWeight.Bold)
              Text(item.desc)
              Text("----------")
            }
          }, (item: Article) => {
   
            return item.link
          })
        }
        .width('100%')
      }
    }
    .height('100%')
  }
}

这样，我们只要把articles里面填充数据，就能正常显示一个列表了。

数据从哪来

可以看到上面的代码里是没有数据的，只有一个空数组。我们想要从网络获取数据。那么，数据怎么来呢？最简单粗暴的写法就是在aboutToAppear()中异步发送get请求，然后更新articles数组。

登录后复制

aboutToAppear() {
   
  // 请求网络数据
  axios.get(url