一、前言:
本文演示用HarmonyOS的ArkUI来开发首页界面内的记录列表。
通过List()以及Column()来进行布局,使其更加美观。
二、记录列表部分
初步我们设计了一个效果图,如图所示
看着内容很多,但是每一块都一样,只是出来内容不一样。这样我们就先做一个版块,其他进行修改就可以了。
首先定义头部,它有一个返回按钮和所对应的吃饭的时间点,对其我们进行一个封装,还是用Row容器括起来,添加一个返回图片,为其添加一个点击事件-.onClick(() => router.back()让其返回就可以了。用Blank组件将其隔开,使用一个Text文本组件输出相应内容就可以了。
参考代码如下:
@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)
}
对下方的导航,这里还是运用到了Tabs :通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。TabContent
仅在Tabs中使用,对应一个切换页签的内容视图。用该组件就能实现各个视图了。
在其内部添加相应内容就可以了:我们将视图内部的内容封装起来,这样方便使用,也更加美观。还是通过列表来进行显示,通过Foreach组件循环显示不同的食物介绍。这样在每个视图中调用就可以了,后期修改也更加快捷。
import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct ItemList {
build() {
Tabs() {
TabContent() {
this.TabContentBuilder()
}
.tabBar('全部')
TabContent() {
this.TabContentBuilder()
}
.tabBar('主食')
TabContent() {
this.TabContentBuilder()
}
.tabBar('果蔬')
TabContent() {
this.TabContentBuilder()
}
.tabBar('肉类')
TabContent() {
this.TabContentBuilder()
}
.tabBar('坚果')
}
.width(CommonConstants.THOUSANDTH_940)
.height('100%')
}
@Builder TabContentBuilder() {
List({ space: CommonConstants.SPACE_10 }) {
ForEach([1,2,3,4,5,6], (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').fontSize(14).fontColor($r('app.color.light_gray'))
}
Blank()
Column() {
Image($r('app.media.ic_public_add_norm_filled'))
.width(20)
.fillColor($r('app.color.primary_color'))
Text('91千卡').fontSize(14).fontColor($r('app.color.light_gray'))
}
}
.width('100%')
.padding(CommonConstants.SPACE_6)
}
})
}
.width('100%')
.height('100%')
}
}
食物列表首页参考代码:
import router from '@ohos.router'
import { CommonConstants } from '../common/constants/CommonConstants'
import ItemList from '../view/item/ItemList'
@Entry
@Component
struct FoodIndex {
build() {
Column() {
// 1.头部导航
this.Header()
// 2.列表
ItemList()
.layoutWeight(1)
}
.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)
}
}
这样我们就完成了食品列表部分的功能开发。
三、我的主页部分
通过简单的UI组件Text:文本组件, TextInput:文本框组件, Image:图片组件设计了一个我的主页;效果如下:
参考代码如下:
@Component
export default struct MyZhu {
@State times: string=`记住我`
build() {
Column({space:15}){
Row() {
Image(`https://c-ssl.dtstatic.com/uploads/blog/202104/02/20210402200403_1e37e.thumb.1000_0.jpeg`)
.width(50)
.height(50)
.margin({ top: 50, bottom: 20 ,right:10})
Text('张三')
.fontWeight(FontWeight.Bold)
.fontSize(25)
}
.margin({left:-150})
Text('职业:学生')
.margin({left:-150})
TextInput({placeholder:'个人简介'})
.maxLength(200)
.width('94%')
.height(200)
}
.width('100%')
.height('100%')
}
}
这样基本就完成了该小程序的开发。