移动开发项目——黑马健康(三)

已于 2024-07-05 12:12:31 修改
阅读量319 收藏 6
点赞数 5
文章标签： visualstudio
于 2024-06-25 21:01:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73665756/article/details/139968891
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

 

一、饮食记录——记录列表

  列表通过将相关信息分组并以有序或无序的方式展示，使得用户可以迅速识别和理解界面上的内容。这种结构化的呈现方式有助于减少用户的信息处理负担，使他们能够更轻松地找到所需的信息。

  列表使用统一的格式和排版来展示信息，这种一致性有助于提高文本的可读性。用户可以通过扫描列表项来快速浏览内容，而无需逐字逐句地阅读。这种高效的阅读方式使得用户能够更快地获取所需信息。

  同时其采用垂直堆叠的布局方式，这种布局可以充分利用有限的屏幕空间。相比于其他布局方式，列表能够在较小的区域内展示更多的信息，同时保持界面的整洁和有序。灵活的信息展示方式，可以根据需要轻松地添加、删除或修改列表项。

adf1057f94b14931964e25ca9d2526c8.png

RecordList.ets

代码如下：

import { CommonConstants } from '../../common/constants/CommonConstants'

@Extend(Text) function grayText(){
  .fontSize(14)
  .fontColor($r('app.color.light_gray'))
}

@Component
export default  struct RecordList {
  build() {
    List({space:CommonConstants.SPACE_10}){
      ForEach([1,2,3,4,5],(item)=>{
        ListItem(){
          Column(){
            //1.分组的标题
            Row({space:CommonConstants.SPACE_4}){
              Image($r('app.media.ic_breakfast')).width(24)
              Text('早餐').fontWeight(CommonConstants.FONT_WEIGHT_700)
              Text('建议423-592千卡').grayText()
              Blank()
              Text('190').fontSize(14).fontColor($r('app.color.primary_color'))
              Text('千卡').grayText()
              Image($r('app.media.ic_public_add_norm_filled'))
                .width(20)
                .fillColor($r('app.color.primary_color'))
            }
            .width('100%')
            //2.组内记录列表
            List(){
              ForEach([1,2],(item)=>{
                ListItem(){
                  Row({space:CommonConstants.SPACE_6}){
                    Image($r('app.media.toast')).width(50)
                    Column({space:CommonConstants.SPACE_4}){
                      Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
                      Text('1片').grayText()
                    }
                    Blank()
                    Text('91千卡').grayText()
                  }
                  .width('100%')
                  .padding(CommonConstants.SPACE_6)
                }.swipeAction({end:this.deleteButton.bind(this)})
              })
            }
            .width('100%')
          }
          .width('100%')
          .backgroundColor(Color.White)
          .borderRadius(CommonConstants.DEFAULT_18)
          .padding(CommonConstants.SPACE_12)
        }
      })
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
    .margin({top:10})
  }

  @Builder deleteButton(){
    Image($r('app.media.ic_public_delete_filled'))
      .width(20)
      .fillColor(Color.Red)
      .margin(5)
  }
}

020954f6390f4d5ead740661385300fc.png

二、食物列表页

  通过在列表项中使用不同图标，用户可以清晰地看到信息的优先级或状态。这引导用户的注意力，使他们能够更快地关注到重要的内容。食物分成主食、果蔬、肉蛋奶等种类，有利于用户发现并添加需要的选项。

849db0398ee5462aaf5d8e6a3d3763c4.pngbe58477c6c624614b5b132469c1e2807.png

ItemIndex.ets

代码如下： 

import { CommonConstants } from '../common/constants/CommonConstants'
import router from '@ohos.router'
import ItemList from '../view/Item/ItemList'
import ItemPanelHeader from '../view/Item/ItemPanelHeader'
import ItemCard from '../view/Item/ItemCard'
import NumberKeyboard from '../view/Item/NumberKeyboard'
@Entry
@Component
struct ItemIndex {
  @State amount:number=1
  @State value:string=''
  @State showPanel:boolean=false

  onPanelShow(){
    this.amount=1
    this.value=''
    this.showPanel= true
  }

  build() {

      Column() {
        //1.头部导航
        this.Header()
        //2.列表
        ItemList({showPanel:this.onPanelShow.bind(this)})
        .layoutWeight(1)
        //3.底部面板
        Panel(this.showPanel){
          //3.1.顶部日期
          ItemPanelHeader()
          //3.2.记录项卡片
          ItemCard({amount:this.amount})
          //3.3.数字键盘
          NumberKeyboard({amount:$amount,value:$value})
          //3.4.按钮
          Row({space:CommonConstants.SPACE_6}){
            Button('取消')
              .width(120)
              .backgroundColor($r('app.color.light_gray'))
              .type(ButtonType.Normal)
              .borderRadius(6)
              .onClick(()=>this.showPanel=false)
            Button('提交')
              .width(120)
              .backgroundColor($r('app.color.primary_color'))
              .type(ButtonType.Normal)
              .borderRadius(6)
              .onClick(()=>this.showPanel=false)
          }
          .margin({top:10})
        }
        .mode(PanelMode.Full)
        .dragBar(false)
        .backgroundMask($r('app.color.light_gray'))
        .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
  }

  @Builder Header(){
    Row(){
      Image($r('app.media.ic_public_back'))
        .width(24)
        .onClick(()=>router.back())
      Blank()
      Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_600)
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height(32)
  }
}

ItemList.ets 

 

代码如下：

import { CommonConstants } from '../../common/constants/CommonConstants'
import ItemModel from '../../model/ItemModel'
import GroupInfo from '../../viewmodel/GroupInfo'
import ItemCategory from '../../viewmodel/ItemCategory'
import RecordItem from '../../viewmodel/RecordItem'
@Component
export default struct ItemList {

  showPanel:()=>void
  @State isFood:boolean=true

  data=[
    {type:new ItemCategory(0,'主食'),items:[{},{},{}]},
    {type:new ItemCategory(0,'主食'),items:[{},{},{}]},
    {type:new ItemCategory(0,'主食'),items:[{},{},{}]},
    {type:new ItemCategory(0,'主食'),items:[{},{},{}]},
  ]

  build() {
    Tabs() {
      TabContent() {
        this.TabContentBuilder(ItemModel.list(this.isFood))
      }
      .tabBar('全部')

      ForEach(
        ItemModel.listItemGroupByCategory(this.isFood),
        (group: GroupInfo<ItemCategory, RecordItem>) => {
          TabContent() {
            this.TabContentBuilder(group.items)
          }
          .tabBar(group.type.name)
        })

    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
  }

  @Builder TabContentBuilder(items:RecordItem[]){
    List({space:CommonConstants.SPACE_10}){
      ForEach(items,(item:RecordItem)=>{
        ListItem(){
          Row({space:CommonConstants.SPACE_6}){
            Image($r('app.media.toast')).width(50)
            Column({space:CommonConstants.SPACE_4}){
              Text(item.name).fontWeight(CommonConstants.FONT_WEIGHT_500)
              Text(`${item.calorie}千卡/${item.unit}`).fontSize(14).fontColor($r('app.color.light_gray'))
            }
            Blank()
            Image($r('app.media.ic_public_add_norm_filled'))
              .width(18)
              .fillColor($r('app.color.primary_color'))
          }
          .width('100%')
          .padding(CommonConstants.SPACE_6)
        }
        .onClick(()=>this.showPanel())
      })
    }
    .width('100%')
    .height('100%')
  }
}

总结

  在界面中添加列表具有诸多好处，这些好处不仅有助于提升用户体验和信息展示效率，还能增强应用的可用性和可访问性。因此，在设计界面时，应该充分考虑添加列表的必要性和优势。

 

LienTT
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动开发项目——黑马健康
weixin_73665756的博客
06-25 42
进入app前有短暂的欢迎界面。欢迎界面是用户与我们的移动应用建立初步印象的关键时刻。我在显著位置展示了应用的Logo，用来增强品牌识别度，同时使用简洁明了的文字，向用户介绍应用的核心功能和特点。打开界面显示弹窗“欢迎使用”，设置是否同意信息采集按钮，同意则跳转首页，不同意则出现弹窗。
移动开发项目——黑马健康（二）
weixin_73665756的博客
06-25 17
搜索栏允许用户直接输入关键词来查找特定的内容或功能，从而快速定位到他们感兴趣的信息。这种直接的导航方式比浏览多个页面或菜单更加高效，节省了用户的时间和精力。统计卡片方便用户更直观地看到当天饮食摄入及消耗，用户可以选择时间，可以查看之前的记录，也可以补充记录当天的详情。卡片分为两部分，除了推荐摄入卡路里，用户还可以直观地看到碳水、蛋白质和脂肪的摄入，可以帮助用户更好的安排饮食。这个界面不仅要能够清晰、直观地展示应用程序的核心功能和内容，还要提供流畅的用户体验和便捷的导航方式。
移动开发项目——黑马健康(五)
weixin_73665756的博客
06-25 125
媒体查询：导入媒体查询模块,设置媒体查询条件，并获取对应的listener语法规则：（媒体类型、媒体逻辑操作、媒体特征)给listener设置回调函数，当设备状态变化时会执行回调函数,将设备状态记录到全局状态中.
移动开发项目——黑马健康(四)
weixin_73665756的博客
06-25 232
在界面中添加数字键盘可以带来诸多好处，包括提高输入速度和准确性、优化界面布局、增强用户体验、支持多种输入方式、提高安全性以及适应特定用户需求等。
实战案例——黑马健康（3）
2301_78309032的博客
06-25 443
黑马健康App是一款功能全面的健康管理应用，黑马健康App通过提供个性化的饮食记录、健康评估等功能，帮助用户轻松管理健康，改善饮食和生活习惯。还提供个性化的推荐服务，确保用户能够获得最适合自己的健康和运动建议。总的来说，黑马健康App是一款功能全面、注重个性化推荐的健康管理应用，旨在为用户提供一站式的健康和运动解决方案。111。
鸿蒙实战案例——黑马健康（5）
ldld6666666的博客
06-25 328
黑马健康App是一款功能全面的健康管理应用，黑马健康App通过提供个性化的饮食记录、健康评估等功能，帮助用户轻松管理健康，改善饮食和生活习惯。还提供个性化的推荐服务，确保用户能够获得最适合自己的健康和运动建议。总的来说，黑马健康App是一款功能全面、注重个性化推荐的健康管理应用，旨在为用户提供一站式的健康和运动解决方案。本次视频的学习，学会了Panel组件与Grid组件的使用方法，将来对于这种底部弹出面板的相关问题也就一一解决了。
期末实战——黑马健康4
2301_78375949的博客
06-18 654
综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。黑马健康是一款功能全面的健康管理应用，它通过提供个性化的饮食记录、健康评估等功能，帮助用户轻松管理健康，改善饮食和生活习惯。无论是需要减肥塑形，还是关注日常营养摄入，黑马健康都能为用户提供定制化的服务，让健康管理变得简单而有效。媒体查询：1.导入媒体查询模块2.设置媒体查询条件，并获取对应的listener语法规则：（媒体类型、媒体逻辑操作、媒体特征）
期末实战——黑马健康3
2301_78375949的博客
06-18 936
综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。黑马健康是一款功能全面的健康管理应用，它通过提供个性化的饮食记录、健康评估等功能，帮助用户轻松管理健康，改善饮食和生活习惯。无论是需要减肥塑形，还是关注日常营养摄入，黑马健康都能为用户提供定制化的服务，让健康管理变得简单而有效。Panel： 可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切 换。需要传入布尔类型的参数，控制Panel显示或隐藏。
期末实战——黑马健康1
2301_78375949的博客
06-17 683
综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。黑马健康是一款功能全面的健康管理应用，它通过提供个性化的饮食记录、健康评估等功能，帮助用户轻松管理健康，改善饮食和生活习惯。无论是需要减肥塑形，还是关注日常营养摄入，黑马健康都能为用户提供定制化的服务，让健康管理变得简单而有效。自定义弹窗：（1）使用@CustomDialog装饰器声明弹窗组件（2）在页面中声明弹窗控制器，并利用其控制弹窗。
黑马程序员——Android移动开发源码
04-29
黑马程序员——Android移动开发源码
《Android移动开发案例教程》_源代码A
03-25
《Android移动开发案例教程》是一本面向初学者和在校大学生的专业教材，旨在深入浅出地讲解Android应用开发的基础知识和实战技巧。这本书由黑马程序员编著，是工业和信息化“十三五”人才培养规划的重要组成部分，...
移动应用开发——仿网易云音乐学习心得（uni-app框架）
2301_78079775的博客
05-25 429
uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app官网是uni-app开发者的官方信息来源和技术支持中心，对于学习和使用uni-app的开发者来说，是必不可少的资源。提供uni-app的官方文档，包括开发指南、API文档等，方便开发者学习和使用uni-app。
黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-权限管理制作
weixin_48884617的博客
04-10 3733
黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-权限管理制作
visual studio开发过程中常见操作、通用的错误
Castlehe的博客
06-20 3261
以下内容均基于visual studio2017
监理内业资料和表格使用（83页）.doc
最新发布
08-31
监理内业资料和表格使用（83页）.doc
SQLAlchemy-2.0.31-cp37-cp37m-win_amd64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
单片机资料c源码数码管动态扫描单片机资料c源码数码管动态扫描
08-31
单片机资料c源码数码管动态扫描单片机资料c源码数码管动态扫描提取方式是百度网盘分享地址
lxml-5.0.0-cp39-cp39-musllinux_1_1_x86_64.whl
08-31
lxml 是一个用于 Python 的库，它提供了高效的 XML 和 HTML 解析以及搜索功能。它是基于 libxml2 和 libxslt 这两个强大的 C 语言库构建的，因此相比纯 Python 实现的解析器（如 xml.etree.ElementTree），lxml 在速度和功能上都更为强大。 主要特性 快速的解析和序列化：由于底层是 C 实现的，lxml 在解析和序列化 XML/HTML 文档时非常快速。 XPath 和 CSS 选择器：支持 XPath 和 CSS 选择器，这使得在文档中查找特定元素变得简单而强大。 清理和转换 HTML：lxml 提供了强大的工具来清理和转换不规范的 HTML，比如自动修正标签和属性。 ETree API：提供了类似于 ElementTree 的 API，但更加完善和强大。 命名空间支持：相比 ElementTree，lxml 对 XML 命名空间提供了更好的支持。 安装 你可以通过 pip 安装 lxml：
黑马头条项目开发笔记——SpringCloud微服务环境搭建与基础
本文将探讨黑马头条项目，这是一个基于微服务和大数据技术构建的移动资讯客户端。项目旨在利用现代技术提供最新的热门新闻，并根据用户的兴趣进行精准推送。我们将重点关注环境搭建、SpringCloud微服务的使用，包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值