
【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(中) 原创 精华
【本文正在参与优质创作者激励】
前言
【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(上)
效果图
欢迎页面 | 线性渐变 | 角度添加了渐变 | 径向渐变 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
代码文件结构
正文
一、线性渐变LinearGradient
1. 添加颜色盘组件
从效果图可以看出颜色盘的样式是一致的,因此我们可以使用装饰器@Component自定义颜色盘。在颜色盘中RGB的三个滑动条的样式也是一致的,所以同样也可以使用装饰器@Component自定义RGB颜色滑动条。
setcolorPlate.ets:
Badge
Badge:新事件标记组件,在组件上提供事件信息展示能力
参数:
- 根据数值创建提醒组件
- count:必填,设置提醒消息数,参数类型为:number
- position:非必填,设置提示点显示位置
- BadgePosition.Right:圆点显示在右侧纵向居中
- BadgePosition.RightTop:圆点显示在右上角(默认)
- BadgePosition.Left:圆点显示在左侧纵向居中
- maxCount:非必填,最大消息数,超过最大消息时仅显示maxCount+,参数类型为number,即直接填数字,默认值为99
- style:非必填,Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸
- color:非必填,文本颜色,参数类型为Color,默认值为Color.White
- fontSize:非必填,文本大小,参数类型为number或string,默认值为10
- badgeSize:必填,badge的大小,参数类型为number或string
- badgeColor:非必填,badge的颜色,参数类型为Color,默认值为Color.Red
- 根据字符串创建提醒组件
- value:必填,提示内容的文本字符串,参数类型为:string
- position:非必填,设置提示点显示位置
- BadgePosition.Right:圆点显示在右侧纵向居中
- BadgePosition.RightTop:圆点显示在右上角(默认)
- BadgePosition.Left:圆点显示在左侧纵向居中
- style:非必填,Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸
- color:非必填,文本颜色,参数类型为Color,默认值为Color.White
- fontSize:非必填,文本大小,参数类型为number或string,默认值为10
- badgeSize:必填,badge的大小,参数类型为number或string
- badgeColor:非必填,badge的颜色,参数类型为Color,默认值为Color.Red
使用装饰器@Component自定义颜色盘。
setcolorPlate.ets:
同时注意到在三种颜色渐变的模式中,还需要方向、位置、半径等的滑动条,由于不是所有渐变模式中都有的,所以需要另外使用装饰器@Component自定义滑动条。
setcolorPlate.ets:
2. 添加返回主页按钮组件
通过Navigator容器组件为按钮Button添加路由功能。
setreturnButton.ets:
注意到在线性渐变中有两个按钮,按钮中除了文本不一致之外,其他样式都一样,所以使用装饰器@Component自定义文本。
setreturnButton.ets:
3. 添加线性渐变页面
Swiper
Swiper:滑动容器,提供切换子组件显示的能力
参数:
- controller:非必填,给组件绑定一个控制器,用来控制组件翻页,默认值为null,一般都直接不填的
对Swiper容器组件的控制器,可以将此对象绑定至Swiper组件,然后通过它控制翻页
- showNext():void:翻至下一页
- showPrevious():void: 翻至上一页
属性:
- index:设置当前在容器中显示的子组件的索引值,参数类型为number,默认值为0
- autoPlay:子组件是否自动播放,自动播放状态下,导航点不可操作,参数类型为boolean,默认值为false
- interval:使用自动播放时播放的时间间隔,单位为毫秒,参数类型为number,默认值为3000
- indicator:是否启用导航点指示器,参数类型为boolean,默认值为true
- loop:是否开启循环,参数类型为boolean,默认值为true
- duration:子组件切换的动画时长,单位为毫秒,参数类型为number,默认值为400
- vertical:是否为纵向滑动,参数类型为boolean,默认值为false
- itemSpace:设置子组件与子组件之间间隙,参数类型为Length,默认值为0
事件:
- onChange( index: number) => void:当前显示的组件索引变化时触发该事件
通过 “import {结构体名} from 路径名” 引入自定义组件。
LinearGradient.ets:
最后使用装饰器@Component自定义翻页按钮组件。
LinearGradient.ets:
后续
【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(下)
写在最后
更多资料请关注我们的项目 : Awesome-Harmony_木棉花
本项目会长期更新 ,希望随着鸿蒙一同成长变强的既有我们,也有正在看着这个项目的你。明年3月,深大校园内的木棉花会盛开,那时,鸿蒙也会变的更好,愿这花开,有你我的一份。
