【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(中) 原创 精华

木棉花HOS
发布于 2021-12-8 22:46
浏览
4收藏

【本文正在参与优质创作者激励】

前言

【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(上)

效果图

欢迎页面 线性渐变 角度添加了渐变 径向渐变
【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(中)-鸿蒙开发者社区 【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(中)-鸿蒙开发者社区 【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(中)-鸿蒙开发者社区 【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(中)-鸿蒙开发者社区

代码文件结构

【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(中)-鸿蒙开发者社区

正文

一、线性渐变LinearGradient

1. 添加颜色盘组件

从效果图可以看出颜色盘的样式是一致的,因此我们可以使用装饰器@Component自定义颜色盘。在颜色盘中RGB的三个滑动条的样式也是一致的,所以同样也可以使用装饰器@Component自定义RGB颜色滑动条。
setcolorPlate.ets

@Component
struct setSlider{
  @State inSetValue: number = 128
  @Link str: string
  private text: string
  private color: string

  sexadecimal(number){//返回十六进制的字符串
    let num1 = Math.floor(number / 16)
    let num2 = Math.ceil(number - num1 * 16)

    return this.takeCharacter(num1) + this.takeCharacter(num2)
  }

  takeCharacter(number){//十进制转十六进制的函数
    if(number < 10){
      return number.toString()
    }else if(number == 10){
      return 'A'
    }else if(number == 11){
      return 'B'
    }else if(number == 12){
      return 'C'
    }else if(number == 13){
      return 'D'
    }else if(number == 14){
      return 'E'
    }else{
      return 'F'
    }
  }

  build(){
    Row(){
      Text(this.text + ':')
        .width('8%')
        .fontSize(22)
        .fontColor(this.color)

      Slider({
        value: this.inSetValue,//当前进度条
        min: 0,//设置最小值
        max: 255,//设置最大值
        step: 1,//设置Slider滑动跳动值,当设置相应的step时,Slider为间歇滑动。
        style: SliderStyle.OutSet//设置Slider的滑块样式,SliderStyle.OutSet表示滑块在滑轨上,SliderStyle.InSet表示滑块在滑轨内
      })
        .width('80%')
        .blockColor(0xCCCCCC)//设置滑块的颜色
        .trackColor(Color.Black)//设置滑轨的背景颜色
        .selectedColor(this.color)//设置滑轨的已滑动颜色
        .showSteps(false)//设置当前是否显示步长刻度值
        .showTips(false)//设置滑动时是否显示气泡提示百分比
        .onChange((value: number) => {//Slider滑动时触发事件回调
          this.inSetValue = value//value:当前进度值
          this.str = this.sexadecimal(value)
        })

      Text(this.inSetValue.toFixed(0))
        .width('12%')
        .fontSize(22)
        .fontColor(this.color)
    }
  }
}
Badge

Badge:新事件标记组件,在组件上提供事件信息展示能力
参数

  1. 根据数值创建提醒组件
  • 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
  1. 根据字符串创建提醒组件
  • 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
export struct setcolorPlate{
  private str: number = 1
  @Link inSetValue: number
  @State strR: string = '80'
  @State strG: string = '80'
  @State strB: string = '80'
  @Link strColor: string

  aboutToAppear(){
    setInterval(() => {//返回RGB颜色
      this.strColor = '#' + this.strR + this.strG + this.strB
    }, 200)
  }

  build(){
    Column(){
      Badge({
        value: '',
        style: { badgeSize: 20, badgeColor: '#' + this.strR + this.strG + this.strB }
      }){
        Text('颜色' + this.str + ':#' + this.strR + this.strG + this.strB)
          .fontSize(30)
          .fontColor('#' + this.strR + this.strG + this.strB)
      }
      .width(280)
      .height(50)

      setSlider({ str:$strR, text:'R', color:'#FF0000' })
      setSlider({ str:$strG, text:'G', color:'#00FF00' })
      setSlider({ str:$strB, text:'B', color:'#0000FF' })
      Row(){
        Slider({//颜色断点位置的滑动条
          value: this.inSetValue * 100,
          min: 0,
          max: 100,
          step: 1,
          style: SliderStyle.OutSet
        })
          .width('80%')
          .blockColor(0xCCCCCC)
          .trackColor(Color.Black)
          .selectedColor(this.strColor)
          .showSteps(false)
          .showTips(false)
          .onChange((value: number) => {
            this.inSetValue = parseFloat(value == 0 ? '0' : value == 100 ? '1' : '0.' + value)
          })

        Text(this.inSetValue.toString())
          .width('14%')
          .fontSize(24)
          .fontColor(this.strColor)
      }
    }
  }
}

同时注意到在三种颜色渐变的模式中,还需要方向、位置、半径等的滑动条,由于不是所有渐变模式中都有的,所以需要另外使用装饰器@Component自定义滑动条。
setcolorPlate.ets

@Component
export struct setSliderPoint{
  private str: string
  private max: number
  @Link number: number

  build(){
    Row(){
      Text(this.str + ':')
        .width('18%')
        .fontSize(22)
        .fontColor('#A168FE')

      Slider({
        value: this.number,
        min: 0,
        max: this.max,//不同渐变模式下需要的滑动条最大值不一致,所以需要设为变量
        step: 1,
        style: SliderStyle.OutSet
      })
        .width('70%')
        .blockColor(0xCCCCCC)
        .trackColor(Color.Black)
        .selectedColor('#A168FE')
        .showSteps(false)
        .showTips(false)
        .onChange((value: number) => {
          this.number = value
        })

      Text(this.number.toFixed(0))
        .width('12%')
        .fontSize(22)
        .fontColor('#A168FE')
    }
  }
}

2. 添加返回主页按钮组件

通过Navigator容器组件为按钮Button添加路由功能。
setreturnButton.ets

//import router from '@system.router';

@Component
export struct setreturnButton{
  @State active: boolean = false

  build(){
    Navigator({ target: '', type: NavigationType.Back }){//target:指定跳转目标页面的路径,NavigationType.Back:返回上一页面或指定的页面
      Button({ type: ButtonType.Normal, stateEffect: true }){
        setText({ str:'返回主页' })
      }
      .width(160)
      .height(60)
      .borderRadius(10)
      .borderColor('#A168FE')
      .borderWidth(2)
      .backgroundColor('#DEB0DF')
      .margin(10)
      .onClick(() => {
        this.active = true
      })
    }
    .active(this.active)//当前路由组件是否处于激活状态,处于激活状态时,会生效相应的路由操作
  }
}

/*@Component
export struct setreturnButton{
  build(){
    Button({ type: ButtonType.Normal, stateEffect: true }){
      setText({ str:'返回主页' })
    }
    .width(160)
    .height(60)
    .borderRadius(10)
    .borderColor('#A168FE')
    .borderWidth(2)
    .backgroundColor('#DEB0DF')
    .margin(10)
    .onClick(() => {
      router.back()
    })
  }
}*/

注意到在线性渐变中有两个按钮,按钮中除了文本不一致之外,其他样式都一样,所以使用装饰器@Component自定义文本。
setreturnButton.ets

@Component
export struct setText{
  private str: string

  build(){
    Text(this.str)
      .fontFamily('方正舒体')
      .fontSize(32)
      .fontWeight(800)
      .fontColor('#FDEB82')
  }
}

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

import { setreturnButton, setText } from '../util/setreturnButton.ets';
import { setcolorPlate, setSliderPoint } from '../util/setcolorPlate.ets'

@Entry
@Component
struct LinearGradient {
  private swiperController: SwiperController = new SwiperController()
  @State Color1:string = '#808080'
  @State Point1:number = 0.1
  @State Color2:string = '#808080'
  @State Point2:number = 0.4
  @State Color3:string = '#808080'
  @State Point3:number = 0.8
  @State Angle:number = 180

  build() {
    Column() {
      setreturnButton()

      Swiper(this.swiperController) {
        setcolorPlate({ strColor:$Color1, str:'一', inSetValue:$Point1 })
        setcolorPlate({ strColor:$Color2, str:'二', inSetValue:$Point2 })
        setcolorPlate({ strColor:$Color3, str:'三', inSetValue:$Point3 })
      }
      .width('100%')
      .height(250)
      .borderRadius(10)
      .borderColor('#A168FE')
      .borderWidth(2)
      .index(1)
      .autoPlay(false)
      .indicator(true)
      .loop(false)

      setSliderPoint({ str:'Angle', max:359, number:$Angle })

      Flex(){}
      .width('90%')
      .height(300)
      .margin(10)
      .linearGradient({
        angle: this.Angle,
        colors: [[this.Color1, this.Point1], [this.Color2, this.Point2], [this.Color3, this.Point3]]
      })
    }
    .width('100%')
    .height('100%')
  }
}

最后使用装饰器@Component自定义翻页按钮组件。
LinearGradient.ets

import { setreturnButton, setText } from '../util/setreturnButton.ets';
import { setcolorPlate, setSliderPoint } from '../util/setcolorPlate.ets'

@Entry
@Component
struct LinearGradient {
  private swiperController: SwiperController = new SwiperController()
  @State Color1:string = '#808080'
  @State Point1:number = 0.1
  @State Color2:string = '#808080'
  @State Point2:number = 0.4
  @State Color3:string = '#808080'
  @State Point3:number = 0.8
  @State Angle:number = 180

  build() {
    Column() {
      setreturnButton()

      Swiper(this.swiperController) {
        setcolorPlate({ strColor:$Color1, str:'一', inSetValue:$Point1 })
        setcolorPlate({ strColor:$Color2, str:'二', inSetValue:$Point2 })
        setcolorPlate({ strColor:$Color3, str:'三', inSetValue:$Point3 })
      }
      .width('100%')
      .height(250)
      .borderRadius(10)
      .borderColor('#A168FE')
      .borderWidth(2)
      .index(1)
      .autoPlay(false)
      .indicator(true)
      .loop(false)

      Row(){
        setSliderButton({ str:'上一个颜色', swiperController:this.swiperController })
        setSliderButton({ str:'下一个颜色', swiperController:this.swiperController })
      }

      setSliderPoint({ str:'Angle', max:359, number:$Angle })

      Flex(){}
      .width('90%')
      .height(300)
      .margin(10)
      .linearGradient({
        angle: this.Angle,
        colors: [[this.Color1, this.Point1], [this.Color2, this.Point2], [this.Color3, this.Point3]]
      })
    }
    .width('100%')
    .height('100%')
  }
}

@Component
struct setSliderButton{
  private str: string
  private swiperController: SwiperController

  build(){
    Button({ type: ButtonType.Normal, stateEffect: true }){
      setText({ str:this.str })
    }
    .width(160)
    .height(60)
    .borderRadius(10)
    .borderColor('#A168FE')
    .borderWidth(2)
    .backgroundColor('#DEB0DF')
    .margin(10)
    .onClick(() => {
      if(this.str == '上一个颜色'){
        this.swiperController.showPrevious()//翻至上一页
      }else{
        this.swiperController.showNext()//翻至下一页
      }
    })
  }
}

后续

【木棉花】基于ArkUI的渐变色盘——容器组件的学习分享(下)

写在最后

更多资料请关注我们的项目 : Awesome-Harmony_木棉花
本项目会长期更新 ,希望随着鸿蒙一同成长变强的既有我们,也有正在看着这个项目的你。明年3月,深大校园内的木棉花会盛开,那时,鸿蒙也会变的更好,愿这花开,有你我的一份。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
GradientRamp.zip 1.38M 9次下载
已于2021-12-8 22:46:43修改
4
收藏 4
回复
举报
回复
    相关推荐