鸿蒙4.0开发笔记之ArkTS语法项目实战【实现一个待买待做列表】（十九）

本文链接：https://blog.youkuaiyun.com/Viewinfinitely/article/details/134888793

本文详细描述了一个鸿蒙HarmonyOS项目，涉及首页设计、跳转至今日买菜列表、选中效果控制、页面结构与数据管理，以及使用常量模块保持一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、实现需求

1、项目任务
通过进入首页，点击首页的按钮可以跳转到“今日买菜列表”项目列表中，列表里面呈现所需要购买的菜品，每一个项目上面都由一个空白框图标和文字组成。分别选中各个项目，可以实现空白框被勾选、文字增加删除线、斜体、透明度变低的效果，再次点击可以恢复到原来未被选中的状态。且添加返回按钮，实现返回首页。

2、目录结构
本项目总共需要创建2个页面文件、封装3个模块文件。

二、实现步骤

1、跳转和基础属性
（1）router进行首页的路由跳转和“今日买菜列表”页面的路由返回；
（2）设置首页的基本属性和点击事件，点击事件传递的参数除了路由地址，还有APP的名称。

//项目首页：引导页面
//需要进行页面跳转，实现跳转到其他功能页

//导入路由函数所在的库
import router from '@ohos.router';

//导入封装好的常量数据模型
import Constants from '../common/Constant'

@Entry
@Component
struct Index {
   
  @State message: string = '今日买菜列表'

  build() {
   
    Row() {
   
      Column() {
   
        Button(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          //创建点击事件：实现页面跳转到功能页
          .onClick(()=>{
   
              router.pushUrl({
   
                url:"pages/Tobuylist",
                params:{
   
                  appName: 'ToBuyList 2.0'
                }
              })
          })
      }
      .width('100%')
    }
    .height('100%')
    //调用常量数据模型，设置背景颜色
    .backgroundColor(Constants.BACKGROUND)
  }

}