鸿蒙开发——调色板（小保姆级教程）

一、开发工具

下载链接：下载中心 | 华为开发者联盟-HarmonyOS开发者官网，共建鸿蒙生态

使用华为最新发布的DevEco Studio NEXT Developer Beta1

二、编写ets脚本

官方文档参考：文档中心

新建项目后在entry中的pages下自带有一个Index.ets，在其中编程即可。虚拟器选择previewer即可。

三、具体代码

实现目标，是实现下方三个Slider可以在0—255内变化，对上方的方块进行RGB调色。

// xxx.ets
@Entry
@Component
struct Jor {
  @State a:number=0;
  @State b:number=0;
  @State c:number=0;
  build() {
    Column() {
      Rect()
        .width(60)
        .height(60)
        .fill(`rgb(${this.a},${this.b},${this.c})`)

      Row(){
      Slider({
          value:this.a,
          min:0,
          max:255,
      }).width(160)
        .onChange((value: number)=>{
          this.a=Math.round(value)
        })
      Button(){
        Text('-')
          .fontColor(Color.White)
          .fontSize(20)
          .padding({
            left:10,
            right:10
          })
      }
      .onClick(()=>{
        this.a-=1;
      })
      .type(ButtonType.Capsule)
      .margin({left:10})
      Text(this.a+'')
      Button(){
        Text('+')
          .fontColor(Color.White)
          .fontSize(20)
          .padding({
            left:10,
            right:10
          })
      }
      .onClick(()=>{
        this.a+=1;
      })
      .type(ButtonType.Capsule)
      }

     Row(){
       Slider({
         value:this.b,
         min:0,
         max:255,
       }).width(160)
         .onChange((value: number)=>{
           this.b=Math.round(value)
         })
       Button(){
         Text('-')
           .fontColor(Color.White)
           .fontSize(20)
           .padding({
             left:10,
             right:10
           })
       }
       .onClick(()=>{
         this.b-=1;
       })
       .type(ButtonType.Capsule)
       .margin({left:10})
       Text(this.b+'')
       Button(){
         Text('+')
           .fontColor(Color.White)
           .fontSize(20)
           .padding({
             left:10,
             right:10
           })
       }
       .onClick(()=>{
         this.b+=1;
       })
       .type(ButtonType.Capsule)
     }

      Row(){
        Slider({
          value:this.c,
          min:0,
          max:255,
        }).width(160)
          .onChange((value: number)=>{
            this.c=Math.round(value)
          })
        Button(){
          Text('-')
            .fontColor(Color.White)
            .fontSize(20)
            .padding({
              left:10,
              right:10
            })
        }
        .onClick(()=>{
          this.c-=1;
        })
        .type(ButtonType.Capsule)
        .margin({left:10})
        Text(this.c+'')
        Button(){
          Text('+')
            .fontColor(Color.White)
            .fontSize(20)
            .padding({
              left:10,
              right:10
            })
        }
        .onClick(()=>{
          this.c+=1;
        })
        .type(ButtonType.Capsule)
      }
    }.width('100%').margin({ top: 5 })
  }
}

调色板实现效果：