当前位置：首页 > news >正文

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

news 2025/7/14 16:12:12

视频课程:
在这里插入图片描述

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

开关灯效果案例: 开灯
在这里插入图片描述

开关灯效果案例: 关灯
在这里插入图片描述

Column 和 Row 的基本用法

@Entry
@Component
struct Index {@State message: string = '张三';build() {// 一行内容Row() {// 一列内容Column() {// 文本内容Text(this.message).fontSize(50)// 字体大小.fontWeight(FontWeight.Bold) // 字体粗细}.width("100%")}.height('100%')}
}

一行两列的布局

@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%')}
}

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

@Entry
@Component
struct Index {@State isOn: boolean = falsebuild() {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)}
}

图标按钮案例

@Entry
@Component
struct Index {@State isOn: boolean = falsebuild() {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)}
}

自定义组件案例

@Entry
@Component
struct Index {@State isOn: boolean = falsebuild() {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)}
}

自定义组件参数案例

@Entry
@Component
struct Index {@State isOn: boolean = falsebuild() {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.Redbuild() {Button({ type: ButtonType.Circle }) {Image("pages/images/icon_switch.png").width(25).height(25)}.width(50).height(50).backgroundColor(this.color)}
}

组件文件案例

index.ets

import { SwitchButton } from './SwitchButton'@Entry
@Component
struct Index {@State isOn: boolean = falsebuild() {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

@Component
export struct SwitchButton {color: Color = Color.Redbuild() {Button({ type: ButtonType.Circle }) {Image("pages/images/icon_switch.png").width(25).height(25)}.width(50).height(50).backgroundColor(this.color)}
}