ArkTS--学习笔记

入门：

声明式
组件化

案例1：垃圾箱

代码：

@Entry
@Component
struct DeleteButtonPage {
  build() {
    Column(){
      Button(){
        Image("pages/helloworld/delete/solution/images/ic_delete.png")
          .width(25)
          .height(25)
      }
      .width(50)
      .height(50)
      .backgroundColor(Color.Red)
    }
    .onClick(()=>{console.log("删除")})
  }
}

效果：

总结：

不会就模仿着写，我这里没加type类型，也可以按照老师的加上。

案例2：开关灯-组件化

关键代码：

import { SwitchButton } from '../practice/SwitchButton';
@Entry
@Component
struct HelloWorldPage {
    @State isOn: boolean = false;

    build() {
        Column({ space: 20 }) {
            if (this.isOn) {
                Image('pages/helloworld/custom/solution/images/img_light.png')
                    .height(300)
                    .width(300)
                    .borderRadius(20)
            } else {
                Image('pages/helloworld/custom/solution/images/img_dark.png')
                    .height(300)
                    .width(300)
                    .borderRadius(20)
            }
            Row({ space: 50 }) {
                SwitchButton({ color: Color.Red })
                    .onClick(() => {
                        this.isOn = false
                    })
                SwitchButton({ color: Color.Green })
                    .onClick(() => {
                        this.isOn = true;
                    })
            }
        }
        .height('100%')
        .width('100%')
        .justifyContent(FlexAlign.Center)
    }
}

// @Component
// struct SwitchButton {
//     color: Color = Color.Blue;
//
//     build() {
//         Button({ type: ButtonType.Circle }) {
//             Image('pages/helloworld/custom/solution/images/icon_switch.png')
//                 .width(30)
//                 .width(30)
//         }.width(50)
//         .height(50)
//         .backgroundColor(this.color)
//     }
// }

效果：