HarmonyOS鸿蒙学习笔记(22)@Builder实战

news2024/11/18 22:41:23

@Builder标签是一种更轻量的UI元素复用机制,下面通过一个简单的例子来具体说明:
比如如下布局效果:上面是一个轮播的Swiper,下面是一个Grid
在这里插入图片描述
布局代码如下:

build() {
    Navigation() {
      Scroll() {
        Column({ space: CommonConstants.COMMON_SPACE }) {
          //构建Swiper
          Swiper(this.swiperController) {
            ForEach(WindowViewModel.getSwiperImages(), (img: Resource, index?: number) => {
              Image(img).borderRadius($r('app.float.home_swiper_border_radius'))
            }, (img: Resource, index?: number) => index + JSON.stringify(img.id))
          }
          .margin({
            top: $r('app.float.home_swiper_margin')
          }).autoPlay(true)
          //构建Grid
          Grid() {
            ForEach(WindowViewModel.getFirstGridData(), (firstItem: ItemData, index?: number) => {
              GridItem() {
                Column() {
                  Image(firstItem.image)
                    .width($r('app.float.home_home_cell_size'))
                    .height($r('app.float.home_home_cell_size'))
                  Text(firstItem.title)
                    .fontSize($r('app.float.little_text_size'))
                    .margin({ top: $r('app.float.home_home_cell_margin') })
                }
              }
            }, (firstItem: ItemData, index?: number) => index + JSON.stringify(firstItem))
          }
          .columnsTemplate(CommonConstants.GRID_FOUR_COLUMNS)
          .rowsTemplate(CommonConstants.GRID_TWO_ROWS)
          .columnsGap($r('app.float.home_grid_columns_gap'))
          .rowsGap($r('app.float.home_grid_row_gap'))
          .padding({
            top: $r('app.float.home_grid_padding'),
            bottom: $r('app.float.home_grid_padding')
          })
          .height($r('app.float.home_grid_height'))
          .backgroundColor(Color.White)
          .borderRadius($r('app.float.background_border_radius'))
        }
      }
      .scrollBar(BarState.Off)
      .margin({
        left: $r('app.float.home_padding'),
        right: $r('app.float.home_padding')
      })
    }
    .title(this.NavigationTitle())
    .titleMode(NavigationTitleMode.Mini)
    .hideBackButton(true)
    .backgroundColor($r('app.color.background'))
  }

可以发现布局代码臃肿不易读,此时可以通过@Builder来讲上面的代码进行精简:修改后的布局,将上面的SwiperGrid分别使用@Builder组件剥离出两个方法buildSwiper和buildGrid显得更简洁易读:

 @Builder
  buildSwiper(){
    Swiper(this.swiperController) {
      ForEach(WindowViewModel.getSwiperImages(), (img: Resource, index?: number) => {
        Image(img).borderRadius($r('app.float.home_swiper_border_radius'))
      }, (img: Resource, index?: number) => index + JSON.stringify(img.id))
    }
    .margin({
      top: $r('app.float.home_swiper_margin')
    }).autoPlay(true)
  }

  @Builder
  buildGrid(){
    Grid() {
      ForEach(WindowViewModel.getFirstGridData(), (firstItem: ItemData, index?: number) => {
        GridItem() {
          Column() {
            Image(firstItem.image)
              .width($r('app.float.home_home_cell_size'))
              .height($r('app.float.home_home_cell_size'))
            Text(firstItem.title)
              .fontSize($r('app.float.little_text_size'))
              .margin({ top: $r('app.float.home_home_cell_margin') })
          }
        }
      }, (firstItem: ItemData, index?: number) => index + JSON.stringify(firstItem))
    }
    .columnsTemplate(CommonConstants.GRID_FOUR_COLUMNS)
    .rowsTemplate(CommonConstants.GRID_TWO_ROWS)
    .columnsGap($r('app.float.home_grid_columns_gap'))
    .rowsGap($r('app.float.home_grid_row_gap'))
    .padding({
      top: $r('app.float.home_grid_padding'),
      bottom: $r('app.float.home_grid_padding')
    })
    .height($r('app.float.home_grid_height'))
    .backgroundColor(Color.White)
    .borderRadius($r('app.float.background_border_radius'))
  }
  build() {
    Navigation() {
      Scroll() {
        Column({ space: CommonConstants.COMMON_SPACE }) {
          this.buildSwiper()
          this.buildGrid()
        }
      }
      .scrollBar(BarState.Off)
      .margin({
        left: $r('app.float.home_padding'),
        right: $r('app.float.home_padding')
      })
    }
    .title(this.NavigationTitle())
    .titleMode(NavigationTitleMode.Mini)
    .hideBackButton(true)
    .backgroundColor($r('app.color.background'))
  }

在这里插入图片描述

这里只是简单的介绍了其初级用法,更多复杂的用法参考官方文档

参考资料:
@Builder装饰器:自定义构建函数
源代码地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1406987.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

html+css浮动小练习

以下是代码&#xff1a; <!DOCTYPE html> <!-- 2024.1.23 --> <html lang"en"> <head><meta charset"UTF-8"><title>浮动布局练习</title><style>.leftfix{float: left;}.rightfix{float:right;}/* 问题…

Leetcode—24. 两两交换链表中的节点【中等】

2023每日刷题&#xff08;八十七&#xff09; Leetcode—24. 两两交换链表中的节点 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x),…

如何进行H.265视频播放器EasyPlayer.js的中性化设置?

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;可支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff0c;能支持WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#…

HTML 入门手册(二)

目录 HTML 入门手册(一) 10-表单 11-input标签 11.1文本框 (text) 11.2密码框 (password) 11.3单选按钮 (radio) 11.4复选框 (checkbox) 11.5普通按钮 11.6提交按钮 (submit) 11.7重置按钮 (reset) 11.8隐藏域 (hidden) 11.9文件上传 (file) 11.10数字输入 (numbe…

Power Apps 向Power Automate传一个数组参数

Power Apps传Power Automate数组参数 背景Power Apps传参方法画布开发我们现在power apps中设置一个集合**ArrCollect**准备一个按钮 Power Automate接收总结画布流 背景 我们通常会从Power Apps界面传递参数给Flow中&#xff0c;但是很多时候仅仅是一个字符串类型的已经不适用…

超融合系统疑难故障定位与解决实践 3 例(含信创技术栈)

当 IT 系统出现故障&#xff0c;问题定位往往是运维人员最头疼的环节。尤其是超融合系统&#xff0c;由于整体涉及的技术栈比较复杂&#xff0c;且有越来越多的用户基于信创环境进行部署&#xff0c;非常考验厂商和技术人员的专业能力&#xff1a;厂商研发和售后工程师不仅应能…

web安全学习笔记【07】——非http\https抓包

#知识点&#xff1a; 1、Web常规-系统&中间件&数据库&源码等 2、Web其他-前后端&软件&Docker&分配站等 3、Web拓展-CDN&WAF&OSS&反向&负载均衡等 ----------------------------------- 1、APP架构-封装&原生态&H5&flutter…

2024年了你还在用百度翻译?手把手教会你使用AI翻译!一键翻译网页和PDF文件!

一些结论 沉浸式翻译是一款免费的AI驱动的双语网页翻译扩展工具。 主要功能包括&#xff1a;一键网页翻译&#xff0c;PDF翻译&#xff0c;输入框翻译&#xff0c;鼠标悬停翻译等多种翻译场景。 目前核心功能均免费使用。 沉浸式翻译是什么&#xff1f; 沉浸式翻译是一款免费的…

低噪声放大器LNA 之 噪声系数

​ 一、噪声系数的定义 在定义噪声系数之前&#xff0c;先看一个放大器输入输出端信噪比&#xff08;信号功率与噪声功率之比&#xff0c;写作SNR&#xff09; 对比图&#xff1a; ​​从上图可用看出&#xff0c;从输入端到输出端&#xff0c;信号和噪声功率都得到了放大&…

5G网络变压器应用领域

5G网络变压器在多个应用领域发挥着重要作用。以下是一些主要的应用领域&#xff1a; 1. **通信基站&#xff1a;** 5G网络变压器在通信基站中扮演关键角色。它们用于转换电力&#xff0c;确保通信基站设备的正常运行。稳定的电力供应对于保障高速、高频率的5G通信至关重要。 …

计算机网络-以太网链路聚合简介

一、网络可靠性是什么&#xff1f; 网络的可靠性指当设备或者链路出现单点或者多点故障时保证网络服务不间断的能力。 实际工作中网络需要保证可靠性&#xff0c;实现冗余设计。会从三个层次实现&#xff1a; 链路冗余 单板冗余 整机设备冗余 网络的可靠性指当设备或者链路出现…

【操作系统】实验三 编译 Linux 内核

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…

《WebKit 技术内幕》学习之十二(1):安全机制

第12章 安全机制 安全机制对于浏览器和渲染引擎来说至关重要。一个不考虑安全机制的HTML5规范体系肯定不会受到广泛地使用&#xff0c;同时一个不安全的浏览器也不会得到广大用户的青睐。本章介绍的安全机制分成两个不同的部分&#xff0c;第一个部分是网页的安全&#xff0c;…

EVRPD-44U电机保护器参数设置您了解了么?

EVRPD-44U电机保护器是一款用于电动机保护的设备&#xff0c;其产品参数设置如下&#xff1a; 额定电流&#xff1a;EVRPD-44U电机保护器的额定电流为5-80A&#xff0c;可以根据实际负载电流进行选择。启动时间&#xff1a;电机保护器的启动时间可以通过设置菜单进行修改&…

动态规划解决马尔可夫决策过程

马尔可夫决策过程是强化学习中的基本问题模型之一&#xff0c;而解决马尔可夫决策过程的方法我们统称为强化学习算法。 动态规划&#xff08; dynamic programming, DP &#xff09;具体指的是在某些复杂问题中&#xff0c;将问题转化为若干个子问题&#xff0c;并在求解每个子…

实用VBA:17.大量word文件中的文本内容进行批量替换

1.需求场景 在工作中可能会遇到需要对大量word文件中的文字内容进行批量替换的情况。相比excel的批量处理&#xff0c;个人感觉word文档中由于包含大量样式信息&#xff0c;批处理时总感觉有顾虑。一者担心影响了文档的格式&#xff0c;误修改了文档的样式&#xff0c;那后果……

9.scala 伴生对象、伴生类、case class、case object

目录 概述伴生case 相关特性结束 概述 比较 case class vs class 1.toString equals hashcode 重写 2.不用 new 3.默认实现了序列化接口 case class vs case object 1.case class 修饰的类&#xff0c;必须要有参数列表 2.case object 修饰的对象&#xff0c;必须不能有参数列…

Redis(发布订阅、事务、redis整合springboot、集成 Spring Cache)

目录 一.redis的发布订阅 1、什么 是发布和订阅 2、Redis的发布和订阅 3、发布订阅的代码实现 二.Redis事务 1.事务简介 1、在事务执行之前 如果监听的key的值有变化就不能执行 2、在事务执行之前 如果监听的key的值没有变化就能执行 3、Exec之前就出现错误 4、Exec之…

多窗口大小和Ticker分组的Pandas滚动平均值

最近一个学弟在在进行数据分析时&#xff0c;经常需要计算不同时间窗口的滚动平均线。当数据是多维度的&#xff0c;比如包含多个股票或商品的每日价格时&#xff0c;我们可能需要为每个维度计算滚动平均线。然而&#xff0c;如果我们使用传统的groupby和apply方法&#xff0c;…

小红书商品笔记发布流程,如何避免盘营销

随着平台营销内容不断被管制&#xff0c;商品笔记慢慢出现在了人们的视野&#xff0c;这同时也意味着达人和品牌方们&#xff0c;可以名正言顺的在笔记内容中植入产品。商品链接的开通意味着&#xff0c;不管是达人还是品牌转化率都会进一步提升&#xff0c;今天来马文化传媒和…