HarmonyOS第二章：初识ArkTs/ArkUI，常用组件一

一、arkts

1.1 简介

1.2 关键特性

• 声明式ui、自定义组件、动态扩展ui元素
  arkts定义了声明式ui描述、自定义组件和动态扩展ui元素的能力，再配合arkui开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了ui开发的主体。

  下面是一个示例，是一个基础的arkts书写的代码片段，展示了arkts声明式ui的能力：

  @entry  
  @component  
  struct mycomponent {  
    @state private text: string = 'hello, harmonyos!';  
    
    build() {  
      row() {  
        text(this.text)  
          .fontsize(20)  
          .fontweight(fontweight.bold)  
          .onclick(() => {  
            this.text = 'you clicked me!';  
          });  
      }  
    }  
  }
  

• 状态管理

  arkts提供了多维度的状态管理机制。在ui开发框架中，与ui相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活地利用这些能力来实现数据和ui的联动。

• 渲染控制
  arkts提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的ui内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。

1.3 基础代码结构

1.3.1 示例：

注意：build()函数中只能包含一个根节点

1.3.2 页面组件

// @entry 装饰器 - 代表入口
@entry
// @component 装饰器 - 代表组件
@component
// struct 声明组件 index 表示自定义的组件名称
struct index {
  // @state 装饰器
  @state message: string = '鸿蒙开发'
  @state color: string = 'green'
  // @builder装饰器：自定义构建函数
  build() {
  	// 只能包含一个根节点
    // 下面的都属于ui描述器，可以理解为html中的元素、css中的属性
    // row column text 都属于系统组件
    row() {
      column() {
        text(this.message)
          // fontsize 属性，和css中的font-size一致，用来设置文字大小，单位是vp
          .fontsize(50)
          // fontweight 属性，和css中的font-weight一致，用来设置字体粗细
          .fontweight(fontweight.bold)
          // fontcolor 设置字体颜色
          .fontcolor(this.color)
          // onclick 点击事件
          .onclick(() => {
            console.log('我被点击了！！！')
          })
      }
      // 设置column组件宽度，可以是百分数，也可以是具体数值，写具体数值时不带单位
      .width('100%')
    }
    // 设置row组件高度
    .height('100%')
  }
}

1.3.3 自定义组件

• 首先在入口文件同级下新建一个组件文件
  

• 选择新建arkts file
  

• 自定义文件名称
  

• 编写代码
  

• 预览
  双击进入到mycomponentpage.ets文件下，点击右侧预览窗口的刷新
  
  效果已经有了
  

二、arkui

2.1 arkui介绍

2.2 开发范式

arkui针对不同的应用场景及技术背景，提供了两种开发范式，分别是基于arkts的声明式开发范式（简称“声明式开发范式”）和兼容js的类web开发范式（简称“类web开发范式”）。推荐使用声明式开发范式。

• 声明式开发范式：采用基于typescript声明式ui语法扩展而来的arkts语言，从组件、动画和状态管理三个维度提供ui绘制能力。
• web开发范式：原生的html、css、js开发

三、常用组件的使用

这里列举了一些常用的组件，有前端开发经验的同学可以查看官方文档。

3.1 text组件

• 基础用法
  

  @entry
  @component
  struct textpage {
    build() {
      text('这是一个text组件')
    }
  }
  

• 设置一些样式
  
  可以在组件后面链式调用属性：

  @entry
  @component
  struct textpage {
    build() {
      text('这是一个text组件')
        .height(150)
        .width('100%')
        .backgroundcolor('blue')
        .fontcolor('green')
        .fontsize(40)
        .border({ width: 1, color: '#f40' })
    }
  }
  

• 也可以插入span组件

  

  注意：组件有两种方式书写，一种是向上面那种直接写属性、传值，一种是下面这种在组件的{}中书写内容，下面这种写法在花括号中加了span组件之后，text组件传递的参数就不生效了

  @entry
  @component
  struct textpage {
    build() {
      text('这是一个text组件') {
        span('这是span组件').height(100).width(100)
      }
        .height(150)
        .width('100%')
        .backgroundcolor('blue')
        .fontcolor('green')
        .fontsize(40)
        .border({ width: 1, color: '#f40' })
    }
  }
  

3.2 column 列组件

• 基本使用

  

  @entry
  @component
  struct columnpage {
    build() {
      column() {
        text('这是header')
          .backgroundcolor('red')
          .width(100)
          .height(100)
        text('这是main')
          .backgroundcolor('green')
          .width(100)
          .height(100)
        text('这是footer')
          .backgroundcolor('blue')
          .width(100)
          .height(100)
      }
    }
  }
  

• column接收参数，增加间距

  
  传递space参数，改变每个元素之间的间距：

  @entry
  @component
  struct columnpage {
    build() {
      column({ space: 20 }) {
        text('这是header')
          .backgroundcolor('red')
          .width(100)
          .height(100)
        text('这是main')
          .backgroundcolor('green')
          .width(100)
          .height(100)
        text('这是footer')
          .backgroundcolor('blue')
          .width(100)
          .height(100)
      }
    }
  }
  

• 写一个常见的水平垂直居中布局

  
  此处的.alignitems(horizontalalign.center)和.justifycontent(flexalign.center)可以理解为css中的flex布局。flex常用的属性都可以使用，更多使用可以查看官方文档。

  @entry
  @component
  struct columnpage {
    build() {
      column({ space: 20 }) {
        text('这是header')
          .backgroundcolor('red')
          .width(100)
          .height(100)
        text('这是main')
          .backgroundcolor(color.green)
          .width(100)
          .height(100)
        text('这是footer')
          .backgroundcolor(color.blue)
          .width(100)
          .height(100)
      }
      .width('100%')
      .height('100%')
      .alignitems(horizontalalign.center)
      // .alignitems(horizontalalign.start)
      // .alignitems(horizontalalign.end)
      .justifycontent(flexalign.center)
      // .justifycontent(flexalign.end)
      // .justifycontent(flexalign.spacebetween)
    }
  }
  

3.3 row 行组件

• 基本使用
  
  使用方法和column组件基本一致：

  @entry
  @component
  struct rowpage {
    build() {
      row({ space: 20 }) {
        text('这是header')
          .backgroundcolor('red')
          .width(80)
          .height(100)
        text('这是main')
          .backgroundcolor(color.green)
          .width(80)
          .height(100)
        text('这是footer')
          .backgroundcolor(color.blue)
          .width(80)
          .height(100)
      }
      .width('100%')
      .height('100%')
    }
  }
  

• 写一个常见的布局样式
  
  flex布局常见的属性在row组件中同样适用：

  @entry
  @component
  struct rowpage {
    build() {
      row({ space: 20 }) {
        text('这是header')
          .backgroundcolor('red')
          .width(80)
          .height(100)
        text('这是main')
          .backgroundcolor(color.green)
          .width(80)
          .height(100)
        text('这是footer')
          .backgroundcolor(color.blue)
          .width(80)
          .height(100)
      }
      .width('100%')
      .height('100%')
      .alignitems(verticalalign.center)
      .justifycontent(flexalign.center)
    }
  }
  

3.4 flex 以弹性方式容器组件

• 基本使用
  
  column是一列多行展示，通过flex组件将其一行展示：

  @entry
  @component
  struct flexpage {
    build() {
      flex() {
        column() {
          text('这是header')
            .backgroundcolor('red')
            .width(80)
            .height(100)
        }
        column() {
          text('这是main')
            .backgroundcolor(color.green)
            .width(80)
            .height(100)
        }
        column() {
          text('这是footer')
            .backgroundcolor(color.blue)
            .width(80)
            .height(100)
        }
      }
      .width('100%')
      .height('100%')
    }
  }
  

• 写一个常见的布局样式（水平垂直居中）

  
  通过flex组件参数，设置样式：

  @entry
  @component
  struct flexpage {
    build() {
      flex({ direction: flexdirection.row, alignitems: itemalign.center, justifycontent: flexalign.center}) {
        column() {
          text('这是header')
            .backgroundcolor('red')
            .width(80)
            .height(100)
        }
        column() {
          text('这是main')
            .backgroundcolor(color.green)
            .width(80)
            .height(100)
        }
        column() {
          text('这是footer')
            .backgroundcolor(color.blue)
            .width(80)
            .height(100)
        }
      }
      .width('100%')
      .height('100%')
    }
  }
  

3.5 grid 网格布局组件

注意：grid组件内部只能使用griditem组件
grid组件和css中的display：grid；属性原理基本是一致的。前端同学可以按css中的grid布局来理解这个grid组件。

• 基本使用

  
  columnstemplate 写几个参数表示有几列 此处表示有两列：
  fr 表示份数，此处表示将宽度等分成3份，第一列占 1/3，第二列占 2/3：
  rowstemplate 写几个参数就有几行 此处表示有四行：
  fr 表示份数，此处表示将高度等分成5分，第二行占 2/5，其他行各占 1/5：

  @entry
  @component
  struct gridpage {
    build() {
      grid() {
        griditem() {
          text('1')
        }.backgroundcolor(color.red)
        griditem() {
          text('2')
        }.backgroundcolor(color.blue)
        griditem() {
          text('3')
        }.backgroundcolor(color.gray)
        griditem() {
          text('4')
        }.backgroundcolor(color.green)
        griditem() {
          text('5')
        }.backgroundcolor(color.orange)
        griditem() {
          text('6')
        }.backgroundcolor(color.pink)
        griditem() {
          text('7')
        }.backgroundcolor(color.yellow)
        griditem() {
          text('8')
        }.backgroundcolor(color.grey)
      }
      .width('100%')
      .height(500)
      // columnstemplate 写几个参数表示有几列 此处表示有两列
      // fr 表示份数，此处表示将宽度等分成3份，第一列占 1/3，第二列占 2/3
      .columnstemplate('1fr 2fr')
      // rowstemplate 写几个参数就有几行 此处表示有四行
      // fr 表示份数，此处表示将高度等分成5分，第二行占 2/5，其他行各占 1/5
      .rowstemplate('1fr 2fr 1fr 1fr')
      // 列和列之间的间距
      .columnsgap(5)
      // 行和行之间的间距
      .rowsgap(5)
    }
  }
  

• 写一个常见的布局样式
  合并行或者合并列：

  
  .columnstart(1).columnend(2) 表示第一列和第二列盒子合并，第三列会被挤到下一行去:
  .rowstart(1).rowend(2) 表示当前行和下一行合并:

  @entry
  @component
  struct gridpage {
    build() {
      grid() {
        griditem() {
          text('1')
        //   .columnstart(1).columnend(2) 表示第一列和第二列盒子合并，第三列会被挤到下一行去
        }.backgroundcolor(color.red).columnstart(1).columnend(2)
        griditem() {
          text('2')
        }.backgroundcolor(color.blue)
        griditem() {
          text('3')
        }.backgroundcolor(color.gray)
        griditem() {
          text('4')
          //   .rowstart(1).rowend(2) 表示当前行和下一行合并
        }.backgroundcolor(color.green).rowstart(1).rowend(2)
        griditem() {
          text('5')
        }.backgroundcolor(color.orange)
        griditem() {
          text('6')
        }.backgroundcolor(color.pink)
        griditem() {
          text('7')
        }.backgroundcolor(color.yellow)
        griditem() {
          text('8')
        }.backgroundcolor(color.grey)
      }
      .width('100%')
      .height('100%')
      // columnstemplate 写几个参数表示有几列 此处表示有两列
      // fr 表示份数，此处表示将宽度等分成3份，第一列占 1/3，第二列占 2/3
      .columnstemplate('1fr 2fr 1fr')
      // rowstemplate 写几个参数就有几行 此处表示有四行
      // fr 表示份数，此处表示将高度等分成5分，第二行占 2/5，其他行各占 1/5
      .rowstemplate('1fr 2fr 1fr 1fr')
      // 列和列之间的间距
      .columnsgap(5)
      // 行和行之间的间距
      .rowsgap(5)
    }
  }
  

3.6 button 按钮组件

• 基础用法

  
  也可以这么使用：button(‘登陆’)：

  @entry
  @component
  struct buttonpage {
    build() {
      button() {
        text('登陆')
      }
      .height(100)
      .width(200)
    }
  }
  

• 事件绑定（支持通用事件）

  
  必须使用箭头函数，this指向问题：
  接收一个参数，事件对象:

  @entry
  @component
  struct buttonpage {
    @state message: string = '我被点击了'
    build() {
      button() {
        text('登陆')
      }
      .height(100)
      .width(200)
      .onclick(() => {
        // 必须使用箭头函数，this指向问题
        console.log(this.message)
      })
    }
  }
  

  还有很多的按钮样式属性，可以查看官方文档

  

3.7 textinput 输入框组件

• 基本使用

  

  @entry
  @component
  struct textinputpage {
    build() {
      row() {
        textinput().backgroundcolor(color.white)
      }
      .height('100%')
      .width('100%')
      .backgroundcolor(color.yellow)
      .padding(10)
    }
  }
  

• 增加placeholder

  

  @entry
  @component
  struct textinputpage {
    build() {
      row() {
        textinput({ placeholder: '请输入用户名'})
          .backgroundcolor(color.white)
      }
      .height('100%')
      .width('100%')
      .backgroundcolor(color.yellow)
      .padding(10)
    }
  }
  

• 增加默认值
  

  @entry
  @component
  struct textinputpage {
    build() {
      row() {
        textinput({ placeholder: '请输入用户名', text: 'admin'})
          .backgroundcolor(color.white)
      }
      .height('100%')
      .width('100%')
      .backgroundcolor(color.yellow)
      .padding(10)
    }
  }
  

• 写一个基本的登陆功能
  
  演示了基本的数据声明/数据绑定/事件绑定等：

  @entry
  @component
  struct textinputpage {
    @state username: string = ''
    @state password: string = ''
    build() {
      column({space: 30}) {
        row() {
          textinput({ placeholder: '请输入用户名', text: 'admin'})
            .backgroundcolor(color.white)
            .onchange(value => {
              this.username = value
            })
        }
        row() {
          textinput({ placeholder: '请输入密码'})
            .backgroundcolor(color.white)
            .type(inputtype.password)
            .onchange(value => {
              this.password = value
            })
        }
        row() {
          button() {
            text('登陆')
          }
          .width(100)
          .height(40)
          .onclick(() => {
              console.log(this.username)
              console.log(this.password)
          })
        }
      }
      .height('100%')
      .width('100%')
      .backgroundcolor(color.grey)
      .padding(10)
    }
  }
  

  点击登录的时候数据已经是响应式的了：

  

• 模拟登陆校验
  
  展示了事件的声明及调用，以及一些组合的用法：

  @entry
  @component
  struct textinputpage {
    @state username: string = ''
    @state password: string = ''
    validate() {
      return !this.username || !this.password ? true : false
    }
    build() {
      column({space: 30}) {
        row() {
          textinput({ placeholder: '请输入用户名', text: 'admin'})
            .backgroundcolor(color.white)
            .onchange(value => {
              this.username = value
            })
        }
        row() {
          textinput({ placeholder: '请输入密码'})
            .backgroundcolor(color.white)
            .type(inputtype.password)
            .onchange(value => {
              this.password = value
            })
        }
        row() {
          button() {
            text('登陆')
          }
          .width(100)
          .height(40)
          .enabled(this.validate())
          .onclick(() => {
            if(this.username === 'admin' && this.password === 'admin123') {
              alertdialog.show({
                message:"登录成功啦"
              })
            } else {
              alertdialog.show({
                message:"登录失败啦"
              })
            }
          })
        }
      }
      .height('100%')
      .width('100%')
      .backgroundcolor(color.grey)
      .padding(10)
    }
  }
  

3.8 image 图片组件

3.8.1 网络图片

• 编译器预览：这种方式图片可以正常显示
• 模拟器/真机：这种方式图片不能正常加载，需要在 module.json5 文件中配置网络访问权限
  

权限分为系统权限及网络权限，此处我们需要配置的是网络权限：

"requestpermissions": [
   {
     "name": "ohos.permission.internet"
   }
],

代码：

@entry
@component
struct imagepage {
  build() {
    column() {
      // 1. 网址
      // 预览：这种方式图片可以正常显示
      // 模拟器/真机：这种方式图片不能正常加载，需要在 module.json5 文件中配置网络访问权限
      // "requestpermissions": [
      // {
      //   "name": "ohos.permission.internet"
      // }
      // ],
      image('https://image.diyiyou.com/game/202109/01/1630475933_8.jpg')
        .height(100)

      // 2.resources/base/media 文件夹下面的资源
      // image($r('app.media.icon'))
      //   .height(100)

      // 3.resources/rawfile 文件夹下面的资源
      // image($rawfile('icon.png'))
      //   .height(150)

      // 4.自建文件夹
      // image('/assets/images/icon.png')
      //   .height(200)
    }
      .width('100%')
      .height('100%')
  }
}

预览效果：

3.8.2 resources/base/media 文件夹下面的资源

资源所在位置：

代码：

@entry
@component
struct imagepage {
  build() {
    column() {
      // 1. 网址
      // 预览：这种方式图片可以正常显示
      // 模拟器/真机：这种方式图片不能正常加载，需要在 module.json5 文件中配置网络访问权限
      // "requestpermissions": [
      // {
      //   "name": "ohos.permission.internet"
      // }
      // ],
      // image('https://image.diyiyou.com/game/202109/01/1630475933_8.jpg')
      //   .height(100)

      // 2.resources/base/media 文件夹下面的资源
      image($r('app.media.icon'))
        .height(100)

      // 3.resources/rawfile 文件夹下面的资源
      // image($rawfile('icon.png'))
      //   .height(150)

      // 4.自建文件夹
      // image('/assets/images/icon.png')
      //   .height(200)
    }
      .width('100%')
      .height('100%')
  }
}

预览效果：

3.8.3 resources/rawfile 文件夹下面的资源

rawfile文件夹下默认没有文件，此处我们放一张图片进来：

代码：

@entry
@component
struct imagepage {
  build() {
    column() {
      // 1. 网址
      // 预览：这种方式图片可以正常显示
      // 模拟器/真机：这种方式图片不能正常加载，需要在 module.json5 文件中配置网络访问权限
      // "requestpermissions": [
      // {
      //   "name": "ohos.permission.internet"
      // }
      // ],
      // image('https://image.diyiyou.com/game/202109/01/1630475933_8.jpg')
      //   .height(100)

      // 2.resources/base/media 文件夹下面的资源
      // image($r('app.media.icon'))
      //   .height(100)

      // 3.resources/rawfile 文件夹下面的资源
      image($rawfile('icon.png'))
        .height(150)

      // 4.自建文件夹
      // image('/assets/images/icon.png')
      //   .height(200)
    }
      .width('100%')
      .height('100%')
  }
}

预览效果：

3.8.4 自建文件夹下面的资源

新建一个 assets/images 文件夹，放入一张图片：

代码：

@entry
@component
struct imagepage {
  build() {
    column() {
      // 1. 网址
      // 预览：这种方式图片可以正常显示
      // 模拟器/真机：这种方式图片不能正常加载，需要在 module.json5 文件中配置网络访问权限
      // "requestpermissions": [
      // {
      //   "name": "ohos.permission.internet"
      // }
      // ],
      // image('https://image.diyiyou.com/game/202109/01/1630475933_8.jpg')
      //   .height(100)

      // 2.resources/base/media 文件夹下面的资源
      // image($r('app.media.icon'))
      //   .height(100)

      // 3.resources/rawfile 文件夹下面的资源
      // image($rawfile('icon.png'))
      //   .height(150)

      // 4.自建文件夹
      image('/assets/images/icon.png')
        .height(200)
    }
      .width('100%')
      .height('100%')
  }
}

预览效果：

3.9 toggle 切换组件

• type: toggle 组件的类型
  • toggletype.checkbox
  • toggletype.switch
  • toggletype.button
• ison: 是否选中，默认 false
• selectedcolor：选中颜色
• onchange：切换事件
• switchpointcolor: 开关组件滑块的颜色

@entry
@component
struct togglepage {
  build() {
    column() {
      // 1.复选框
      toggle({type: toggletype.checkbox, ison: true})
        .selectedcolor(color.green)
        .onchange(() => {
          console.log('复选框切换了')
        })

      // 2.切换
      toggle({type: toggletype.switch, ison: true})
        .selectedcolor(color.red)
        .switchpointcolor(color.yellow)

      // 3.按钮 -- 必须有内容才能显示
      toggle({type: toggletype.button, ison: true}) {
        text('按钮')
      }
    }
      .width('100%')
      .height('100%')
  }
}

预览效果：

3.10 slider 滑块组件

@entry
@component
struct sliderpage {
  build() {
    column() {
      slider({
        // 默认滑块位置
        value: 10,
        // 最小值
        min: 0,
        // 最大值
        max: 100,
        // 每次滑动步长
        step: 3,
        // 设置滑块与滑轨显示样式。 默认值：sliderstyle.outset
        style: sliderstyle.inset,
        // 设置滑动条滑动方向为水平或竖直方向。默认值：axis.horizontal
        direction: axis.horizontal,
        // 设置滑动条取值范围是否反向，横向slider默认为从左往右滑动，竖向slider默认为从上往下滑动。默认值：false
        reverse: true
      })
    }
  }
}

预览效果：

3.11 progress 进度条组件

• value: 指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。
• total: 指定进度总长。默认值：100
• type: 指定进度条类型。默认linear
  • linear - 线性样式
  • ring - 环形无刻度样式
  • eclipse - 圆形样式
  • scalering - 环形无刻度样式
  • capsule - 胶囊型
• style: 指定进度条样式
  • strokewidth - 指定进度条宽度。
  • scalewidth - 指定每个宽度。
  • scalecount - 指定进度条个数。

@entry
@component
struct progresspage {
  build() {
    column() {
      progress({
        // 指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。
        value: 10,
        // 指定进度总长。默认值：100
        total: 100,
        // 指定进度条类型。默认linear
        // linear - 线性样式
        // ring - 环形无刻度样式
        // eclipse - 圆形样式
        // scalering - 环形无刻度样式
        // capsule - 胶囊型
        type: progresstype.scalering
      }).style({
        // 指定进度条宽度。
        strokewidth: 10,
        // 指定每个宽度。
        scalewidth: 5,
        // 指定进度条个数。
        scalecount: 20
      })
    }
      .width('100%')
      .height('100%')
      .padding(20)
  }
}

预览效果：

3.12 stack 堆叠组件

3.12.1 基本用法

@entry
@component
struct stackpage {
  build() {
    column() {
      stack() {
        row(){}
          .height(300)
          .width(300)
          .backgroundcolor(color.red)

        row(){}
          .height(200)
          .width(200)
          .backgroundcolor(color.yellow)

        row(){}
          .height(100)
          .width(100)
          .backgroundcolor(color.blue)
      }
    }
      .height('100%')
      .width('100%')
  }
}

预览效果：

• aligncontent : 设置子组件在容器内的对齐方式。默认值：alignment.center

@entry
@component
struct stackpage {
  build() {
    column() {
      // aligncontent - 设置子组件在容器内的对齐方式。默认值：alignment.center
      stack({aligncontent: alignment.topstart}) {
        row(){}
          .height(300)
          .width(300)
          .backgroundcolor(color.red)

        row(){}
          .height(200)
          .width(200)
          .backgroundcolor(color.yellow)

        row(){}
          .height(100)
          .width(100)
          .backgroundcolor(color.blue)
      }
    }
      .height('100%')
      .width('100%')
  }
}

预览效果：

3.13 blank 组件

• blank - 占据剩余空间

3.13.1 基本用法

@entry
@component
struct blankpage {
  build() {
    column() {
      row() {
        text('>')
        text('返回')
        // blank - 占据剩余空间
        blank().backgroundcolor(color.red)
      }
        .width('100%')
        .height(100)
        .backgroundcolor(color.gray)
    }
  }
}

预览效果：

3.14 divider 分割线组件

• strokewidth：分割线的宽度

@entry
@component
struct dividerpage {
  build() {
    column() {
      // 使用横向分割线场景
      list() {
        foreach([1, 2, 3, 4], (item) => {
          listitem() {
            text('list' + item).width('100%').fontcolor('#182431').textalign(textalign.start)
          }.width(244).height(50)
        }, item => item.tostring())
      }.padding({ left: 24, bottom: 10 })

      divider().strokewidth(3).color('#f40')
      list() {
        foreach([5, 6, 7], (item) => {
          listitem() {
            text('list' + item).width('100%').fontcolor('#182431').textalign(textalign.start)
          }.width(244).height(50)
        }, item => item.tostring())
      }.padding({ left: 24, top: 10 })

      // 使用纵向分割线场景
      column() {
        column() {
          row() {
            button('button')
              .fontcolor('#007dff')
              .backgroundcolor(color.transparent)
            divider().vertical(true).strokewidth(3).height(22).color('#f40')
            button('button')
              .fontcolor('#007dff')
              .backgroundcolor(color.transparent)
          }.margin({ top: 20 })
        }
        .width(300)
        .height(100)
        .backgroundcolor('#ffffff')
      }
      .width('100%')
      .height('60%')
      .backgroundcolor('#f1f3f5')
      .justifycontent(flexalign.center)
    }.width('100%')
  }
}

预览效果：

3.15 list 列表组件

3.15.1 listitem

@entry
@component
struct listpage {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

  build() {
    column() {
      list({ space: 20, initialindex: 0 }) {
        foreach(this.arr, (item) => {
          listitem() {
            text('' + item)
              .width('100%').height(100).fontsize(16)
              .textalign(textalign.center).borderradius(10).backgroundcolor(0xffffff)
          }
        }, item => item)
      }
      .listdirection(axis.vertical) // 排列方向
      .divider({ strokewidth: 2, color: 0xffffff, startmargin: 20, endmargin: 20 }) // 每行之间的分界线
      .edgeeffect(edgeeffect.spring) // 滑动到边缘无效果
      .onscrollindex((firstindex: number, lastindex: number) => {
        console.info('first' + firstindex) // 可视页面第一条数据索引
        console.info('last' + lastindex)   // 可视页面最后一条数据索引
      })
      .width('95%')
    }
    .width('100%')
    .height('100%')
    .backgroundcolor(0xdcdcdc)
    .padding({ top: 10 })
  }
}

预览效果：

3.15.2 listitemgroup

@entry
@component
struct listpage {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

  // 构建函数，抽取公共逻辑
  // @builder - 装饰器 申明构建函数
  @builder headerbuild(title: string, item: number) {
    text(`${title}${item}`)
      .backgroundcolor(color.white)
  }

  build() {
    column() {
      // list({ space: 20, initialindex: 0 }) {
      //   foreach(this.arr, (item) => {
      //     listitem() {
      //       text('' + item)
      //         .width('100%').height(100).fontsize(16)
      //         .textalign(textalign.center).borderradius(10).backgroundcolor(0xffffff)
      //     }
      //   }, item => item)
      // }
      // .listdirection(axis.vertical) // 排列方向
      // .divider({ strokewidth: 2, color: 0xffffff, startmargin: 20, endmargin: 20 }) // 每行之间的分界线
      // .edgeeffect(edgeeffect.spring) // 滑动到边缘无效果
      // .onscrollindex((firstindex: number, lastindex: number) => {
      //   console.info('first' + firstindex) // 可视页面第一条数据索引
      //   console.info('last' + lastindex)   // 可视页面最后一条数据索引
      // })
      // .width('95%')

      list({ space: 20, initialindex: 0 }) {
        foreach(this.arr, (item) => {
          // 传递参数给抽取的函数
          listitemgroup({header: this.headerbuild('标题', item)}) {
            listitem() {
              text('' + item)
                .width('100%').height(100).fontsize(16)
                .textalign(textalign.center).borderradius(10).backgroundcolor(0xffffff)
            }
          }
        }, item => item)
      }
      .listdirection(axis.vertical) // 排列方向
      .divider({ strokewidth: 2, color: 0xffffff, startmargin: 20, endmargin: 20 }) // 每行之间的分界线
      .edgeeffect(edgeeffect.spring) // 滑动到边缘无效果
      .onscrollindex((firstindex: number, lastindex: number) => {
        console.info('first' + firstindex) // 可视页面第一条数据索引
        console.info('last' + lastindex)   // 可视页面最后一条数据索引
      })
      .width('95%')
    }
    .width('100%')
    .height('100%')
    .backgroundcolor(0xdcdcdc)
    .padding({ top: 10 })
  }
}

预览效果：

3.16 scroll 滚动组件

@entry
@component
struct scrollpage {
  build() {
    stack({aligncontent: alignment.bottomend}) {
      scroll() {
        column({space: 10}) {
          row(){
            text('1')
          }.width('100%').height(300).backgroundcolor(color.red)

          row(){
            text('2')
          }.width('100%').height(300).backgroundcolor(color.yellow)

          row(){
            text('3')
          }.width('100%').height(300).backgroundcolor(color.blue)
        }
      }

      button('返回顶部')
    }
    .height('100%')
    .width('100%')
  }
}

预览效果：

四、补充：在编辑器中查看组件文档

4.1 deveco studio编辑器内查看官方文档

鼠标悬停到组件上，在出来的弹窗中点击查询api参考:

在编辑器右侧可以看到文档的详细信息：