第四章 精选页面和我的页面设计

---

前言

本次主要介绍精选页面和我的页面的设计思路。

---

一、精选页面

1.顶部设计

将顶部设计单分一块，在精选中使用import语句，构建Header()函数。

代码如下：

@Component
export struct Header{
  private title: ResourceStr
  build(){
    Row(){
      Image($r('app.media.ic_public_back'))
        .width(30)
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Blank()
      Image($r('app.media.ic_public_refresh'))
        .width(30)
    }
    .width('100%')
    .height(30)
  }
}

2.商品信息整合

精选界面有着多个商品的图片和价格信息，如果全都放在private items下写必然导致代码冗长，不易阅读，所以使用@Builder装饰器构建ItemCard()函数，用来定义和储存商品对象的各个信息。

代码如下：

@Builder function ItemCard(item: Item){
  Row({space: 10}){
    Image(item.image)
      .width(100)
    Column({space: 4}){
      if(item.discount){
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('原价：￥' + item.price)
          .fontColor('#CCC')
          .fontSize(14)
          .decoration({type: TextDecorationType.LineThrough})
        Text('折扣价：￥' + (item.price - item.discount))
          .priceText()
        Text('补贴：￥' + item.discount)
          .priceText()
      }
      else{
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('￥' + item.price)
          .priceText()
      }

    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%')
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)
}

精选页面整体代码：

class Item {
  name: string
  image: ResourceStr
  price: number
  discount: number

  constructor(name: string, image: ResourceStr, price: number, discount: number = 0) {
    this.name = name
    this.image = image
    this.price = price
    this.discount = discount
  }
}

import {Header} from './components/CommonComponents'

@Builder function ItemCard(item: Item){
  Row({space: 10}){
    Image(item.image)
      .width(100)
    Column({space: 4}){
      if(item.discount){
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('原价：￥' + item.price)
          .fontColor('#CCC')
          .fontSize(14)
          .decoration({type: TextDecorationType.LineThrough})
        Text('折扣价：￥' + (item.price - item.discount))
          .priceText()
        Text('补贴：￥' + item.discount)
          .priceText()
      }
      else{
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('￥' + item.price)
          .priceText()
      }

    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%')
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)
}

@Styles function fillScreen(){
  .width('100%')
  .height('100%')
  .backgroundColor('#EFEFEF')
  .padding(20)
}

@Extend(Text) function priceText(){
  .fontColor('#F36D')
  .fontSize(18)
}

@Component
export default struct Choice {
  //商品数据
  private items: Array<Item> = [
    new Item('华为Mate60', $r('app.media.mate60'),6999, 500),
    new Item('MateBookProX', $r('app.media.mateBookProX'),13999),
    new Item('WatchGT4', $r('app.media.watchGT4'),1438),
    new Item('FreeBuds Pro3', $r('app.media.freeBudsPro3'),1499),
    new Item('FreeBuds Pro3', $r('app.media.freeBudsPro3'),1499),
    new Item('Mate X5', $r('app.media.mateX5'),12999),
  ]

  build() {
    Column({ space: 8 }) {

      Header({ title: '商品列表' })
        .margin({ bottom: 20 })

      List({ space: 8 }) {
        ForEach(
          this.items,
          (item: Item) => {
            ListItem() {
              ItemCard(item)
            }
          }
        )
      }
      .width('100%')
      .layoutWeight(1)
    }
    .fillScreen()
  }
}

效果展示：

二、我的页面

1.退出登录页面路由

在我的页面下，添加退出登录按钮，实现由主页返回到登录页面，依旧使用@ohos.router进行操作。

代码如下：

        //退出登录
        Button('退出登录')
          .width('90%')
          .height(40)
          .fontSize(16)
          .backgroundColor('#e5e8ea')
          .fontColor(Color.Red)
          .margin({
            top: 30
          })
          .onClick(() => {
            //跳转
            router.pushUrl({
              url:'pages/LoginPage'  //跳转到登录
            }).catch((error:Error) => {
              //异常处理
            })
          })

2.用户信息模块

在我的页面顶部显示用户的部分信息和头像。

代码如下：

  build() {
    Row() {
      Image($r('app.media.ic_04'))
        .width(50)
        .height(50)
      Column(){
        Text('张三')
          .fontSize(20)
        Text('zhangsan123@qq.com')
          .fontSize(14)
          .margin({top: 5})
      }
      .alignItems(HorizontalAlign.Start)
      .margin({left: 15})
    }
    .alignItems(VerticalAlign.Center)
    .backgroundColor(Color.White)
    .width('100%')
    .height(100)
    .margin({
      top: 30,
      bottom: 12
    })
    .borderRadius(25)
    .padding({left: 20})
  }

3.用户菜单列表

用户菜单包括日常功能按键，使用Switch开关切换，提供开关的用户反馈。

  build() {
    List(){
      ForEach(this.listData, (item:ItemType) => {
        ListItem(){
          Row(){
            Row({space: 10}){
              Image(item.img)
                .width(22)
                .height(22)
              Text(item.title)
                .fontSize(16)
            }
            //开关组件
            //isOn 开关的打开或关闭状态 true打开
            Toggle({type:ToggleType.Switch, isOn:false})
              .onChange((isChange:Boolean) => {
                //isChange打开或关闭的状态
                let tip:string = isChange?'系统选项打开':'系统选项关闭'
                promptAction.showToast({
                  message:tip,
                  duration:3000
                })
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .padding(12)
        }
        .height(50)
      })
    }
    .width('100%')
    .backgroundColor(Color.White)
    .borderRadius(25)
    .padding({
      top: 5,
      bottom: 5
    })
    .divider({  //分割线
      color: '#dddd',
      strokeWidth: 1,
      startMargin: 46,  //分割线的开始的位置
      endMargin: 12
    })
  }

在其中注意到，使用 let rip 判断系统选项的开与关，并提供给用户信息反馈。

效果展示：

---

总结

这次完成了最后的代码设计，整体来说比较完善，但首页还有待改善，下一章将进行整个项目的具体总结。