四,食物列表
1,食物列表页
(1).实现效果图
(2).实现原理
列式布局的表单设计中,顶部设有导航栏,用于快速切换不同的页面。每个页面由多个卡片组成,卡片内包含文本、图片和按钮等元素。由于需要根据导航栏上不同的导航项显示相应的页面内容,因此可以采用之前文章中提到的Tabs组件来实现这一功能。而页面中的多个卡片,则可以通过List组件来动态渲染和展示。
具体来说,表单的布局可以这样设计:
1. **导航栏**:位于表单的最上方,包含多个导航项,用户点击不同的导航项时,页面会展示相应的内容。
2. **Tabs组件**:利用Tabs组件来实现页面内容的快速切换。每个Tabs页签对应一个页面,用户可以通过点击不同的页签来查看不同的信息。
3. **卡片布局**:每个页面由多个卡片组成,每个卡片内包含必要的文本、图片和按钮等元素。卡片可以设计为具有吸引力的样式,以提高用户的阅读体验。
4. **List组件**:使用List组件来渲染页面中的卡片列表。List组件可以根据数据动态生成卡片,实现数据的高效展示。
通过这样的设计,表单不仅能够提供清晰的导航和页面切换功能,还能通过卡片和List组件的结合,实现内容丰富、布局合理的展示效果。
(3).itemList.ets和ItemIndex.ets部分代码
import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct itemList {
showPanel: () => void
build() {
Tabs() {
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,7,8], (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('91千卡/1片').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%')
}
}
Panel(this.showPanel) {
Button('关闭')
.onClick(()=>this.showPanel = false)
}
.mode(PanelMode.Full)//全部显示
.backgroundMask($r('app.color.light_gray'))//蒙版颜色浅灰
.backgroundColor(Color.White)//背景颜色
2,底部Panel
(1).实现效果图
(2).实现原理
实现一个食物列表的底部Panel面板,包括布局分析、关键技术使用、以及具体的开发步骤。
-
布局分析:
- 整个Panel面板采用的是列式布局,其中每个元素是行式布局,即多个row在一个column里。
- 面板从上到下包括:文本加按钮小图标、图片、文本、食物详细信息、带下划线的文本、自制键盘和两个按钮。
-
Panel组件:
- Panel组件是一个可滑动的面板,用于轻量级内容展示,方便在不同尺寸中切换。
- API文档强调Panel容器和内元素的高度必须是固定的。
- 提供了Panel组件的属性和参数,包括显示控制、模式设置、拖动条存在性、高度设置、背景蒙层颜色等。
-
面板内容:
- 头部日期文本加弹窗:新建组件提高代码可读性。
- 食物信息:定义组件展示食物的图片、名称、营养素信息和数量。
(3).对应代码
import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct ItemCard {
@Prop amount: number
build() {
Column({space: CommonConstants.SPACE_8}){
// 1.图片
Image($r('app.media.toast')).width(150)
// 2.名称
Row(){
Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_700)
}
.backgroundColor($r('app.color.lightest_primary_color'))
.padding({top: 5, bottom: 5, left: 12, right: 12})
Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)//下划线
// 3.营养素
Row({space: CommonConstants.SPACE_8}){
this.NutrientInfo('热量',91.0)
this.NutrientInfo('热量',91.0)
this.NutrientInfo('热量',91.0)
this.NutrientInfo('热量',91.0)
}
Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)
// 4.数量
Row(){
Column({space: CommonConstants.SPACE_4}){
Text(this.amount.toFixed(1))
.fontSize(50).fontColor($r('app.color.primary_color'))
.fontWeight(CommonConstants.FONT_WEIGHT_600)
Divider().color($r('app.color.primary_color'))
}
.width(150)
Text('片')
.fontColor($r('app.color.light_gray'))
.fontWeight(CommonConstants.FONT_WEIGHT_600)
}
}
}
@Builder NutrientInfo(label: string, value: number){
Column({space: CommonConstants.SPACE_8}){
Text(label).fontSize(14).fontColor($r('app.color.light_gray'))
Text(value.toFixed(1)).fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
}
}
}