鸿蒙 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)
  }
}
相关推荐
用户41659673693552 分钟前
Kotlin Coroutine Flow 深度解析:剖析 `flowOn` 与上下文切换的奥秘
android
2501_915921432 分钟前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
沐怡旸6 分钟前
【Android】详细讲解ViewDragHelper的实现原理(不含代码版)
android
cding9 分钟前
Flutter 开发环境搭建
android·flutter
Digitally20 分钟前
如何将一加手机的照片传输到笔记本电脑?
android
fatiaozhang95272 小时前
晶晨S905L3SB芯片_安卓9.0_高安版_支持外置WIFI_线刷固件包
android·华为·电视盒子·刷机固件·机顶盒刷机
想要AC的sjh2 小时前
华为Java专业级科目一通过心得
java·开发语言·华为
li理2 小时前
使用AVPlayer在HarmonyOS中实现视频播放(ArkTS)
harmonyos
li理2 小时前
鸿蒙AVPlayer视频播放全解析:从基础实现到高级应用
harmonyos
旋律逍遥2 小时前
《AOSP上手》 2、Framework 开发小需求 “去掉原生 Launcher 中的 google 搜索栏”
android