HarmonyOS自学-Day4(TodoList案例)

目录


文章声明⭐⭐⭐

  1. 该文章为我(有编程语言基础,非编程小白)的 HarmonyOS自学笔记,此类文章笔记我会默认大家都学过前端相关的知识
  2. 知识来源为 HarmonyOS官方文档,归纳为自己的语言与理解记录于此
  3. 不出意外的话,我大抵会 持续更新
  4. 想要了解前端开发(技术栈大致有:Vue2/3、微信小程序、uniapp、HarmonyOS、NodeJS、Typescript)与Python的小伙伴,可以关注我!谢谢大家!

让我们开始今天的学习吧!

TodoList小案例

效果图如下:

代码如下:

typescript 复制代码
@Entry
@Component
struct Index {
  @State userInput:string = ''; // 用户输入
  @State toDoList:string[] = ['吃饭','睡觉','打豆豆']; // 待办事项的数组
  build() {
    Column(){
      // 标题
      Row(){
        Text('TodoList')
          .fontSize(40)
      }
      .margin({top:100})
      // 输入框与提交按钮
      Row(){
        // 输入框
        TextInput({text:this.userInput,placeholder:'请输入代办项:'})
          .width(220)
          .height(50)
          .fontSize(20)
          .onChange((newValue:string)=>{this.userInput = newValue})

        // 提交按钮
        Button('提交')
          .width(80)
          .height(50)
          .onClick(()=>{
            // 提交至待办事项数组
            this.toDoList.push(this.userInput)
            // 清空用户输入
            this.userInput = ''
          })
      }
      .width('100%')
      .height('10%')
      .margin({top:30})
      .backgroundColor(Color.White)
      .justifyContent(FlexAlign.SpaceAround)
      // 待办事项列表
      List(){
        if (this.toDoList.length) {
          // 展示列表
          ForEach(this.toDoList,(item:string,index:number)=>{
            ListItem(){
              Row(){
                // 代办事项内容
                Text(item)
                  .fontSize(25)
                // 删除按钮
                Button('删除')
                  .width(100)
                  .backgroundColor(Color.Red)
                  .fontColor(Color.White)
                  .onClick(()=>{
                    this.toDoList.splice(index,1)
                  })
              }
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .width('80%')
            .height(50)
            .margin({top:10})
          },(item:string,index:number)=>item+index.toString())
        } else {
          // 数组为空,展示提示文字
          ListItem(){
            Text('暂无待办事项')
              .fontSize(30)
          }
          .margin({top:30})
        }
      }
      .width('100%')
      .height('50%')
      .alignListItem(ListItemAlign.Center)
      .scrollBar(BarState.Auto)
    }
    .width('100%')
    .height('100%')
  }
}
相关推荐
Georgewu21 分钟前
【HarmonyOS】鸿蒙应用开发Text控件常见错误
harmonyos
Georgewu2 小时前
【HarmonyOS】富文本编辑器RichEditor详解
harmonyos
zhanshuo8 小时前
鸿蒙应用调试与测试实战全指南:高效定位问题,性能优化必备技巧+实用代码示例
harmonyos
万少12 小时前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
网络小白不怕黑13 小时前
华为设备 QoS 流分类与流标记深度解析及实验脚本
网络·华为
网络小白不怕黑14 小时前
华为交换机堆叠与集群技术深度解析附带脚本
网络·华为
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
万少1 天前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core1 天前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos