鸿蒙 OS 开发零基础快速入门教程

视频课程:

东西比较多, 这里主要分享一些代码和案例.

开关灯效果案例: 开灯

Column 和 Row 的基本用法

js 复制代码

@Entry
@Component
struct Index {
  @State message: string = '张三';

  build() {
    // 一行内容
    Row() {
      // 一列内容
      Column() {
        // 文本内容
        Text(this.message)
          .fontSize(50)// 字体大小
          .fontWeight(FontWeight.Bold) // 字体粗细
      }.width("100%")
    }.height('100%')
  }
}

一行两列的布局

js 复制代码

@Entry
@Component
struct Index {
  @State message: string = '张三';

  build() {
    // 一行内容
    Row() {
      // 一列内容
      Column() {
        // 文本内容
        Text(this.message)
          .fontSize(50)// 字体大小
          .fontWeight(FontWeight.Bold) // 字体粗细
      }.width("50%")

      // 一列内容
      Column() {
        // 文本内容
        Text(this.message)
          .fontSize(50)// 字体大小
          .fontWeight(FontWeight.Bold) // 字体粗细
      }.width("50%")
    }.height('100%')
  }
}

开关灯效果案例的基本实现

js 复制代码

@Entry
@Component
struct Index {
  @State isOn: boolean = false

  build() {
    Column({space: 10}) {
      if (this.isOn) {
        Image("pages/images/img_light.png")
          .width(300)
          .height(300)
      } else {
        Image("pages/images/img_dark.png")
          .width(300)
          .height(300)
      }


      Row({space: 30}) {
        Button("开灯").onClick(() => this.isOn = true)
        Button("关灯").onClick(() => this.isOn = false)
      }
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

图标按钮案例

js 复制代码

@Entry
@Component
struct Index {
  @State isOn: boolean = false

  build() {
    Column() {
      Button(){
        Image("pages/images/ic_delete.png")
          .width(25)
          .height(25)
      }
      .width(50)
      .height(50)
      .type(ButtonType.Circle)
      .backgroundColor(Color.Red)
      .onClick(()=>console.log("删除成功"))
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

自定义组件案例

js 复制代码

@Entry
@Component
struct Index {
  @State isOn: boolean = false

  build() {
    Column({ space: 10 }) {
      if (this.isOn) {
        Image("pages/images/img_light.png")
          .width(300)
          .height(300)
          .borderRadius(20)
      } else {
        Image("pages/images/img_dark.png")
          .width(300)
          .height(300)
          .borderRadius(20)
      }


      Row({ space: 30 }) {
        GreenButton()
          .onClick(() => this.isOn = true)

        RedButton()
          .onClick(() => this.isOn = false)
      }
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct RedButton {
  build() {
    Button({ type: ButtonType.Circle }) {
      Image("pages/images/icon_switch.png")
        .width(25)
        .height(25)
    }
    .width(50)
    .height(50)
    .backgroundColor(Color.Red)
  }
}


@Component
struct GreenButton {
  build() {
    Button({ type: ButtonType.Circle }) {
      Image("pages/images/icon_switch.png")
        .width(25)
        .height(25)
    }
    .width(50)
    .height(50)
    .backgroundColor(Color.Green)
  }
}

自定义组件参数案例

js 复制代码

@Entry
@Component
struct Index {
  @State isOn: boolean = false

  build() {
    Column({ space: 10 }) {
      if (this.isOn) {
        Image("pages/images/img_light.png")
          .width(300)
          .height(300)
          .borderRadius(20)
      } else {
        Image("pages/images/img_dark.png")
          .width(300)
          .height(300)
          .borderRadius(20)
      }


      Row({ space: 30 }) {
        SwitchButton({ color: Color.Green })
          .onClick(() => this.isOn = true)

        SwitchButton()
          .onClick(() => this.isOn = false)
      }
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct SwitchButton {
  color: Color = Color.Red

  build() {
    Button({ type: ButtonType.Circle }) {
      Image("pages/images/icon_switch.png")
        .width(25)
        .height(25)
    }
    .width(50)
    .height(50)
    .backgroundColor(this.color)
  }
}

组件文件案例

index.ets

js 复制代码

import { SwitchButton } from './SwitchButton'

@Entry
@Component
struct Index {
  @State isOn: boolean = false

  build() {
    Column({ space: 10 }) {
      if (this.isOn) {
        Image("pages/images/img_light.png")
          .width(300)
          .height(300)
          .borderRadius(20)
      } else {
        Image("pages/images/img_dark.png")
          .width(300)
          .height(300)
          .borderRadius(20)
      }


      Row({ space: 30 }) {
        SwitchButton({ color: Color.Green })
          .onClick(() => this.isOn = true)

        SwitchButton()
          .onClick(() => this.isOn = false)
      }
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

SwitchButton.ets

js 复制代码

@Component
export struct SwitchButton {
  color: Color = Color.Red

  build() {
    Button({ type: ButtonType.Circle }) {
      Image("pages/images/icon_switch.png")
        .width(25)
        .height(25)
    }
    .width(50)
    .height(50)
    .backgroundColor(this.color)
  }
}