一、工作主要介绍
今天的工作重点在于两个关键任务:一是精心设计应用首页的页面布局,使其既符合美学标准,又满足用户的实际使用需求;二是对应用首页顶部的搜索栏进行功能设计和实现,以增强用户查找信息的便捷性和效率。
二、运行效果及主要设计思路的介绍
首先来向大家展示一下我所做的页面的最终效果图吧!
初始化的页面构思布局如下图所示:
总体上,我的设计方案是利用一个主列容器(Column)来嵌套三个行容器(Row),以此来创建三个可选项的滑动页面。我使用了一种新的组件——Tab,这种组件类似于容器,它负责确定首页导航栏与主体页面之间的布局关系。同时,从上图中可以观察到,首页顶部的搜索栏被划分为两个功能区:一个是用于搜索的搜索框(search bar),另一个是邮件图标。
三、设计过程中遇到的一些问题
关于页面布局的Tab组件:
这是一种全新的组件类型,它提供了两种基本的布局选项:一种是将导航栏置于顶部,主体内容置于底部;另一种则是将主体内容置于顶部,导航栏置于底部。起初,我对于如何在APPY中实现导航栏在底部、主题页面在顶部的布局感到困惑。但通过研究API文档和教学视频,我得知使用Tab组件可以轻松实现。Tab组件的导航栏默认只显示文本,但为了达到APP中带有图标和下标的导航栏效果,需要进行自定义设置。自定义导航栏需要指定三个关键参数:标题、图片和下标,从而确立页面的整体布局。
四、实验代码
首页页面布局:
import { CommonConstants } from '../common/constants/CommonConstants'
import RecordIndex from '../view/record/RecordIndex'
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
@Builder tabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){
Column({space:CommonConstants.SPACE_8}){
Image(image)
.width(22)
Text(title)
.fontSize(14)
}
}
build() {
Tabs({barPosition: BarPosition.End}) {
TabContent(){
RecordIndex()
}
.tabBar(this.tabBarBuilder($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))
TabContent(){
Text('发现页面')
}
.tabBar($r('app.string.tab_discover'))
.tabBar(this.tabBarBuilder($r('app.string.tab_discover'),$r('app.media.discover'),1))
TabContent(){
Text('我的主页')
}
.tabBar(this.tabBarBuilder($r('app.string.tab_user'),$r('app.media.ic_user_portrait'),2))
}
.width('100%')
.height('100%')
}
}
头部搜索栏:
import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct SearchHeader {
build() {
Row({space:CommonConstants.SPACE_6}){
Search({placeholder:'搜索饮食或运动信息'})
.textFont({size:18})
.layoutWeight(1)
Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:12}}){
Image($r('app.media.ic_public_email'))
.width (24)
}
}
.width(CommonConstants.THOUSANDTH_940)
}
}
五、小结
这次实验不仅让我对鸿蒙应用开发中的Tab和Badge两个重要组件有了更深入的了解,还让我学习到了大量有关页面布局的知识。这些新知识极大地丰富了我的专业技能,并为我带来了宝贵的学习经验。