鸿蒙期末个人项目-黑马健康——项目阶段八：发现页面和我的页面UI界面以及 ...

目录

项目介绍：
页面布局：
分析：
发现页面UI设计：
我的页面UI设计：
登录页面UI设计：
健康信息页面UI设计：
页面实现效果：
出现的问题与办理：
阶段项目代码：
发现页面代码：
 我的页面代码：
登录页面代码：
健康信息页面代码：

---

项目介绍：

黑马健康软件是一款基于全民健康的软件，重要有三个页面构成，分别是欢迎页面，统计记录页面，食物列表页面。
页面布局：

分析：

发现页面UI设计：

• 总体是一个列式布局，第一行是一有两个文本组件构成，第二行是由list组件构成的一个水平滑动样式，第三行是有两个文本构成，最后是由list组件渲染的列式布局样式
  

我的页面UI设计：

• 总体是列式布局，第一行是有两个Image组件构成，此中一个是之前在食物列表页面用到的消息的渲染效果，另一个是一个设置按钮，点击按钮之后，会弹出一个panel弹窗，在这里可以点击换字体大小，实现全局变化字体大小的效果，并实现用户持久化；第二行是一个有Image组件和Text组件渲染的用户登录的样式，点击后，可以跳转到用户登录注册的界面（这里只实现了用户的登录），输入信息后，点击“登录”按钮，即可跳转回顾页，而且输入的账号等登录乐成的信息也会传递返来，而且重新进行登录注册组件的渲染。第三行是一个关于健康数据的组件，由Image组件和Text组件构成，点击后可以跳转到健康数据页面。最后一行是由List组件循环渲染的应用功能的组件。
  

登录页面UI设计：

• 登录页面是一个列式布局，第一行是由Image组件构成的登录标识，第二行是一个文本组件，第三行和四行分别是输入的用户名和密码，最后一行是登录和注册的按钮；
  

健康信息页面UI设计：

• 总体是列式布局，首部是有两个Image组件构成，此中一个是退出此页面，返回主页面的退回图片，下面的部分是由一个网格Grid组件构成的，用ForEach循环渲染健康信息。
  

页面实现效果：

出现的问题与办理：

• 当不给这一行设定宽度的时间，Blank()组件是不起作用的
  

分配宽度之后：

• 调用子组件时一直报错，但是不妨碍功能的利用，图片能正常加载
  

实行了很多遍，官方论坛里看还是没有办理
办理方式就是关闭编译器重新打开，不报错了

• 发现页面的主题推荐，加载不出图片和文字资源。查抄之后，发现是构造函数的赋值错误
  

改动之后：图片资源和文字资源精确加载

• 如果利用@Consume和@Provide来传递数据，只能在父子组件之间进行传递，不能在同一品级之间传递
  
• 出现了运行时异常，在main_pages.json配置的必须是一个页面，带有@entry装饰器
  

•  这里click利用的装饰器是@link，就不能利用 this. 去传递参数，应该利用$传递参数
  

• 当未登录是不能获取到页面跳转所传递过来的值，加上条件判断，等点击登录按钮，而且传递过来当界说的@State修饰的状态变量仍是false的时间才获取数据否则不会获取数据，而且将这两个变量实现持久化。 出现的问题仍旧如下：
  

但是经过console.log后发现数据都传递过来了，

但是在用户登录的界面偶尔渲染不上，（那种感觉似乎是页面渲染和数据的传递在竞速）而且出现了一些bug，就是当实现登录后，点击退出，再次进入该应用时，就会发生一些运行时异常，直接卡退。
经过重新的梳理分析，发如今页面跳转获取数据时有逻辑上的问题，很可能没有执行登录，就去获取登录页面穿过来的值，这样就会导致卡退。办理办法就是利用一些状态参数来控制传值，当点击登录而且登录乐成时，才会去获取数据，进行数据传递和页面的渲染，在登录乐成之后，就会将背面页面渲染所要用到的数据实现持久化处理，而且状态参数也会实现持久化处理。

阶段项目代码：

发现页面代码：

2. import { CommonConstants } from '../../common/constants/CommonConstants'
3. import FunctionList from './FunctionList'
4. import RecommendTheme from './RecommendTheme'
5. import ThemeInfo from './ThemeInfo'
8. /**
9. * 发现页面
10. */
11. @Component
12. export default struct FindPage {
13.   @Consume fontSize:number
14.   build() {
16.     Column({ space: CommonConstants.SPACE_8 }) {
17.       // 1.推荐主题
18.       Row() {
19.         Text('推荐主题')
20.           .fontWeight(CommonConstants.FONT_WEIGHT_700)
21.           .fontSize(this.fontSize+4)
22.         Blank()
23.         Text('更多')
24.       }
25.       .width(CommonConstants.THOUSANDTH_940)
26.       .margin({ top: 10, bottom: 10 })
28.       // 2.主题展示
29.       Row({space:CommonConstants.SPACE_4}){
30.         RecommendTheme()
31.       }
32.       .backgroundColor(Color.White)
33.       .width(CommonConstants.THOUSANDTH_940)
34.       .height(210)
35.       .borderRadius(CommonConstants.DEFAULT_18)
36.       .justifyContent(FlexAlign.SpaceEvenly)
37.       .margin({ bottom: 10 })
40.       // 3.功能管理
41.       Row() {
42.         Text('功能管理')
43.           .fontWeight(CommonConstants.FONT_WEIGHT_700)
44.           .fontSize(this.fontSize+4)
45.         Blank()
46.         Image($r('app.media.sort'))
47.           .width(18)
49.       }
50.       .width(CommonConstants.THOUSANDTH_940)
51.       .margin({ top: 10, bottom: 10 })
53.       // 4.功能列表
54.       FunctionList()
55.         .layoutWeight(1)
56.         .margin({left:5})
58.    }
59.     .width('100%')
60.     .height('100%')
61.     .backgroundColor($r('app.color.index_page_background'))
63.   }
64. }

复制代码

1. import { CommonConstants } from '../../common/constants/CommonConstants'
2. import ThemeInfo from './ThemeInfo'
4. @Component
5. export default struct RecommendTheme {
7.    themeList: Array<ThemeInfo> = [
8.     new ThemeInfo('绿泡泡', $r('app.media.background_green')),
9.     new ThemeInfo('粉色回忆', $r('app.media.background_pink')),
10.     new ThemeInfo('色彩碰撞', $r('app.media.background_color')),
11.     new ThemeInfo('清凉一夏', $r('app.media.bacground_color2')),
12.     new ThemeInfo('黑夜骑士', $r('app.media.background_color3')),
13.     new ThemeInfo('甜美西瓜', $r('app.media.background_color4')),
14.     new ThemeInfo('璀璨星河', $r('app.media.background_color5')),
15.   ]
16.   build() {
17.     List(){
18.       ForEach(this.themeList,(item:ThemeInfo)=>{
19.         ListItem(){
20.           Column({space:CommonConstants.SPACE_4}){
21.             Image(item.images)
22.               .width(120)
23.               .aspectRatio(0.7)
24.               .borderRadius(CommonConstants.DEFAULT_18)
25.               .shadow({radius: 6, color:'#000000',offsetX:4,offsetY:4})
26.             Text(item.name)
27.               .fontWeight(20)
29.           }
30.         }.margin({left:7,right:5,top:10})
33.       })
34.     }.listDirection(Axis.Horizontal)//图片水平摆放
35.   }
36. }

复制代码

1. import { CommonConstants } from '../../common/constants/CommonConstants'
2. import ThemeInfo from './ThemeInfo'
3. @Component
4. export default struct  FunctionList{
5.   @Consume fontSize:number
6.   themeList: Array<ThemeInfo> = [
7.     new ThemeInfo('消息通知', $r('app.media.fun_1')),
8.     new ThemeInfo('闹钟', $r('app.media.fun_2')),
9.     new ThemeInfo('名片', $r('app.media.fun_3')),
10.     new ThemeInfo('查找设备', $r('app.media.fun_4')),
11.     new ThemeInfo('遥控拍照', $r('app.media.fun_5')),
12.     new ThemeInfo('天气推送', $r('app.media.fun_6')),
13.     new ThemeInfo('音乐', $r('app.media.fun_7')),
14.     new ThemeInfo('常用联系人', $r('app.media.fun_8')),
15.     new ThemeInfo('健康提醒', $r('app.media.fun_9')),
16.     new ThemeInfo('其他功能', $r('app.media.fun_10')),
17.   ]
18.   build() {
19.     List(){
20.       ForEach(this.themeList,(item:ThemeInfo)=>{
21.         ListItem(){
22.           Row({space:CommonConstants.SPACE_8}){
23.             Image(item.images)
24.               .width(35)
25.               .height(35)
26.               .margin({left:7,right:15})
28.               .borderRadius(CommonConstants.DEFAULT_18)
29.               // .shadow({radius: 6, color:'#000000',offsetX:4,offsetY:4})
30.             Text(item.name)
31.               .fontWeight(26)
32.               .fontSize(this.fontSize-2)
35.           }
36.           .padding(8)
37.           .backgroundColor(Color.White)
38.           .borderRadius(CommonConstants.DEFAULT_18)
39.           .width(CommonConstants.THOUSANDTH_940)
40.           .height(50)
41.         }.margin({left:12,right:5,top:2,bottom:8})
42.       })
43.     }
44.   }
45. }

复制代码

 我的页面代码：

2. import router from '@ohos.router'
3. import preferences from '@ohos.data.preferences'
4. import { CommonConstants } from '../../common/constants/CommonConstants'
5. import ChangePanel from '../../viewmodel/ChangePanel'
6. import AppSetting from './AppSetting'
7. import MyPageHeader from './MyPageHeader'
8. import preferencesUtil from '../../common/utils/preferencesUtil'
10. /**
11. * 我的页面
12. */
14. @Component
15. export default struct MyPage {
16.    days:number = 1
18.   @Consume showPanel:number
19.   @Consume fontSize:number
20.   @Prop username:string
21.   @Prop hasLogin:boolean
22.   @Link clickLogin:boolean
23.   @State user_name:string = '用户请登录'
24.   @State welcome_use:string = '请注册/登录使用~'
27.   build() {
29.     Column({space:CommonConstants.SPACE_8}){
30.       // 1.我的页面首部
31.       MyPageHeader()
33.       // 2.用户的登录注册
34.         Row(){
36.           if(!this.hasLogin){
37.             Image($r('app.media.entry'))
38.               .width(70)
39.               .fillColor(Color.Red)
40.               .margin({right:10})
41.           }else{
42.             Image($r('app.media.user_img'))
43.               .width(70)
45.               .margin({right:10})
46.           }
49.           Column(){
50.             if(this.hasLogin){
52.               Text('ID:  '+this.username)
53.                 .fontWeight(CommonConstants.FONT_WEIGHT_600)
54.                 .fontColor(Color.Red)
55.                 .fontSize(this.fontSize+4)
57.               Text('欢迎使用黑马健康！')
58.                 .fontColor($r('app.color.light_gray'))
59.                 .fontSize(this.fontSize-2)
60.             }else{
61.               Text(this.user_name)
62.                 .fontWeight(CommonConstants.FONT_WEIGHT_600)
63.                 .fontColor(Color.Red)
64.                 .fontSize(this.fontSize+4)
66.               Text(this.welcome_use)
67.                 .fontColor($r('app.color.light_gray'))
68.                 .fontSize(this.fontSize-2)
69.             }
71.           }
72.         }
73.         .padding(10)
74.         .height('100')
75.         .width(CommonConstants.THOUSANDTH_940)
76.         .justifyContent(FlexAlign.Start)
77.         .margin({bottom:13,top:6})
78.         .backgroundColor($r('app.color.White_Color'))
79.         .borderRadius(CommonConstants.DEFAULT_10)
80.         .onClick(()=>{
81.           //当点击登录时，首先将this.clickLogin ，this.hasLogin的状态写进首选项
82.           console.log('成功点击登录'+'testTag')
83.           this.clickLogin = true
84.           preferencesUtil.putPreferenceValue('UserLoginInfo','clickVictoryInfo',this.clickLogin)
85.           this.hasLogin = false
86.           preferencesUtil.putPreferenceValue('HasLogin','HasLoginInfo',this.hasLogin)
87.           router.pushUrl({
88.                 url:'pages/LoginPage'
89.           })
91.         })
92.         // 3.健康使用
93.         // 覆盖的功能
94.       Row({space:CommonConstants.SPACE_8}){
95.         Column({space:CommonConstants.SPACE_8}){
96.           //您已健康使用多少天？点击查看健康数据
97.           Text(`您已健康使用 ${this.days} 天`)
98.             .fontSize(this.fontSize+4)
99.             .fontWeight(CommonConstants.FONT_WEIGHT_600)
100.             .fontColor(Color.White)
101.           Text('点击查看您的健康信息')
102.             .fontSize(this.fontSize-2)
103.             .fontColor(Color.White)
104.         }
105.         Blank()
106.        Image($r('app.media.healthInfo'))
107.          .width(60)
110.       }
111.       .padding(10)
112.       .width(CommonConstants.THOUSANDTH_940)
113.       .height(80)
114.       .backgroundColor($r('app.color.primary_color'))
115.       .borderRadius(CommonConstants.DEFAULT_18)
116.       .shadow({radius: 6, color:'#000000',offsetX:7,offsetY:10})
117.       .onClick(()=>{
118.         router.pushUrl({
119.           url:'pages/HealthStatisticPage'
120.         })
121.       })
123.       //VIP设置
124.       Row({space:CommonConstants.SPACE_8}){
125.         Column({space:CommonConstants.SPACE_8}){
126.           Text('升级VIP享更多专属权限')
127.             .fontSize(this.fontSize+2)
128.             .fontWeight(CommonConstants.FONT_WEIGHT_600)
129.             .fontColor(Color.White)
130.           Text('升级VIP享更多专属权限')
131.             .fontSize(this.fontSize-2)
132.             .fontColor(Color.White)
133.         }
134.         Blank()
135.         Button('去升级')
136.           .type(ButtonType.Capsule)
137.           .fontColor($r('app.color.primary_color'))
138.           .backgroundColor(Color.White)
140.       }
141.       .padding(10)
142.       .width(CommonConstants.THOUSANDTH_940)
143.       .height(80)
144.       .backgroundColor($r('app.color.primary_color'))
145.       .borderRadius(CommonConstants.DEFAULT_18)
146.       .shadow({radius: 6, color:'#000000',offsetX:7,offsetY:10})
148.       // 4.应用的设置等
149.         AppSetting()
150.           .layoutWeight(1)
152.       if(this.showPanel===1){
153.         ChangePanel()
154.           .transition({
155.             translate: { y: 115 }
156.           })
157.           .layoutWeight(1)
158.       }
162.     }
163.     .width('100%')
164.     .height('100%')
165.     .backgroundColor($r('app.color.index_page_background'))
166.   }
167. }

复制代码

1. import { CommonConstants } from '../../common/constants/CommonConstants'
3. @Component
4. export default struct MyPageHeader {
5.   @Consume showPanel:number
8.   build() {
9.     Column(){
10.       // 1.设置按钮和信息
11.       Row({space:CommonConstants.SPACE_10}){
12.         Blank()
13.         Image($r('app.media.setting')).width(28).margin({right:10})
14.           .onClick(()=>{
15.             this.showPanel = -this.showPanel
16.             console.log("弹窗显示成功",'testTag')
17.           })
18.         Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:12}}){
20.           Image($r('app.media.ic_public_email'))
21.             .width(28)
22.         }
24.       }
25.       .width(350)
26.       .margin({top:7})
27.       .height(30)
28.     }
30.   }
31. }

复制代码

登录页面代码：

2. import router from '@ohos.router'
3. import prompt from '@ohos.prompt'
4. import { CommonConstants } from '../common/constants/CommonConstants'
5. import preferencesUtil from '../common/utils/preferencesUtil'
7. @Entry
8. @Component
9. struct LoginPage {
10.   @State username:string = ''
11.   @State password:string = ''
12.   @State hasLogin:boolean = false
15.   build() {
16.    
17.       Image($r('app.media.login_img'))
18.         .width(60)
19.         .margin({top:160,bottom:10})
20.       Text('欢迎登录')
21.         .fontWeight(CommonConstants.FONT_WEIGHT_600)
22.         .fontSize(30)
23.       Row(){
24.         Text('用户名：').fontWeight(CommonConstants.FONT_WEIGHT_600).fontSize(18)
25.         TextInput({placeholder:'请输入用户名：'})
26.           .margin({top:20,bottom:15})
27.           .width(250)
28.           .height(40)
29.           .fontColor(Color.Blue)
30.           .onChange((value:string)=>{
31.             this.username = value
32.           })
33.         }.width(300)
35.       Row(){
36.         Text('密   码：').fontWeight(CommonConstants.FONT_WEIGHT_600).fontSize(18)
37.         TextInput({placeholder:'请输入密码：'})
38.           .type(InputType.Password)
39.           .width(250)
40.           .height(40)
41.           .fontColor(Color.Blue)
42.           .onChange((value:string)=>{
43.             this.password = value
44.           })
45.       }.width(300)
46.       Row({space:CommonConstants.SPACE_12}){
47.         Button('登录')
48.           .type(ButtonType.Capsule)
49.           .fontSize(18)
50.           .backgroundColor($r('app.color.primary_color'))
51.           .onClick(()=>{
53.             // router.back()
54.             //如果输入的用户名或者密码为空，则提示
55.             if(this.username==='' || this.password ===''){
56.               //登录失败
58.               prompt.showToast({
59.                 message:"账号和密码均不可以为空！"
60.               })
61.             }else{
62.               //登录成功
63.               this.hasLogin = true
64.               console.log('hasLogin:'+this.hasLogin.toString()+'testTag')
65.               console.log('username:'+this.username.toString()+'testTag')
66.               //将已经登录成功的信息写入首选项
67.               preferencesUtil.putPreferenceValue('HasLogin','HasLoginInfo',this.hasLogin)
69.               router.replaceUrl({
70.                 url:'pages/Index',
71.                 params:{
72.                   username:this.username,
73.                 }
74.               })
76.             }
79.           })
80.         Button('注册')
81.           .type(ButtonType.Capsule)
82.           .fontSize(18)
83.           .backgroundColor($r('app.color.light_gray'))
86.       }.margin({top:30})
88.     }
89.     .backgroundColor($r('app.color.index_page_background'))
90.     .height('100%')
91.     .width('100%')
92.   }
94. }

复制代码

健康信息页面代码：

1. import router from '@ohos.router'
2. import { CommonConstants } from '../common/constants/CommonConstants'
3. import preferencesUtil from '../common/utils/preferencesUtil'
4. import HealthComponent from '../view/health/HealthComponent'
5. @Entry
6. @Component
7. struct HealthStatisticPage {
8.   @State hasLogin:boolean = false
9.   async aboutToAppear(){
10.     //将登录成功的值从用户首选项中取出来
11.     this.hasLogin = await preferencesUtil.getPreferenceValue('HasLogin','HasLoginInfo',false) as boolean
12.   }
13.   build() {
15.     Column({space:CommonConstants.SPACE_10}){
16.       Row({space:CommonConstants.SPACE_10}){
17.         Image($r('app.media.ic_public_back')).width(40)
18.           .onClick(()=>{
19.             router.back()
20.           })
21.         Text('健康').fontSize(20)
22.         Blank()
23.         if(this.hasLogin){
24.           Image($r('app.media.user_img')).width(40)
25.         }else{
26.           Image($r('app.media.entry')).width(40)
27.         }
28.       }
29.       .width(CommonConstants.THOUSANDTH_940)
30.       .margin({top:10})
31.       //网格记录项，祥康组件
32.       HealthComponent()
33.             .layoutWeight(1)
35.     }.width('100%')
36.     .height('100%')
37.     .backgroundColor($r('app.color.index_page_background'))
38.   }
39. }

复制代码

参考黑马课堂老师的讲解，欢迎大家的批评和指正。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。