鸿蒙 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)
  }
}
相关推荐
你过来啊你几秒前
Android性能优化之启动优化
android
zhanshuo28 分钟前
干掉复杂逻辑!手把手教你在鸿蒙系统中创建稳定的后台服务
harmonyos
zhanshuo29 分钟前
鸿蒙系统通知开发全攻略:实现跳转、自动消失、消息提醒的完整教程
harmonyos
apihz37 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
问道飞鱼1 小时前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
aningxiaoxixi2 小时前
Android 之 audiotrack
android
枷锁—sha2 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
周胡杰2 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦3 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
Cao_Shixin攻城狮5 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter