鸿蒙 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)
  }
}
相关推荐
mmoyula24 分钟前
【RK3568 驱动开发:实现一个最基础的网络设备】
android·linux·驱动开发
万少1 小时前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
sam.li1 小时前
WebView安全实现(一)
android·安全·webview
移动开发者1号2 小时前
Kotlin协程超时控制:深入理解withTimeout与withTimeoutOrNull
android·kotlin
程序员JerrySUN2 小时前
RK3588 Android SDK 实战全解析 —— 架构、原理与开发关键点
android·架构
移动开发者1号2 小时前
Java Phaser:分阶段任务控制的终极武器
android·kotlin
哲科软件11 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
coder_pig15 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶15 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
二二孚日17 小时前
自用华为ICT云赛道Big Data第五章知识点-Flume海量日志聚合
大数据·华为