【07】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Swiper轮播组件与样式结构重用

序言:

本文详细讲解了关于我们在页面上经常看到的轮播图在鸿蒙开发中如何用Swiper实现,介绍了Swiper的基本用法与属性,及如何面对大段的重复代码进行封装和重用(@Extend、@Styles、@Builder),使代码更加简洁易读。

笔者也是跟着B站黑马的课程一步步学习,学习的过程中添加部分自己的想法整理为笔记分享出来,如有代码错误或笔误,欢迎指正。

B站黑马的课程链接:鸿蒙课程介绍_哔哩哔哩_bilibili

往期笔记:

【01】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs基础语法与界面开发基础

【02】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-界面进阶与布局排布(附QQ登陆、得物、京东登陆综合案例+代码)

【03】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-更多布局(弹性/层叠)方式与界面开发综合(附飞狗卡片+B站卡片案例+实战开发支付宝界面+代码)

【04】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs进阶运算符+状态管理(附综合案例美团购物车)

【05】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-条件渲染+if/switch判断与for/while循环(附计数器、京东加购案例)
【06】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-综合案例·生肖抽奖卡具体实现(类似支付宝集五福)

目录

一.Swiper轮播组件

1.Swiper的基本用法

2.Swiper的常见属性

3.Swiper样式自定义

二.样式&结构重用

1.@Extend:扩展组件(样式、事件)

2.@Style:抽取通用属性、事件

3.@Builder:自定义构建函数(结构、样式、事件)


一.Swiper轮播组件

简介:

Swiper是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示。(图片、文字...)

1.Swiper的基本用法

1)语法结构:

    Swiper(){//1.轮播内容}//2.设置尺寸(内容会自动拉伸).width('100%').height(100)

2)使用案例:

  build() {Column(){//Swiper 轮播组件的基本使用Swiper(){//1.轮播内容Text('1').backgroundColor(Color.Orange)Text('2').backgroundColor(Color.Blue)Text('3').backgroundColor(Color.Gray)}//2.设置尺寸(内容会自动拉伸)//tips:给外层设置宽高,未来的子元素都会进行统一的拉伸.width('100%').height(100)Swiper(){//1.轮播内容Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}//2.设置尺寸(内容会自动拉伸)//tips:给外层设置宽高,未来的子元素都会进行统一的拉伸.width('100%').height(100)}}

2.Swiper的常见属性

1)Swiper的常见属性

属性方法

传值

作用

默认值

loop

boolean

是否开启循环

true

autoPlay

boolean

是否自动播放

false

interval

number

自动播放时间间隔(ms)

3000

vertical

boolean

纵向滑动轮播

false

...其他属性

见文档

2)需求

使用上述属性,将刚刚的轮播图调整为

①自动播放

②播放间隔:4s

③纵向滑动

      Swiper(){//1.轮播内容Text('1').backgroundColor(Color.Orange)Text('2').backgroundColor(Color.Blue)Text('3').backgroundColor(Color.Gray)}//2.设置尺寸(内容会自动拉伸)//tips:给外层设置宽高,未来的子元素都会进行统一的拉伸.width('100%').height(100).loop(true) //是否开启循环.autoPlay(true)  //是否自动播放.interval(4000)  //自动播放时间间隔-4s.vertical(true)  //纵向轮播

改为了纵向滑动→通常会在手机宣传页出现

3.Swiper样式自定义

1)使用案例:

      Swiper(){//1.轮播内容Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}//2.设置尺寸(内容会自动拉伸)//tips:给外层设置宽高,未来的子元素都会进行统一的拉伸.width('100%').height(100)//定制小圆点.indicator(Indicator.dot()  //小圆点.itemWidth(20)  //默认的宽.itemHeight(5)  //默认的高.color(Color.Gray)  //默认的颜色.selectedItemWidth(30)  //选中的宽.selectedItemHeight(5)  //选中的高.selectedColor(Color.White)  //选中的颜色)

tips:

aspectRatio(1)  //宽高比例为1
aspectRatio(2)  //宽高比例为2
//等比例缩放用于根据不同设备想要相同的视觉效果,保持图片的正常适配

二.样式&结构重用

1.@Extend:扩展组件(样式、事件)

1)原代码:

     Swiper(){//1.轮播内容Text('1').backgroundColor(Color.Orange).textAlign(TextAlign.Center).fontColor(Color.White).fontSize(30).onClick(()=>{AlertDialog.show({message:'我是轮播图1号'})})Text('2').backgroundColor(Color.Blue).textAlign(TextAlign.Center).fontColor(Color.White).fontSize(30).onClick(()=>{AlertDialog.show({message:'我是轮播图2号'})})Text('3').backgroundColor(Color.Gray).textAlign(TextAlign.Center).fontColor(Color.White).fontSize(30).onClick(()=>{AlertDialog.show({message:'我是轮播图3号'})})}//2.设置尺寸(内容会自动拉伸)//tips:给外层设置宽高,未来的子元素都会进行统一的拉伸.width('100%').height(100).loop(true).autoPlay(true).interval(4000)

2)组件重写的方法和图示

@Extend(Text)
function textExtend(color:ResourceColor,txt:string){.backgroundColor(color).textAlign(TextAlign.Center).fontColor(Color.White).fontSize(30).onClick(()=>{AlertDialog.show({message:txt})})
}

3)重写达成的效果:

①代码部分:

     Swiper(){//1.轮播内容Text('4').textExtend(Color.Red,'我是轮播图4号')Text('5').textExtend(Color.Yellow,'我是轮播图5号')Text('6').textExtend(Color.Pink,'我是轮播图6号')}//2.设置尺寸(内容会自动拉伸)//tips:给外层设置宽高,未来的子元素都会进行统一的拉伸.width('100%').height(100).loop(true).autoPlay(true).interval(4000)

②图示:

显而易见于上面啰嗦的代码,通过封装大段相同的代码,我们的代码会变得更加简洁高效

2.@Style:抽取通用属性、事件

1)原文件:

    Column(){Text(this.message).margin(50).width(100).height(100).backgroundColor(this.bgColor).onClick(()=>{this.bgColor=String(Color.Orange)})Button('按钮').margin(50).width(100).height(100).backgroundColor(this.bgColor).onClick(()=>{this.bgColor=String(Color.Orange)})Column(){}.margin(50).width(100).height(100).backgroundColor(this.bgColor).onClick(()=>{this.bgColor=String(Color.Orange)})}

2)组件重写的方法与图示

①带this的全局用不了,组件内定义就可以用

②例如onClick这种带逻辑的,也是看带不带this,带this的就放在组件内定义

③Styles不支持传参

④因为全局定义无法获取this,所以组件内定义要比全局更加常用

Column(){Text(this.message).commonStyles().setBg()Button('按钮').commonStyles().setBg()Column(){}.commonStyles().setBg()}

3.@Builder:自定义构建函数(结构、样式、事件)

1)原代码:

    Row(){Column(){Image($r('app.media.ic_reuse_01')).width('80%')Text('阿里拍卖')}.width('25%').onClick(()=>{AlertDialog.show({message:'点击了 阿里拍卖'})})Column(){Image($r('app.media.ic_reuse_02')).width('80%')Text('菜鸟')}.width('25%').onClick(()=>{AlertDialog.show({message:'点击了 菜鸟'})})Column(){Image($r('app.media.ic_reuse_03')).width('80%')Text('芭芭农场')}.width('25%').onClick(()=>{AlertDialog.show({message:'点击了 芭芭农场'})})Column(){Image($r('app.media.ic_reuse_04')).width('80%')Text('阿里药房')}.width('25%').onClick(()=>{AlertDialog.show({message:'点击了 阿里药房'})})}

2)组件重写的方法与图示

//全局 Builder
@Builder
function navItem(icon:ResourceStr,txt:string){Column({space:10}) {Image(icon).width('80%')Text(txt)}.width('25%').onClick(()=>{AlertDialog.show({message:'点击了'+txt})})
}@Entry
@Componentstruct Index {@State message: string = 'Hello World';build() {Row(){Row(){navItem($r('app.media.ic_reuse_01'),'阿里拍卖')navItem($r('app.media.ic_reuse_02'),'菜鸟')navItem($r('app.media.ic_reuse_03'),'芭芭农场')navItem($r('app.media.ic_reuse_04'),'阿里药房')}}}}

感谢阅读。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WPF项目中使用Caliburn.Micro框架实现日志和主题切换

目录 一、添加Caliburn.Micro框架 二、配置Serilog日志 三、实现主题切换 Caliburn.Micro是MVVM模式的轻量级WPF框架,简化了WPF中的不少用法。这个框架中所有的页面控制都是通过ViewModel去实现的。 以下内容是自己在进行项目实战的同时进行记录的,对于…

局域网广域网,IP地址和端口号,TCP/IP 4层协议,协议的封装和分用

前言 在古老的年代,如果我们要实现两台机器进行数据传输, A员工就得去B员工的办公电脑传数据(B休息,等A传完),这样就很浪费时间 所以能不能不去B的工位的同时,还能传数据。这时候网络通信就出来…

智能抠图怎么操作?4款不动手自动抠图的智能神器分享

对于资深的图片设计师们来说,抠图是他们必备的基础技能,没几下功夫就能在PS中操作完成。 然而对于小编这种修图小白来讲,拥有一款傻瓜式智能抠图免费软件,才是硬道理! 小到简单的图形文字、大到飞扬细碎的毛发&#…

贴片式TF卡(SD NAND)参考设计

【MK 方德】贴片 TF 卡参考设计 一、电路设计 1、 参考电路: R1~R5 (10K-100 kΩ)是上拉电阻,当 SD NAND 处于高阻抗模式时,保护 CMD 和 DAT 线免受总线浮动。 即使主机使用 SD NAND SD 模式下的 1 位模式,主机也应通过上拉电阻…

传奇微端黑屏不更新地图?传奇微端架设教程——GOM引擎

登录器和网站配置好后,我们进入游戏后会发现是黑屏的,更新不了地图和NPC这些,因为还没有做微端,会黑屏也是正常的。有些老G做了微端但是还是黑屏,就可能是你的微端架设出现了问题,可以参考以下教程。 gom引…

MQTT--快速入门

目录 1、什么是MQTT2、MQTT协议特性3、MQTT协议原理3.1 发布/订阅、主题、会话3.2 MQTT协议中的方法3.3 MQTT协议数据包结构 4、MQTT工作流程总结PS: 1、什么是MQTT MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议) &#…

学习之什么是生成器

什么是生成器(Generator) 1、是一种数据类型能源源不断地生成数据 2、"惰性"特点:一次生成一个值,而不是生成一个序列 3、生成器一定是迭代器比迭代器更简洁使用生成器表达式创建生成器 from typing import Generator, Iterator,…

Excel数据检视——对角线连续数据连线

实例需求:数据表如下图所示,现需要根据规则,在符合要求的单元格上,添加连线。 连续单元格位于对角线方向单元格内容相同连续单元格数量不少于7个 示例代码如下。 Sub LT2RB()Dim objDic As Object, rngData As Range, bFlag As …

fastapp-微信开发GPT项目第一课

0. 开发说明 在学习开发本项目之前,必须保证有以下知识储备和环境工具。 技术栈说明python>3.9、pydantic>2.7.1python基础,http协议fastapi>0.111.0web协程异步框架,有web开发基础,异步编程,类型标注[pyth…

【HTTP】请求“报头”(Host、Content-Length/Content-Type、User-Agent(简称 UA))

Host 表示服务器主机的地址和端口号 URL 里面不是已经有 Host 了吗,为什么还要写一次? 这里的 Host 和 URL 中的 IP 地址、端口什么的,绝大部分情况下是一样的,少数情况下可能不同当前我们经过某个代理进行转发。过程中&#xf…

【Qt | QList 】QList<T> 容器详细介绍和例子代码

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 ⏰发布时间⏰: 2024-09-26 …

国产化低功耗窄带物联网无线通讯方案_ZETA技术

01 物联网系统中为什么要使用ZETA LPWAN 模组 物联网系统中使用ZETA LPWAN模组的原因主要基于以下几个方面: 1、技术优势 低功耗广域网(LPWAN)特性:ZETA技术是一种基于UNB的低功耗广域网技术协议标准,具有覆盖范围广…

从 Kafka 到 WarpStream: 用 MinIO 简化数据流

虽然 Apache Kafka 长期以来一直是流数据的行业标准,但新的创新替代方案正在重塑生态系统。其中之一是 WarpStream,它最近在 Confluent 的所有权下进入了新的篇章。此次收购进一步增强了 WarpStream 提供高性能、云原生数据流的能力,巩固了其…

【IOS】申请开发者账号(公司)

官网:Apple Developer (简体中文) 申请开发者账号前提 如果是第一次申请建议注册一个新的apple id作为组织的开发者账号。(确保apple id的个人信息是真实的,不能是网名或者是其他名。后续的申请步骤需要能和apple id的个人信息对上。&#…

Navicat数据库管理工具实现Excel、CSV文件导入到MySQL数据库

1.所需要的工具和环境 navicat等第三方数据库管理工具云服务器中安装了 1Panel面板搭建的mysql数据库 2.基于 1Panel启动mysql容器 2.1 环境要求 安装前请确保您的系统符合安装条件: 操作系统:支持主流 Linux 发行版本(基于 Debian / Re…

“类型名称”在Go语言规范中的演变

Go语言规范(The Go Programming Language Specification)[1]是Go语言的核心文档,定义了该语言的语法、类型系统和运行时行为。Go语言规范的存在使得开发者在实现Go编译器时可以依赖一致的标准,它确保了语言的稳定性和一致性&#…

c++----继承(初阶)

大家好呀,今天我们也是多久没有更新博客了,今天来讲讲我们c加加中的一个比较重要的知识点继承。首先关于继承呢,大家从字面意思看,是不是像我们平常日常生活中很容易出现的,比如说电视剧里面什么富豪啊,去了…

万魔头戴式耳机好用吗?万魔、西圣、索尼头戴式耳机决赛圈测评

现在耳机市场已经有各种不同类型的耳机,对于有降噪需求的人来说,头戴式耳机是一个不错的选择。那么对于后台有人私信说想知道万魔头戴式耳机好用吗?为了解答这个疑问,今天我就为大家评测西圣H1、万魔SonoFlow和索尼WH-CH520这三款…

【C++篇】深度剖析C++ STL:玩转 list 容器,解锁高效编程的秘密武器

文章目录 C list 容器详解:从入门到精通前言第一章:C list 容器简介1.1 C STL 容器概述1.2 list 的特点 第二章:list 的构造方法2.1 常见构造函数2.1.1 示例:不同构造方法2.1.2 相关文档 第三章:list 迭代器的使用3.1 …

【Linux】Linux 的 权限

一、 Linux 权限的概念 Linux下有两种用户:超级用户(root)、普通用户。 超级用户:可以在 linux 系统下做任何事情,不受限制普通用户:在 linux 下做有限的事情。超级用户的命令提示符是“#”,普…