[[439849]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

前言

【木棉花】基于ArkUI的漸變色盤——容器組件的學(xué)習(xí)分享(上)

效果圖

歡迎頁面線性漸變角度添加了漸變徑向漸變

代碼文件結(jié)構(gòu)

正文

一、線性漸變LinearGradient

1. 添加顏色盤組件

從效果圖可以看出顏色盤的樣式是一致的，因此我們可以使用裝飾器@Component自定義顏色盤。在顏色盤中RGB的三個(gè)滑動(dòng)條的樣式也是一致的，所以同樣也可以使用裝飾器@Component自定義RGB顏色滑動(dòng)條。

@Component 
struct setSlider{ 
  @State inSetValue: number = 128 
  @Link str: string 
  private text: string 
  private color: string 
 
  sexadecimal(number){//返回十六進(jìn)制的字符串 
    let num1 = Math.floor(number / 16) 
    let num2 = Math.ceil(number - num1 * 16) 
 
    return this.takeCharacter(num1) + this.takeCharacter(num2) 
  } 
 
  takeCharacter(number){//十進(jìn)制轉(zhuǎn)十六進(jìn)制的函數(shù) 
    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,//當(dāng)前進(jìn)度條 
        min: 0,//設(shè)置最小值 
        max: 255,//設(shè)置最大值 
        step: 1,//設(shè)置Slider滑動(dòng)跳動(dòng)值，當(dāng)設(shè)置相應(yīng)的step時(shí)，Slider為間歇滑動(dòng)。 
        style: SliderStyle.OutSet//設(shè)置Slider的滑塊樣式，SliderStyle.OutSet表示滑塊在滑軌上，SliderStyle.InSet表示滑塊在滑軌內(nèi) 
      }) 
        .width('80%') 
        .blockColor(0xCCCCCC)//設(shè)置滑塊的顏色 
        .trackColor(Color.Black)//設(shè)置滑軌的背景顏色 
        .selectedColor(this.color)//設(shè)置滑軌的已滑動(dòng)顏色 
        .showSteps(false)//設(shè)置當(dāng)前是否顯示步長刻度值 
        .showTips(false)//設(shè)置滑動(dòng)時(shí)是否顯示氣泡提示百分比 
        .onChange((value: number) => {//Slider滑動(dòng)時(shí)觸發(fā)事件回調(diào) 
          this.inSetValue = value//value：當(dāng)前進(jìn)度值 
          this.str = this.sexadecimal(value) 
        }) 
 
      Text(this.inSetValue.toFixed(0)) 
        .width('12%') 
        .fontSize(22) 
        .fontColor(this.color) 
    } 
  } 
} 

Badge

Badge：新事件標(biāo)記組件，在組件上提供事件信息展示能力

參數(shù)：

根據(jù)數(shù)值創(chuàng)建提醒組件

count：必填，設(shè)置提醒消息數(shù)，參數(shù)類型為：number

position：非必填，設(shè)置提示點(diǎn)顯示位置

• BadgePosition.Right：圓點(diǎn)顯示在右側(cè)縱向居中
• BadgePosition.RightTop：圓點(diǎn)顯示在右上角(默認(rèn))
• BadgePosition.Left：圓點(diǎn)顯示在左側(cè)縱向居中

maxCount：非必填，最大消息數(shù)，超過最大消息時(shí)僅顯示maxCount+，參數(shù)類型為number，即直接填數(shù)字，默認(rèn)值為99

style：非必填，Badge組件可設(shè)置樣式，支持設(shè)置文本顏色、尺寸、圓點(diǎn)顏色和尺寸

• color：非必填，文本顏色，參數(shù)類型為Color，默認(rèn)值為Color.White
• fontSize：非必填，文本大小，參數(shù)類型為number或string，默認(rèn)值為10
• badgeSize：必填，badge的大小，參數(shù)類型為number或string
• badgeColor：非必填，badge的顏色，參數(shù)類型為Color，默認(rèn)值為Color.Red

根據(jù)字符串創(chuàng)建提醒組件

value：必填，提示內(nèi)容的文本字符串，參數(shù)類型為：string

position：非必填，設(shè)置提示點(diǎn)顯示位置

• BadgePosition.Right：圓點(diǎn)顯示在右側(cè)縱向居中
• BadgePosition.RightTop：圓點(diǎn)顯示在右上角(默認(rèn))
• BadgePosition.Left：圓點(diǎn)顯示在左側(cè)縱向居中

style：非必填，Badge組件可設(shè)置樣式，支持設(shè)置文本顏色、尺寸、圓點(diǎn)顏色和尺寸

• color：非必填，文本顏色，參數(shù)類型為Color，默認(rèn)值為Color.White
• fontSize：非必填，文本大小，參數(shù)類型為number或string，默認(rèn)值為10
• badgeSize：必填，badge的大小，參數(shù)類型為number或string
• badgeColor：非必填，badge的顏色，參數(shù)類型為Color，默認(rèn)值為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({//顏色斷點(diǎn)位置的滑動(dòng)條 
          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) 
      } 
    } 
  } 
} 

同時(shí)注意到在三種顏色漸變的模式中，還需要方向、位置、半徑等的滑動(dòng)條，由于不是所有漸變模式中都有的，所以需要另外使用裝飾器@Component自定義滑動(dòng)條。

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,//不同漸變模式下需要的滑動(dòng)條最大值不一致，所以需要設(shè)為變量 
        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：指定跳轉(zhuǎn)目標(biāo)頁面的路徑，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)//當(dāng)前路由組件是否處于激活狀態(tài)，處于激活狀態(tài)時(shí)，會(huì)生效相應(yīng)的路由操作 
  } 
} 
 
/*@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() 
    }) 
  } 
}*/ 

注意到在線性漸變中有兩個(gè)按鈕，按鈕中除了文本不一致之外，其他樣式都一樣，所以使用裝飾器@Component自定義文本。

setreturnButton.ets：

@Component 
export struct setText{ 
  private str: string 
 
  build(){ 
    Text(this.str) 
      .fontFamily('方正舒體') 
      .fontSize(32) 
      .fontWeight(800) 
      .fontColor('#FDEB82') 
  } 
} 

 3. 添加線性漸變頁面

Swiper

Swiper：滑動(dòng)容器，提供切換子組件顯示的能力

參數(shù)：

• controller：非必填，給組件綁定一個(gè)控制器，用來控制組件翻頁，默認(rèn)值為null，一般都直接不填的

對(duì)Swiper容器組件的控制器，可以將此對(duì)象綁定至Swiper組件，然后通過它控制翻頁

• showNext():void：翻至下一頁
• showPrevious():void： 翻至上一頁

屬性：

• index：設(shè)置當(dāng)前在容器中顯示的子組件的索引值，參數(shù)類型為number，默認(rèn)值為0
• autoPlay：子組件是否自動(dòng)播放，自動(dòng)播放狀態(tài)下，導(dǎo)航點(diǎn)不可操作，參數(shù)類型為boolean，默認(rèn)值為false
• interval：使用自動(dòng)播放時(shí)播放的時(shí)間間隔，單位為毫秒，參數(shù)類型為number，默認(rèn)值為3000
• indicator：是否啟用導(dǎo)航點(diǎn)指示器，參數(shù)類型為boolean，默認(rèn)值為true
• loop：是否開啟循環(huán)，參數(shù)類型為boolean，默認(rèn)值為true
• duration：子組件切換的動(dòng)畫時(shí)長，單位為毫秒，參數(shù)類型為number，默認(rèn)值為400
• vertical：是否為縱向滑動(dòng)，參數(shù)類型為boolean，默認(rèn)值為false
• itemSpace：設(shè)置子組件與子組件之間間隙，參數(shù)類型為Length，默認(rèn)值為0

事件：

• onChange( index: number) => void：當(dāng)前顯示的組件索引變化時(shí)觸發(fā)該事件

通過 “import {結(jié)構(gòu)體名} 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:'上一個(gè)顏色', swiperController:this.swiperController }) 
        setSliderButton({ str:'下一個(gè)顏色', 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 == '上一個(gè)顏色'){ 
        this.swiperController.showPrevious()//翻至上一頁 
      }else{ 
        this.swiperController.showNext()//翻至下一頁 
      } 
    }) 
  } 
} 

文章相關(guān)附件可以點(diǎn)擊下面的原文鏈接前往下載

https://harmonyos.51cto.com/resource/1573

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com