HarmonyOS Next 入门实战 - 基础组件、页面实现

最新推荐文章于 2025-04-20 13:26:00 发布

睡精灵

最新推荐文章于 2025-04-20 13:26:00 发布

阅读量398

点赞数 5

分类专栏： HarmonyOS Next 文章标签： harmonyos 华为

本文链接：https://blog.youkuaiyun.com/shuijinglingsos/article/details/144338427

版权

基础组件

常用组件

Text：显示文本内容
Image：显示图片
Button：显示一个按钮
Column：纵向布局
Row：横向布局
List：列表
各组件的用法

Text("文本组件")
  .fontColor(Theme.Color.textPrimary)
  .fontWeight(FontWeight.Medium)
  .fontSize(20)

Image($r('app.media.banner'))
        .objectFit(ImageFit.Fill)
        .width('100%')
        .height(100)
        .opacity(191)
 
Button("按钮").onClick((event) => {
   
    //按钮点击事件
})

Column() {
   
  Text("文本1")
  .fontColor(Theme.Color.textPrimary)
  .fontWeight(FontWeight.Medium)
  .fontSize(20)
  Text("文本2")
  .fontColor(Theme.Color.textPrimary)
  .fontWeight(FontWeight.Medium)
  .fontSize(20)
  Text("文本3")
  .fontColor(Theme.Color.textPrimary)
  .fontWeight(FontWeight.Medium)
  .fontSize(20)
}.width('100%')

Row() {
   
  Text("文本1")
  .fontColor(Theme.Color.textPrimary)
  .fontWeight(FontWeight.Medium)
  .fontSize(20)
  Text("文本2")
  .fontColor(Theme.Color.textPrimary)
  .fontWeight(FontWeight.Medium)
  .fontSize(20)
  Text("文本3")
  .fontColor(Theme.Color.textPrimary)
  .fontWeight(FontWeight.Medium)
  .fontSize(20)
}.width('100%')

List() {
   
  ForEach(this.items, (item: string, index) => {
   
    ListItem(){
   
      Text(item).padding(10).width('100%')
    }
  })
}

Grid
用于展示网格列表

Grid(){
   
  GridItem(){
   
    Text("item1").padding(10)
  }
  GridItem(){
   
    Text("item2").padding(10)
  }
  GridItem(){
   
    Text("item12").padding(10)
  }
}.columnsTemplate("1f 1f 1f")  //列分布规则
.rowsTemplate("1f 1f 1f")		//行分布规则

Grid的夸行/列设置

在创建Grid时可以传入GridLayoutOptions来实现网格所占行/列数

regularSize，类型为[number，number]，用来定义一般规则的Item所占的行/列数
irregularIndexes，类型为number[]，用来指定不遵循一般规则的Item索引。
onGetIrregularSizeByIndex，类型(index: number) => [number, number]的回调函数，irregularIndexes中配置的索引会回调到此函数，返回结果表示该Item所占用的行/列数，[所占行数，所占列数]

@Preview
@Component
struct GridList {
   
  item: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  layoutOption: GridLayoutOptions = {
   
    regularSize: [1, 1],  //一般规则的item占用1行1列
    irregularIndexes: [0, 5], //非一般规则item的索引
    onGetIrregularSizeByIndex: (index: number) => {
   
      if (index == 0) {
   
        return [1, 2]  //0索引处的item占用1行2列
      } else {

最低0.47元/天解锁文章