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')
}

}