1.计算机小部件 —— 数字递加递减计数器

功能说明

本案例基于 DevEco Studio 鸿蒙 ArkTS 开发，实现简易数字计数器。页面包含一个数字展示文本、两个功能按钮「递加 +」「递减 -」；点击按钮实时修改数字，同时增加边界限制：数字最大为 10，最小为 0，超出边界无法继续增减，点击后预览器会实时刷新显示当前数值。

@Entry
@Component
struct jisuanqi1{
  @State count: number = 0

  build() {
    Column({space:40}){
      Text(`${this.count}`)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Row({space:20}){
        Button('递加+')
          .width('40%')
          .height(50)
          .borderRadius(12)
          .fontSize(26)
          .onClick(()=>{
            if (this.count < 10) {
              this.count = this.count +1
            }
          })
        Button('递减-')
          .width('40%')
          .height(50)
          .borderRadius(12)
          .fontSize(26)
          .onClick(()=>{
            if (this.count > 0) {
              this.count = this.count -1
            }
          })
      }
    }
    .height('100%')
    .width('100%')
    .padding(20)
  }

}

结果如图

核心知识点总结

1. @State 响应式状态：依靠count变量驱动页面文本自动更新，无需手动修改 UI；
2. 布局容器：Column 垂直排版、Row 水平排版，space 统一控制组件间距；
3. Button + onClick 点击事件：按钮交互核心，点击触发数值增减逻辑；
4. if 边界条件判断：限制数值区间 0~10，实现数值上下限保护；
5. 模板字符串动态文本：`${变量}`实时展示状态数据；
6. 组件链式样式：宽高、圆角、字号、加粗等样式统一链式调用配置。

2.在Arkts实现账户登录页面基础布局（代码如下图）

功能说明

本案例基于 DevEco Studio 鸿蒙 ArkTS 开发，完成登录页基础 UI 搭建，包含头像、登录标题、用户名输入框、密码输入框；通过@State状态变量双向接收用户输入，密码框开启密码隐藏模式，完整演示图片、文本、输入框、状态绑定、样式美化等核心知识点

@Entry
@Component
struct StyleDemo1{
@State flage:boolean=false
@State username:string=""
@State password:string=""
build() {
Column({space:20}){
Image($r("app.media.4"))
.width(80)
.height(80)
.borderRadius(40)
Text('账号登录')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.width("100%")
.textAlign(TextAlign.Center)
.margin({ bottom: 20 })
TextInput({text:this.username, placeholder: "请输入用户名" })
.width(320)
.height(50)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.padding({left:20})
.borderRadius(10)
.onChange((value:string)=>{
this.username=value
})
TextInput({text:this.password, placeholder: "请输入密码" })
.type(InputType.Password)
.width(320)
.height(50)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.borderRadius(10)
.onChange((value:string)=>{
this.password=value
})
Row(){
Text("记住密码")
.fontSize(20)
Toggle({ type: ToggleType.Switch, isOn: this.flage })
.height(25)
.width(50)
.onChange((value: boolean) => {
this.flage = value
})
}
Row({space:15}){
Button("登录")
.width(120)
.height(50)
.borderRadius(8)
.backgroundColor(0x007dff)
.fontSize(18)
.fontColor(Color.White)
.onClick(()=>{
if (this.username && this.password) {
AlertDialog.show({
title:`登录成功`,
message:`欢迎你,${this.username}`
})
}else {
AlertDialog.show({
title:`登录失败`,
message:`用户名${this.username}或密码错误`
})
}
            })
Button("清空")
.width(120)
.height(50)
.borderRadius(8)
.backgroundColor(0x007dff)
.fontSize(18)
.fontColor(Color.White)
.onClick(()=>{
this.username=this.username=''
this.password=this.password=''
})
}
.width("100%")
.justifyContent(FlexAlign.Center)
}
.width('100%')
.height('100%')
.padding(15)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}

结果如图（代码不可直接复制使用 需改变image文件的值）

核心知识点总结

1. 资源加载：$r("app.media.xxx")读取项目本地图片资源；
2. 图片样式：通过borderRadius设置圆角，宽高相等 + 半圆角数值实现圆形头像；
3. TextInput 两种常用场景：普通文本输入、密码隐藏输入（InputType.Password）；
4. 双向数据绑定：@State变量搭配onChange实时接收用户输入；
5. 页面样式开发：链式调用配置尺寸、背景色、内边距、外边距、圆角、文字对齐；
6. Column 垂直布局：登录页标准上下流式排版，space统一控制组件间距。

3.在Arkts中实现开关的启用或关闭（代码如下图）

功能概述

本案例演示鸿蒙 ArkTS 中Toggle两种控件样式：复选框Checkbox、滑动开关Switch；通过@State布尔状态变量实现滑动开关双向联动，切换开关实时修改状态，下方文本同步展示开关开启 / 关闭状态，完整覆盖 Toggle 组件配置、onChange事件、三元动态文本渲染知识点。

@Entry
@Component
struct Toggle1{
  @State isOpen:boolean = true
  build() {
    Column(){
      Toggle({
        type:ToggleType.Checkbox,
        isOn:false
      })
        .width(50)

      Toggle({
        type:ToggleType.Switch,
        isOn:this.isOpen
      })
        .width(150)
        .height(50)
        .selectedColor(Color.Red)
        .onChange((value:boolean)=>{
          this.isOpen = !this.isOpen
        })

      Text(this.isOpen?"开关已打开":"开关已关闭")
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
  }
}

结果如下图

核心知识点总结 

1. Toggle 两种类型区分
   • ToggleType.Checkbox：复选框，多用于多选表单，可静态固定状态；
   • ToggleType.Switch：滑动开关，多用于功能启停、模式切换，支持交互联动页面状态。
2. 布尔状态取反 !变量this.isOpen = !this.isOpen 是开关切换最简写法，无需 if 判断，快速反转 true/false。
3. Toggle 专属配置
   • isOn：绑定布尔值控制开关开启 / 关闭；
   • .selectedColor()：自定义开关打开时的主题色；
   • onChange：滑动切换时触发，监听状态变更。
4. 三元表达式动态渲染文本依托@State布尔变量，一行代码实现两种提示文字自动切换。
5. 响应式原理修改@State修饰的isOpen变量后，绑定它的 Toggle 组件、Text 文本会自动同步刷新，无需手动操作视图。

整体全文总结

二、分案例核心知识点梳理

案例 1：递加递减数字计数器

案例 2：账户登录页面布局

案例 3：Toggle 开关启用 / 关闭控件

三、整体开发思想总结

三套案例完整体现鸿蒙 ArkTS状态驱动开发核心思想：仅修改@State状态变量，无需手动操作页面 DOM，页面所有关联组件自动同步更新；同时覆盖移动端开发最常用的按钮、输入框、图片、开关、文本组件，是鸿蒙零基础入门的完整实操合集，可直接用于课堂实训、个人技术博客归档学习。

1. 本文整合 3 套 DevEco Studio 鸿蒙 ArkTS 实训案例，覆盖数字计数器、账户登录页面、Toggle 开关控件三大综合 Demo，完整梳理 ArkTS 声明式 UI 核心开发体系，统一围绕「@State 响应式状态、基础布局、常用 UI 组件、onClick/onChange 交互事件」四大核心知识点展开：

   一、核心基础通用语法（三个案例共用底层逻辑）

2. 页面固定模板：@Entry页面入口装饰器 + @Component自定义组件装饰器，必须通过build()函数渲染页面视图；
3. 响应式核心@State：被修饰变量修改后，所有绑定该变量的 UI 组件自动刷新，是鸿蒙状态驱动 UI 的核心；
4. 基础布局容器：Column垂直上下排版、Row水平左右排版，通过space属性统一控制组件间距；
5. 两大交互事件区分：
   • onClick：主动点击触发，适配 Button 按钮，用于数值增减、页面切换、状态反转；
   • onChange：值变更自动触发，适配 TextInput 输入框、Toggle 开关，实时监听输入 / 状态改动；
6. 动态渲染语法：模板字符串`${变量}`展示状态数值、三元表达式条件?文字1:文字2根据布尔值切换展示文本；
7. 统一链式样式写法：所有组件支持链式调用设置宽高、圆角、字号、背景色、内外边距、文字对齐等视觉样式。
8. 核心组件：Button 按钮、Text 文本；
9. 状态：@State count:number存储计数值；
10. 业务逻辑：两个按钮绑定onClick实现数字 + 1/-1，搭配 if 条件判断设置边界（数值区间 0~10），防止溢出；
11. 适用场景：数值统计、数量选择器。
12. 核心组件：Image 本地图片、Text 标题、TextInput 文本输入框；
13. 状态：@State username用户名、@State password密码、布尔变量预留拓展功能；
14. 关键特性：
    • Image($r("app.media.资源名"))加载项目本地图片，配合borderRadius实现圆形头像；
    • TextInput 支持普通文本输入与InputType.Password密码隐藏模式；
    • 输入框绑定onChange双向同步用户输入内容至状态变量；
15. 适用场景：APP 登录、表单信息录入页面搭建。
16. 核心组件：Toggle（两种样式）、动态 Text 文本；
17. 状态：@State isOpen:boolean布尔变量存储开关启停状态；
18. 关键特性：
    • Toggle 双类型：ToggleType.Checkbox静态复选框、ToggleType.Switch可交互滑动开关；
    • !布尔变量快速取反状态，简化开关切换逻辑；
    • selectedColor自定义开关开启时主题色，滑动触发onChange联动页面文字同步更新；
19. 适用场景：功能启停、模式切换（夜览 / 推送开关）、权限控制。