【HarmonyOs Arkts笔记】Arkts ForEach循环使用

news/2024/7/21 11:32:26 标签: 笔记, harmonyos

在这里插入图片描述

说明

ForEach循环数组对象时 要指定对象的唯一标识 例如 id,否则只会显示第一个

@State tabsList: object[] = [
    { name: '砍价活动', id: 1, icon: 'https://php-b2c.likeshop.cn/uploads/images/2022062414322367e6a5479.png' },
    { name: '拼团活动', id: 2, icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624143223798a31616.png' },
    { name: '限时秒杀', id: 3, icon: 'https://php-b2c.likeshop.cn/uploads/images/202206241432233bf9e9321.png' },
    { name: '热销榜单', id: 4, icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624143223839e33279.png' },
  ]
/*金刚区*/
      Grid() {
        ForEach(this.tabsList, (item: any) => {
          GridItem() {
            Column() {
              Image(item.icon)
                .width(30)
                .height(30)
              Text(item.name)
                .margin({ top: 10 })
                .fontSize(12)
            }
          }
          // 必须加上对象的唯一标识  例如 id
        }, item => item.id)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .backgroundColor(0xFAEEE0)
      .height(200)
      .borderRadius(10)
      .margin({ top: 10 })
      .padding(10)

http://www.niftyadmin.cn/n/5296920.html

相关文章

配置yum镜像源

文章目录 前言一、配置yum源1.清除本地配置2.挂载镜像3.新增本地源配置4.加载本地yum源&测试 总结 前言 在内网环境的时候,yum无法正常连接互联网安装软件,这时候我们可以挂载系统镜像文件来下载。 一、配置yum源 1.清除本地配置 cp -rf /etc/yum…

hyper-v用命令方式创建NAT网络

文章目录 NAT 概述创建 NAT 虚拟网络配置vm的ip地址 NAT 概述 NAT 使用主计算机的 IP 地址和端口通过内部 Hyper-V 虚拟网关向虚拟机授予对网络资源的访问权限。 网络地址转换 (NAT) 是一种网络模式,旨在通过将一个外部 IP 地址和端口映射到更大的内部 IP 地址集来…

Vue3 精通指南:如何在 setup 函数中巧妙利用 Vuex

在 Vue 3 中,如果你使用了组合式 API(Composition API),你可以通过 setup 函数来设置组件的响应式状态和逻辑。要在 setup 函数中访问 Vuex 的 $store,你可以使用 useStore 钩子,它是 Vuex 4 为 Vue 3 提供…

test mock-03-wiremock 模拟 HTTP 服务的开源工具 flexible and open source API mocking

拓展阅读 test 之 jmockit-01-overview jmockit-01-test 之 jmockit 入门使用案例 mockito-01-overview mockito 简介及入门使用 PowerMock Mock Server ChaosBlade-01-测试混沌工程平台整体介绍 jvm-sandbox 入门简介 wiremock WireMock是一个流行的开源工具&#xf…

如何使用 Bing Chat 简化产品设计

ChatGPT 受到如此多的关注,而我们却很少谈论 Bing Chat。Bing Chat 让您可以免费访问 GPT-4 模型,它还可以作为 Microsoft Edge 中的侧边栏使用,这使得可以使用此工具来分析上下文信息(例如特定网页)。本文分享了有关产…

软件测试/测试开发丨Linux 数据处理三剑客学习笔记

一、Linux 三剑客之 grep 1、 内容检索 获取行(单行) grep pattern file获取内容 grep -o pattern file获取上下文 grep -A -B -C pattern file 2、 文件检索 递归搜索 grep pattern -r dir/展示匹配文件名 grep -H 111 /tmp/1只展示匹配文件名 grep …

git教程——日常工作git使用流程

git教程——日常工作git使用流程 流程说明其他操作相关链接 流程说明 克隆远程仓库:使用git clone remote_url命令克隆远程仓库remote_url到本地,该命令会下载整个仓库到本地并创建一个远程仓库地址别名(通常是origin)。切换并创…

1.PHP简单入门

1.PHP代码执行方式 PHP是在服务器端执行,然后返回给用户结果。 如果直接使用浏览器打开,就会解析为文本。 意思是说,浏览器通过 http请求,才能够执行php页面。 2.PHP代码框架 开启本机服务器(下载软件略&#xff09…