赞
踩
将页面主体拆为三部分,如图所示:
@Component
export struct MTTopView {
build() {
Row() {
Text('top')
.width('100%')
.textAlign(TextAlign.Center)
}
.height(52)
.width('100%')
.backgroundColor(Color.White)
}
}
主内容区view:
@Component
export struct MTContentView {
build() {
Row() {
Text('content')
.width('100%')
.textAlign(TextAlign.Center)
}
.height('100%')
.width('100%')
.backgroundColor(Color.Gray)
}
}
@Component
export struct MTBottomView {
build() {
Column() {
Text('bottom')
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}
.height(52)
.width('80%')
.margin({ bottom: 20 })
.backgroundColor(Color.Red)
}
}
预览如下:
@Component export struct MTBottomView { build() { Row() { // 小哥+角标 Badge({ value: '0', style: { badgeSize: 18 }, position: BadgePosition.Right }) { Image($r('app.media.ic_public_cart')) .height(69) .width(47) .position({ y: -20 }) } .margin({ left: 28, right: 12 }) // 金额+描述 Column() { Text() { Span('¥') .fontColor(Color.White) .fontSize(12) Span('0.00') .fontColor(Color.White) .fontSize(25) } Text('预估另需配送费¥5') .fontColor($r('app.color.search_font_color')) .fontSize(12) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) // 去结算 Text('去结算') .width(80) .height(50) .fontSize(16) .backgroundColor($r('app.color.main_color')) .textAlign(TextAlign.Center) .borderRadius({ topRight: 25, bottomRight: 25 }) } .height(50) .width('88%') .margin({ bottom: 20 }) .backgroundColor(Color.Black) .borderRadius(26) } }
@Component export struct MTTopView { @Builder NavItem(active: boolean, title: string, subTitle?: string) { Column() { Text() { Span(title) if (subTitle) { Span(' ' + subTitle) .fontSize(10) .fontColor(active ? $r("app.color.black") : $r("app.color.un_select_color")) } }.layoutWeight(1) .fontColor(active ? $r("app.color.black") : $r("app.color.un_select_color")) .fontWeight(active ? FontWeight.Bold : FontWeight.Normal) Text() .height(2) .width(20) .margin({ left: 6 }) .backgroundColor(active ? $r("app.color.select_border_color") : 'transparent') } .width(73) .alignItems(HorizontalAlign.Start) .padding({ top: 3 }) } build() { Row() { this.NavItem(true, '点菜') this.NavItem(false, '评价', '1796') this.NavItem(false, '商家') Row() { Image($r('app.media.ic_public_search')) .width(14) .aspectRatio(1) .fillColor($r("app.color.search_font_color")) TextInput({ placeholder: '请输入' }) .fontSize(12) .placeholderFont({ size: 12 }) .fontColor($r("app.color.search_back_color")) .backgroundColor(Color.Transparent) } .backgroundColor($r("app.color.search_back_color")) .height(28) .borderRadius(13) .padding({ left: 5, right: 5 }) .layoutWeight(1) } .padding({ left: 15, right: 15 }) .height(40) .border({ width: { bottom: 0.5 }, color: $r("app.color.top_border_color") }) } }
@Component export struct MTContentView { categoryList: string[] = ['一人套餐', '特色烧烤', '杂粮主食'] @State categoryIndex: number = 0 build() { Row() { // 左侧分类 Column() { ForEach(this.categoryList, (item: string, index: number) => { Text(item) .height(50) .width('100%') .textAlign(TextAlign.Center) .backgroundColor(this.categoryIndex === index ? Color.White : '#F6F6F6') .onClick(() => { this.categoryIndex = index }) }) } .width(100) .backgroundColor('#F6F6F6') .height('100%') // 右侧食品列表 } }
@Preview @Component export struct MTFoodItem { build() { Row() { Image('https://images.tmtpost.com/uploads/images/2022/09/c0de0f8e1051beb409d189a7283a3ccd_1664523457.jpeg?imageMogr2/auto-orient/strip/interlace/1/quality/85/thumbnail/1400x933/gravity/center/crop/!1400x933&ext=.jpeg') .width(90) .aspectRatio(1) Column({ space: 5 }) { Text('小份酸汤莜面鱼鱼+肉夹馍套餐') .textOverflow({ overflow: TextOverflow.Ellipsis, }) .maxLines(2) .fontWeight(600) Text('酸汤莜面鱼鱼,主料:酸汤、莜面 肉夹馍,主料:白皮饼、猪肉') .textOverflow({ overflow: TextOverflow.Ellipsis, }) .maxLines(1) .fontSize(12) .fontColor($r("app.color.food_item_second_color")) Text('点评网友推荐') .fontSize(10) .backgroundColor($r("app.color.food_item_label_color")) .fontColor($r("app.color.font_main_color")) .padding({ top: 2, bottom: 2, right: 5, left: 5 }) .borderRadius(2) Text() { Span('月销售40') Span(' ') Span('好评度100%') } .fontSize(12) .fontColor($r("app.color.black")) Row() { Text() { Span('¥ ') .fontColor($r("app.color.font_main_color")) .fontSize(10) Span('34.23') .fontColor($r("app.color.font_main_color")) .fontWeight(FontWeight.Bold) } } .justifyContent(FlexAlign.SpaceBetween) .width('100%') } .layoutWeight(1) .alignItems(HorizontalAlign.Start) .padding({ left: 10, right: 10 }) } .padding(10) .alignItems(VerticalAlign.Top) .backgroundColor(Color.White) } }
import { MTFoodItem } from './MTFoodItem' @Component export struct MTContentView { categoryList: string[] = ['一人套餐', '特色烧烤', '杂粮主食'] @State categoryIndex: number = 0 build() { Row() { // 左侧分类 ... // 右侧食品列表 List() { ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (item: number) => { ListItem() { MTFoodItem() } }) } .layoutWeight(1) } .height('100%') .width('100%') } }
import { MTBottomView } from './components/MTBottomView' import { MTContentView } from './components/MTContentView' import { MTTopView } from './components/MTTopView' @Entry @Component struct MeiTuanPage { build() { Column() { Stack({ alignContent: Alignment.Bottom }) { Column() { MTTopView() MTContentView() } .width('100%') .height('100%') .padding({bottom:120}) MTBottomView() } } .width('100%') .height('100%') .backgroundColor('#F6F6F6') } }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。