HarmonyOS自学-Day4(TodoList案例)

---

文章声明⭐⭐⭐

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

---

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

TodoList小案例

效果图如下：

代码如下：

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