AI 助理
备案控制台
开发者社区 云计算 文章 正文

一大波女生、男生适用的最新鸿蒙练手案例来袭

2024-10-18 11
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一大波女生、男生适用的最新鸿蒙练手案例来袭

一大波女生、男生适用的最新鸿蒙练手案例来袭

介绍

以下案例适合刚开始手鸿蒙开发的小伙伴，有大量的最新逻辑锻炼、鸿蒙核心语法、使用最新鸿蒙的@Local、@Computed 等装饰器来完成。

另外，考虑在学习知识的知识时候，优先关注核心功能，所以提供的布局都会适当简化，但是能保证把核心功能展示出来。

每一个案例会点出终点和核心知识，让学习者可以练习完毕，可以得到什么。

学习的路线

  1. 先看效果
  2. 复现效果
  3. 如果有对代码产生的疑问，可以在评论区内直接提出，有疑问，必回复
  4. 如果能帮助到你，就很好了。😄

点击高亮

  1. 练习基本的线性布局
  2. 练习基本的数组使用
  3. 练习列表渲染语法 ForEach
  4. 练习布局中的状态切换 三元表达式
  5. 掌握通用的点击高亮

@Entry
@ComponentV2
struct Index {
  @Local
  list: string[] = ["小明", "小红", "小黑", "小黄"]
  // 声明一个数字 表示你当前选中的按钮的下标
  @Local
  select: number = 1
  build() {
    Column() {
      ForEach(this.list, (item: string, index: number) => {
        Button(item + "  " + (this.select == index))
          .backgroundColor(this.select == index ? "#ffcd43" : "#007dfe")
          .onClick(() => {
            this.select = index
          })
      })
    }
    .width("100%")
    .height("100%")
    .padding({ top: 100 })
  }
}

待办列表

  1. 新手上手新的编程语言的必做案例 crud - 增删该查
  2. 练习 V2装饰器、@Local、@Computed、事件等
  3. 打通 状态 -> UI 、 UI-> 状态 的一些交互

@ObservedV2
class Task {
  @Trace task: string = ""
  @Trace isFinished: boolean = false
}
@Entry
@ComponentV2
struct Index {
  // 任务列表
  @Local
  list: Task[] = [
  // { task: "数组学习", isFinished: true },
  // { task: "函数学习", isFinished: false }
  ]
  // 输入框输入的内容
  @Local
  inpValue: string = ""
  // 未完成数量
  @Computed
  get statistics() {
    let undoneNum = this.list.filter(v =>!v.isFinished).length
    let doneNum = this.list.length - undoneNum
    return [undoneNum, doneNum]
  }
  // 清理已经完成的任务
  onClear = () => {
    //   筛选 留下未完成
    this.list = this.list.filter((v =>!v.isFinished))
  }
  // 删除
  onDelete = (index: number) => {
    this.list.splice(index, 1)
  }
  build() {
    Column() {
      Row() {
        Button("清理已完成")
          .onClick(this.onClear)
      }
      Row() {
        Text(`未完成的数量 ${this.statistics[0]}`)
        Text(`完成的数量 ${this.statistics[1]}`)
      }
      .width("80%")
      .justifyContent(FlexAlign.SpaceAround)
      Row() {
        TextInput()
          .width(200)
          .onChange(value => {
            this.inpValue = value
          })
        Button("确认")
          .onClick(() => {
            // 熟练 探囊取物！！
            // 先判断当前任务有没有出现过
            const isExit = this.list.some(element => element.task == this.inpValue)
            if (!isExit) {
              const p = new Task()
              p.task = this.inpValue
              this.list.push(p)
            }
          })
      }
      ForEach(this.list, (item: Task, index: number) => {
        Row() {
          Text(item.task)
            .fontColor(item.isFinished ? "#666" : "#000")
            .decoration({
              type: item.isFinished ? TextDecorationType.LineThrough : TextDecorationType.None
            })
            .fontStyle(item.isFinished ? FontStyle.Italic : FontStyle.Normal)
            .onClick(() => {
              this.onDelete(index)
            })
          Button(item.isFinished ? "继续" : "完成")
            .backgroundColor(item.isFinished ? "#ffa601" : "#007dfe")
            .onClick(() => {
              this.list[index].isFinished = !this.list[index].isFinished
            })
        }
      })
    }
    .width("100%")
    .height("100%")
    .padding({ top: 100 })
  }
}

B站显示更多

  1. 练习Flex布局的换行
  2. 练习Scroll布局的水平滚动
  3. 练习绝对定位-水平居中
  4. 练习条件渲染

@Entry
@ComponentV2
struct Index {
  @Local
  list: string[] =
    ["首页", "动画", "番剧", "国创", "音乐", "舞蹈", "游戏", "知识", "科技", "运动", "汽车", "生活", "美食", "动物圈",
      "鬼畜", "时尚", "娱乐", "影视", "纪录片", "电影", "电视剧", "直播", "课堂"]
  // 是否显示更多
  @Local
  isShowMore: boolean = false
  build() {
    Column() {
      Row({ space: 5 }) {
        Scroll() {
          // true 换行
          Flex({ wrap: this.isShowMore ? FlexWrap.Wrap : FlexWrap.NoWrap }) {
            ForEach(this.list, (item: string) => {
              Text(item)
                .margin(10)
            })
          }
        }
        .scrollable(ScrollDirection.Horizontal)
        .layoutWeight(1)
        // .backgroundColor(Color.Yellow)
        .padding({
          bottom: this.isShowMore ? 30 : 0
        })
        if (this.isShowMore) {
          Image($r("app.media.app_icon"))
            .width(20)
            .position({
              left: "50%",
              bottom: 0
            })
            .translate({
              x: -10
            })
            .onClick(() => {
              this.isShowMore = !this.isShowMore
            })
        } else {
          Image($r("app.media.app_icon"))
            .width(20)
            .onClick(() => {
              this.isShowMore = !this.isShowMore
            })
        }
      }
      .width("100%")
      .backgroundColor(Color.Red)
    }
    .width("100%")
    .height("100%")
  }
}

仿考研日程

  1. 练习如何根据需求来拆分数据
  2. 简单的渲染

// 二级目录
interface SubContent {
  subTitle: string
  subContent: string
}
// 一级目录
interface OneContent {
  title: string
  content: SubContent[]
}
@Entry
@ComponentV2
struct Index {
  @Local
  list: OneContent[] = [
    {
      title: "统考",
      content: [
        {
          subTitle: "国家线",
          subContent: "2024。。。。"
        }, {
        subTitle: "考研复试流程图",
        subContent: ""
      }
      ]
    },
    {
      title: "统考22",
      content: [
        {
          subTitle: "国家线22",
          subContent: "2024。。。。22"
        }, {
        subTitle: "考研复试流程图22",
        subContent: ""
      }
      ]
    }
  ]
  // 选中标题的下标
  @Local
  current: number = 0
  build() {
    Column() {
      // 1 标题
      Row({ space: 10 }) {
        ForEach(this.list, (item: OneContent, index: number) => {
          Text(item.title)
            .fontColor(this.current == index ? "#0094ff" : "#000")
            .onClick(() => {
              this.current = index
            })
        })
      }
      //   2 内容
      Column() {
        ForEach(this.list[this.current].content, (item: SubContent) => {
          Column() {
            Text(item.subTitle)
            Text(item.subContent)
          }
        })
      }
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#eee")
  }
}

仿vantUI -倒计时

  1. 练习定时器
  2. 练习一点关于时间处理的逻辑功能

@Entry
@ComponentV2
struct Index {
  @Local
  str: string = ""
  // 时间 毫秒
  time: number = 5 * 60 * 60 * 1000
  tid: number = -1
  build() {
    Column() {
      Button("开始倒计时")
        .onClick(() => {
          // setInterval 时间间隔最少 是10ms
          this.tid = setInterval(() => {
            this.time -= 10
            //   计算小时 整数 parseInt  Math.floor()
            // parseInt 只能传递字符串类型
            const hour = Math.floor(this.time / 1000 / 60 / 60)
            const minute = Math.floor(this.time / 1000 / 60 % 60)
            const seconde = Math.floor(this.time / 1000 % 60)
            const milliSeconde = this.time % 1000
            this.str = `${hour}:${minute}:${seconde}.${milliSeconde}`
          }, 10)
        })
      Button("暂停")
        .onClick(() => {
          clearInterval(this.tid)
        })
      Text(this.str)
        .fontSize(30)
    }
  }
}

仿掘金抽奖

  1. 练习flex布局-换行
  2. 练习随机数
  3. 练习数组+随机数实现随机获取元素

@Entry
@ComponentV2
struct Index {
  @Local
  list: string[] = [
    "4090",
    "4399",
    "大彩电",
    "iphone16",
    "meta70",
    "Mac",
    "小牛电动车",
    "迪拜7日游",
    "北京房子一套"
  ]
  @Local
  current: number = 0
  // 根据下标设置奖品高亮
  setHighline(index: number) {
    this.current = index
  }
  build() {
    Column() {
      Flex({
        wrap: FlexWrap.Wrap
      }) {
        ForEach(this.list, (item: string, index: number) => {
          Text(item)
            .width("33.33%")
            .padding({
              top: 20, bottom: 20
            })
            .border({
              width: 1
            })
            .backgroundColor(this.current == index ? "#e37815" : "#fff")
        })
      }
      Button("开始抽啦")
        .onClick(() => {
          //  开始抽奖
          let tid = setInterval(() => {
            // 等于 数组长度范围内的随机数
            const index = Math.floor(Math.random() * this.list.length)
            this.setHighline(index)
          }, 10)
          //   开启5s种延时器  -  停止定时器
          setTimeout(() => {
            clearInterval(tid)
          }, 5000)
        })
    }
  }
}

仿掘金抽奖 - 不重复抽奖

  1. 加强逻辑处理，如何实现不重复抽奖
  2. 练习一些数组的方法
  3. 练习使用 @Computed

@Entry
@ComponentV2
struct Index {
  @Local
  list: string[] = [
    "4090",
    "4399",
    "大彩电",
    "iphone16",
    "meta70",
    "Mac",
    "小牛电动车",
    "迪拜7日游",
    "北京房子一套"
  ]
  @Local
  selectedList: number[] = []
  @Local
  current: number = 0
  // 奖池
  @Computed
  get newList() {
    const newList: number[] = []
    for (let index = 0; index < this.list.length; index++) {
      let item = this.selectedList.find(v => v === index)
      if (!item) {
        newList.push(index)
      }
    }
    return newList
  }
  // 根据下标设置奖品高亮
  setHighline(index: number) {
    this.current = index
  }
  build() {
    Column() {
      Flex({
        wrap: FlexWrap.Wrap
      }) {
        ForEach(this.list, (item: string, index: number) => {
          Text(item)
            .width("33.33%")
            .padding({
              top: 20, bottom: 20
            })
            .border({
              width: 1
            })
            .backgroundColor(
              this.selectedList.includes(index) ? "#e37815" :
                (this.current == index ? "#e37815" : "#fff"))
        })
      }
      Button("开始抽啦")
        .onClick(() => {
          //  开始抽奖
          let tid = setInterval(() => {
            // 等于 数组长度范围内的随机数
            const index = Math.floor(Math.random() * this.newList.length)
            this.setHighline(this.newList[index])
          }, 10)
          //   开启5s种延时器  -  停止定时器
          setTimeout(() => {
            clearInterval(tid)
            this.selectedList.push(this.current)
          }, 1000)
        })
    }
  }
}

仿vantUI-分页组件-简单版本

  1. 练习基本的鸿蒙线性布局
  2. 练习条件渲染
  3. 练习逻辑能力

@Entry
@ComponentV2
struct Index {
  @Local
  list: string[] = ['1', '2', '3', '4', '5']
  @Local
  current: number = 4
  build() {
    Column() {
      Row({ space: 2 }) {
        Button("上一页")
          .enabled(this.current != 0)
          .backgroundColor("#fff")
          .fontColor("#0094ff")
          .stateStyles({
            disabled: {
              .backgroundColor("#eee")
            }
          })
          .onClick(() => {
            this.current--
          })
        ForEach(this.list, (item: string, index: number) => {
          Button(item)
            .backgroundColor(this.current == index ? "#0094ff" : "#fff")
            .fontColor(this.current == index ? "#fff" : "#0094ff")
            .onClick(() => {
              this.current = index
            })
        })
        Button("下一页")
          .enabled(this.current != this.list.length - 1)
          .backgroundColor("#fff")
          .stateStyles({
            disabled: {
              .backgroundColor("#eee")
            }
          })
          .fontColor("#0094ff")
          .onClick(() => {
            this.current++
          })
      }
    }
    .width("100%")
    .height("100%")
    .padding({
      top: 100
    })
    .backgroundColor("#eee")
  }
}

仿vantUI-分页组件-复杂版本

  1. 练习基本的鸿蒙线性布局
  2. 练习条件渲染
  3. 练习复杂的逻辑能力

@Entry
@ComponentV2
struct Index {
  @Local list: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
  @Local
  test: number = 1
  @Local 
  showList: number[] = [1, 2, 3]
  change() {
    if (this.test > 1 && this.test < this.list.length) {
      this.showList = [this.test - 1, this.test, this.test + 1]
    }
  }
  previous() {
    this.test--
    this.change()
  }
  next() {
    this.test++
    this.change()
  }
  build() {
    Column() {
      Row() {
        Button("上")
          .enabled(this.test != 1)
          .backgroundColor("#ccc")
          .onClick(() => {
            this.previous()
          })
        if (this.test > 2) {
          Button("...")
            .backgroundColor("#ccc")
            .onClick(() => {
              this.previous()
            })
        }
        ForEach(this.showList, (item: number) => {
          Button(item.toString())
            .backgroundColor(this.test == item ? Color.Blue : "#ccc")
            .onClick(() => {
              this.test = item
              this.change()
            })
        })
        if (this.test < this.list[this.list.length-1] - 1) {
          Button("...")
            .backgroundColor("#ccc")
            .onClick(() => {
              this.next()
            })
        }
        Button("下")
          .enabled(this.test != this.list[this.list.length-1])
          .backgroundColor("#ccc")
          .onClick(() => {
            this.next()
          })
      }
    }
  }
}

小结

如果部分内容中的图片不存在，自己随机替换即可。

万少！
目录
相关文章
耀骑士
|
数据安全/隐私保护 图形学 Windows
推荐五款宝藏软件，身为宝藏男孩和宝藏女孩的你，不试一下吗？
今天带来五款宝藏软件，身为宝藏男孩和宝藏女孩的你们，不试一下吗？
耀骑士
189 0
推荐五款宝藏软件，身为宝藏男孩和宝藏女孩的你，不试一下吗？
r35kc4qfp4orq
|
Python
学Python 函数从青铜到王者
学Python 函数从青铜到王者
r35kc4qfp4orq
179 0
学Python 函数从青铜到王者
Roin123
|
数据库
有奖征集 ！不出门云约会？这个特别的情人节，你和TA准备怎么过​？
这个情人节 需要打开你的脑洞
Roin123
845 0
有奖征集 ！不出门云约会？这个特别的情人节，你和TA准备怎么过​？
技术小能手
|
Java 程序员
史上最美女程序员：手写代码把人类送上月球
技术小能手
4187 0
yq传送门
|
机器学习/深度学习 安全 Java
9月7日云栖精选夜读 | 史上最美女程序员：手写代码把人类送上月球
yq传送门
3085 0
yunqi_share
|
数据中心
阿里云黑科技太厉害了 脑子进水还算得更快
热得快可以快速烧水是利用了浸没的优势，那么如果要降温呢？ 阿里云科学家在4月26日的云栖大会·南京峰会上展示了全浸没的“凉得快”服务器——麒麟，把整台服务器浸在液体里循环冷却，这一方案可以无需使用空调，能源使用率（PUE）逼近了理论极限值1.0。
yunqi_share
1652 0
云飞学编程
|
数据采集 JSON 数据格式
世界杯快到了，看我用Python爬虫实现（伪）球迷速成！
还有4天就世界杯了，作为一个资深（伪）球迷，必须要实时关注世界杯相关新闻，了解各个球队动态，这样才能在一堆球迷中如（大）鱼（吹）得（特）水（吹），迎接大家仰慕的目光! 给大家分享一个快速了解相关信息的办法：刷论坛！我们来...
云飞学编程
1169 0
技术小能手
|
安全 大数据 定位技术
Kaggle 20G数据集强势分析“绝地求生”，科学吃鸡攻略拿走不谢！
技术小能手
2066 0
行者武松
|
物联网 vr&ar
2.14要来了，老司机教单身狗如何用VR过情人节
行者武松
1102 0
阿里云头条
|
新零售 大数据
浙江的“最多跑一次”，背后有阿里云这个神助攻
阿里云头条
3872 0

热门文章

最新文章

  • 1
    表格存储新手指南：如何实现分页查询
  • 2
    TensorFlow中的那些高级API
  • 3
    ODPS技术架构及应用实践
  • 4
    阿里技术高P访谈之“呆萌”程序员蒋晓伟为何从Facebook到阿里巴巴
  • 5
    树莓派 Raspberry Pi （bullseye）更换阿里云源方法
  • 6
    安装Zabbix过程中出现的问题集
  • 7
    抛弃WebService，在.NE“.NET研究”T4中用 jQuery 调用 WCF
  • 8
    linux 操作系统优化参数说明
  • 9
    选择适当的关键词
  • 10
    MVC结合Easyui Portal 实例
  • 1
    基于知识图谱的教学资源网
    38
  • 2
    藏式建筑彩绘知识图谱展示及问答
    30
  • 3
    我写个HarmonyOS Next版本的微信聊天02
    39
  • 4
    用于企业AI搜索的Bocha Web Search API，给LLM提供联网搜索能力和长文本上下文
    38
  • 5
    【速收藏】python字符串操作，你会几个？
    27
  • 6
    Django如何调用机器学习模型进行预测
    25
  • 7
    Django与MongoDB搭建高效的Web应用
    13
  • 8
    给行业新人的一些看法
    12
  • 9
    分享几个实用且高效的EF Core扩展类库，提高开发效率！
    11
  • 10
    动态规划算法学习四：最大上升子序列问题（LIS：Longest Increasing Subsequence）
    10

    • 相关课程

    更多
  • 【新人赛】工业蒸汽量预测建模算法代码开源分享合集
  • 智能创作赛（复赛）：相册应用中的视频故事生成算法介绍
  • 智能创作赛（初赛）：相册应用中的故事生成算法介绍
  • 天池新人实战赛o2o优惠券使用预测代码学习分享
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 天池leetcode编程习题讲解

    • 相关电子书

    更多
  • 长安十二时辰背后的技术秘籍
  • 《长安十二时辰》
  • 分身大师那些事儿

    • 相关实验场景

    更多
  • 奥运时刻！零代码生成奥运风格AI写真。
  • 【AI破次元壁合照】少年白马醉春风，函数计算一键部署AI绘画平台
  • 基于函数计算一键部署掌上游戏机
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 基于阿里云DeepGPU实例，用AI画唯美国风少女
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月