wananzzz-CSDN博客

原创黑马健康项目（八）底部Panel

记录项卡片是三部分，一个Column容器中放一个Column容器隔一个下划线 Row容器隔下划线 Row容器，第一个Column容器是Image+text，下面一个Row容器里面放几组Column容器是text+变量最后一个Row容器是左边一个Column变量+下划线接text。效果呢就如上图所示，这个面板就是Panel组件，其中是最上方一个顶部日期然后跟一个记录项卡片还有数字键盘和按钮，这一篇中就先解决前两部分顶部日期和记录项卡片。// 3.2.记录项卡片。// 3.1.顶部日期。

2024-06-25 18:08:33 723

原创黑马健康项目（七）食物列表页

Text(`${item.calorie}千卡/${item.unit}`).fontSize(14).fontColor($r('app.color.light_gray'))我们这部分要完成的内容是通过食物记录列表的加号跳转到的另一个页面，食物列表页面。因为列表内每一页面的内容都是类似的所以我们把列表内容用一个Builder来封装。因为这是一个新的页面，所以我们要重新建一个ItemIndex的页面。这一页面就是两部分一个顶部的导航条和下面的一个tabs组件。.tabBar('全部')

2024-06-25 18:08:19 736

原创黑马健康项目（六）记录列表

很明显，这一部分就是一个List组件，Column框两个Row容器，第一个Row容器分组标题，每一行上面就是一个image+text+text+Blank+text+image，还有第二个Row容器是组内记录列表，image+Column容器内，上text+下text然后一段Blank+text。Text(`建议${group.type.min}~${group.type.max}千卡`).grayText()Text(`${item.calorie.toFixed(0)}千卡`).grayText()

2024-06-25 18:08:03 871

原创黑马健康项目（五）统计卡片

this.StatsBuilder({label: '还可以吃', value: this.remainCalorie(),tips: `推荐${this.recommend}`})日期信息是在一个Row容器中左边一段时间文本右边一个可以调节时间的按钮弹窗，弹窗部分和之前用户隐私的弹窗一样使用controller，所以我们再创建一个 DatePickDialog 的组件。这一部分是由一个Column容器，上边一个时间展示，下边一个饮食热量统计，首先是时间展示的部分这里是一段文本加一个按钮弹窗。

2024-06-25 18:07:47 940

原创黑马健康项目（四）顶部搜索栏

效果如图，这便是饮食记录页面的整体布局，在一个Column容器中有三部分Row容器组成，本篇要完成的是第一部分顶部搜索栏，这部分是由一个左边的Search和右边的Image组成，这便是我们的前期准备构思的工作内容。这一部分虽然是做顶部搜索栏的部分，但是由于它是一个大页面的一部分所以也要提前设计整体页面布局。Search({placeholder: '搜索饮食或运动信息'})其中运用了search组件和Badge组件分别用来搜索和记录邮件未读的角标。// 1.头部搜索栏。以上就是记录页面的整体框架。

2024-06-25 18:07:37 401

原创黑马健康项目（三）首页Tabs

Builder中包含上半边图片和下半边文本还有角标，其中角标是必不可少的，由于我们是自己创建的组件所以没有默认的选择高亮，他的作用是用于我们在选择导航时提供高亮对应。是作为黑马健康APP的首页，最下方是一个导航栏可以快速的切换内容，所以采用tabs的组件实现这个主页部分。由于我们的导航栏中系统自带的样式比较单一所以我们采用Builder来自己创建一个样式。在一个Tabs组件内有三个页面所以有三对tabContent，tabBar。Text('发现页面')Text('我的主页')首先构思这样一个页面。

2024-06-25 18:07:07 711

原创黑马健康项目（二）欢迎页面业务

业务逻辑先是考虑用户隐私协议，要使用持久化所以考虑使用加载首选项，整体的一个思路是，进入欢迎页面，加载首选项是否同意用户隐私协议，同意就直接进入应用程序，不同意就弹出用户隐私协议的窗口再次询问是否同意，是的话就保存首选项以便再次进入时无需选择直接进入应用程序，不同意就直接退出APP，这就是整体的一个业务逻辑。先是加载首选项，一上来是返回false表示不同意隐私协议弹出窗口，让用户进行选择，同意就调用jumpToIndex()跳转到首页不同意就调用onConfirm()自定义弹窗组件弹窗。

2024-06-25 18:06:55 895

原创黑马健康项目（一）欢迎页面UI实现

这部分是整个的欢迎页面的代码，自上而下就是和开始的构思一样，column中两个image接三个text，再有细节部分的布局位置和属性颜色大小这部分要说的呢是三行text的第一行“黑马健康支持IPV6网络”，由于IPV6这一字段有一个边框所以要分成三部分组合到一起。Text('黑马健康支持').opacityWhiteText(0.8, 12)Text('网络').opacityWhiteText(0.8, 12)Text('黑马健康支持').opacityWhiteText(0.8, 12)

2024-06-25 18:06:39 813

wananzzz的博客