提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
一、饮食记录——记录列表
列表通过将相关信息分组并以有序或无序的方式展示,使得用户可以迅速识别和理解界面上的内容。这种结构化的呈现方式有助于减少用户的信息处理负担,使他们能够更轻松地找到所需的信息。
列表使用统一的格式和排版来展示信息,这种一致性有助于提高文本的可读性。用户可以通过扫描列表项来快速浏览内容,而无需逐字逐句地阅读。这种高效的阅读方式使得用户能够更快地获取所需信息。
同时其采用垂直堆叠的布局方式,这种布局可以充分利用有限的屏幕空间。相比于其他布局方式,列表能够在较小的区域内展示更多的信息,同时保持界面的整洁和有序。灵活的信息展示方式,可以根据需要轻松地添加、删除或修改列表项。
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)
}
}
二、食物列表页
通过在列表项中使用不同图标,用户可以清晰地看到信息的优先级或状态。这引导用户的注意力,使他们能够更快地关注到重要的内容。食物分成主食、果蔬、肉蛋奶等种类,有利于用户发现并添加需要的选项。
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%')
}
}
总结
在界面中添加列表具有诸多好处,这些好处不仅有助于提升用户体验和信息展示效率,还能增强应用的可用性和可访问性。因此,在设计界面时,应该充分考虑添加列表的必要性和优势。