HarmonyOS列表组件

List组件的使用

TypeScript 复制代码
import router from '@ohos.router'

@Entry
@Component
struct Index {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Row() {
      Column() {
        List({ space: 10 }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text(`${item}`)
                .width('100%')
                .height(100)
                .fontSize(20)
                .fontColor(Color.White)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0x007DFF)
                .onClick(() => {
                  if (item === 0) {
                    //跳转到GridPage页面
                    router.push({
                      url: 'pages/GridPage'
                    })
                  }
                })
            }
          }, item => item)
        }
        //strokeWidth: 分割线的线宽。
        //color: 分割线的颜色。
        //startMargin:分割线距离列表侧边起始端的距离。
        //endMargin: 分割线距离列表侧边结束端的距离。
        // .divider({
        //   strokeWidth: 1,
        //   color: Color.Gray,
        //   startMargin: 10,
        //   endMargin: 10
        // })
        //Vertical(默认值):子组件ListItem在List容器组件中呈纵向排列。
        //子组件ListItem在List容器组件中呈横向排列。
        .listDirection(Axis.Vertical)
      }
      .padding(12)
      .height('100%')
      .backgroundColor(0xF1F3F5)
    }
    .height('100%')
  }
}

List下用ForEach循环数据,列表子项用ListItem组件,组件中再设置布局。

divider属性设置列表分割线,listDirection属性设置列表是横向排列还是纵向排列(默认纵向)。

Grid组件的使用

TypeScript 复制代码
@Entry
@Component
struct GridPage {
  // 定义一个数组
  private arr: string[] = new Array(50)
    .fill('')
    .map((_, index) => `数据 ${index + 1}`);

  build() {
    Column() {
      Grid() {
        ForEach(this.arr, (item: string) => {
          GridItem() {
            Text(item)
              .fontSize(16)
              .fontColor(Color.White)
              .backgroundColor(0x007DFF)
              .width('100%')
              .height(80)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
          }
        }, item => item)
      }
      //指定当前网格布局中的列数(数字代表列的权重)
      .columnsTemplate('2fr 3fr 2fr 3fr')
      //设置当前网格布局中的行数(数字代表行的权重)
      // .rowsTemplate('1fr 1fr 2fr 1fr')
      //设置列之间的间距
      .columnsGap(10)
      //设置行之间的距离
      .rowsGap(10)
      .height('100%')
    }
    .width('100%')
    .padding(10)
  }
}

GridItem设置子项,Grid下使用columnsTemplate属性指定当前网格布局中的列数。

rowsTemplate属性设置行数,数字代表给每行或每列设置占比的权重。

columnsGap属性设置列之间的间距,rowsGap属性设置行之间的距离。

如果行和列数同时设置只会显示设置行列内的数据,其他数据不会显示,并且只能显示在一屏内,不支持滑动,所以一般行数和列数只设置一个。

新建页面记得在config.json文件下的pages中添加,不然不会跳转。我这里创建项目用的API8,API9添加文件稍微有点差异。用最新API9的话运行到API8的远程设备会报错,所以这里创建项目选择了API和SDK都用了8.

相关推荐
Devil枫3 小时前
鸿蒙深链落地实战:从安全解析到异常兜底的全链路设计
安全·华为·harmonyos
低调小一10 小时前
Android传统开发 vs Android Compose vs HarmonyOS ArkUI 对照表
android·华为·harmonyos
程序员江同学12 小时前
ovCompose + AI 开发跨三端的 Now in Kotlin App
android·kotlin·harmonyos
猛码Memmat14 小时前
华为HarmonyOS开发文档
华为·harmonyos
祥睿夫子14 小时前
ArkTS 未被深挖的核心点:静态多态限制、静态成员与单例实战
harmonyos
高心星16 小时前
HarmonyOS 5.0应用开发——V2装饰器@local的使用
harmonyos
HarmonyOS_SDK16 小时前
【FAQ】应用A如何使用应用B内的文件?
harmonyos
万少16 小时前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
流影ng16 小时前
【HarmonyOS】MVVM与三层架构
华为·架构·harmonyos