Openharmony的应用与开发入门---组件的使用和入门 原创

本篇作为Openharmony的学习笔记，如有疏漏请大家多多指教

·常见基础组件：

·常见基础组件的使用：

方式一：
①打开Openharmony官网（openharmony.cn/mainPlay）
②选择支持中的文档中的应用开发文档

③选择开发

④在导航栏中即可找到所有组件使用方法

方式二：
使用Deveco studio中的API referance 进行查阅

·常见容器组件：

·常见容器组件使用方式：

类似于基础组件使用方式

例：制作一个水果排行榜

运行代码：
@Entry
@Component
struct Index {
@State message: string = ‘Hello World’

build() {
Column(){
//标题栏
Row(){
//左侧布局
Row(){
Image(r('app.media.1')) .width(22) .height(22) //给图片和文字设定外边距 .margin({right:18}) Text('排行榜') .fontSize(20) } .width('50%') .height('100%') .justifyContent(FlexAlign.Start) //右侧布局 Row(){ Image(r(‘app.media.2’))
.width(22)
.height(22)
}
.width(‘50%’)
.height(‘100%’)
.justifyContent(FlexAlign.End)
}
.width(‘100%’)
.height(47)

  //排行榜表头
  Row(){
    Row(){
      Text('排名')
        .fontSize(14)
        .fontColor('#989a9c')
    }
    .width('30%')
    Row(){
      Text('种类')
        .fontSize(14)
        .fontColor('#989a9c')
    }
    .width('50%')
    Row(){
      Text('得票数')
        .fontSize(14)
        .fontColor('#989a9c')
    }
    .width('20%')

  }
  .width('90%')
  .padding(15)
  //排行榜列表项
  Column(){
    List(){
      //苹果,ListItem用来描述每一行
      ListItem(){
        Row(){
          Text('1').fontSize(16).fontColor(Color.White).fontWeight(FontWeight.Bold).width('30%')
            .backgroundColor(Color.Blue)
            .borderRadius(15).width(30).height(30)
            .textAlign(TextAlign.Center).margin({right:55})
          Text('苹果').fontSize(16).fontWeight(FontWeight.Bold).width('40%')
          Text('12080').fontSize(16).fontWeight(FontWeight.Bold).width('30%')
        }
      }.width('100%').height(47)
      //葡萄
      ListItem(){
        Row(){
          Text('2').fontSize(16).fontColor(Color.White).fontWeight(FontWeight.Bold).width('30%')
            .backgroundColor(Color.Blue)
            .borderRadius(15).width(30).height(30)
            .textAlign(TextAlign.Center).margin({right:55})
          Text('葡萄').fontSize(16).fontWeight(FontWeight.Bold).width('40%')
          Text('10320').fontSize(16).fontWeight(FontWeight.Bold).width('30%')
        }
      }.width('100%').height(47)
      //西瓜
      ListItem(){
        Row(){
          Text('3').fontSize(16).fontColor(Color.White).fontWeight(FontWeight.Bold).width('10%')
            .backgroundColor(Color.Blue)
            .borderRadius(15).width(30).height(30)
            .textAlign(TextAlign.Center).margin({right:55})
          Text('西瓜').fontSize(16).fontWeight(FontWeight.Bold).width('40%')
          Text('9801').fontSize(16).fontWeight(FontWeight.Bold).width('30%')
        }
      }.width('100%').height(47)
    }
  }.width('90%')
  .padding(15)
}
.height('100%')
.width('100%')
//设置内边距
.padding({right:26,left:26})
//设置外边距
.margin({top:10})
.backgroundColor('#f1f3f5')
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.

}