HarmonyOS 鸿蒙Next 个人信息页demo

Index.ets

import { Mine } from './Mine'

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  private controller: TabsController = new TabsController()
  [@State](/user/State) currentIndex: number = 0

  [@Builder](/user/Builder)
  tabBuilder(index: number, img: Resource | string, name: string) {
    Column() {
      Image(img)
        .width(25)
        .height(25)
        .margin({ top: 4, bottom: 8 })
        .fillColor(this.currentIndex === index ? "#ff6089e3" : $r("sys.color.ohos_id_color_secondary"))
      Text(name)
        .fontSize(12)
        .fontColor(this.currentIndex === index ? "#ff6089e3" : $r('sys.color.ohos_id_color_text_secondary'))
    }
    .width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column() {
            Text("首页")
              .fontSize(16)
              .fontColor($r('sys.color.ohos_id_color_text_primary'))
          }
          .width('100%')
          .height('100%')
        }.tabBar(this.tabBuilder(0, $r('app.media.ic_public_home'), '待办'))

        TabContent() {
          Column() {
            Column() {
              Text("基础服务")
                .fontSize(16)
                .fontColor($r('sys.color.ohos_id_color_text_primary'))
            }
            .width('100%')
            .height(50)
            .justifyContent(FlexAlign.Center)

            Divider()
              .color($r('sys.color.ohos_id_color_list_separator'))

            Column() {

            }
            .width('100%')
            .height('100%')
            .layoutWeight(1)
            .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
          }
          .width('100%')
          .height('100%')
        }.tabBar(this.tabBuilder(1, $r('app.media.ic_public_highlight'), '基础服务'))

        TabContent() {
          Column() {
            Column() {
              Text("工作台")
                .fontSize(16)
                .fontColor($r('sys.color.ohos_id_color_text_primary'))
            }
            .width('100%')
            .height(50)
            .justifyContent(FlexAlign.Center)

            Divider()
              .color($r('sys.color.ohos_id_color_list_separator'))

            Column() {

            }
            .width('100%')
            .height('100%')
            .layoutWeight(1)
            .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
          }
          .width('100%')
          .height('100%')
        }.tabBar(this.tabBuilder(2, $r('app.media.ic_public_home'), '工作台'))

        TabContent() {
          Column() {
            Column() {
              Text("通讯录")
                .fontSize(16)
                .fontColor($r('sys.color.ohos_id_color_text_primary'))
            }
            .width('100%')
            .height(50)
            .justifyContent(FlexAlign.Center)

            Divider()
              .color($r('sys.color.ohos_id_color_list_separator'))

            Column() {

            }
            .width('100%')
            .height('100%')
            .layoutWeight(1)
            .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
          }
          .width('100%')
          .height('100%')
        }.tabBar(this.tabBuilder(3, $r('app.media.ic_public_highlight'), '通讯录'))

        TabContent() {
          Column() {
            Mine()
          }
          .width('100%')
          .height('100%')
        }.tabBar(this.tabBuilder(4, $r('app.media.ic_public_contacts'), '我的'))
      }
      .barHeight(60)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        this.currentIndex = targetIndex
      })
    }
    .height('100%')
    .width('100%')
  }
}

Mine.ets

import { ArrayDescItem, DescItem, PafList } from '../components/List'

[@Observed](/user/Observed)
class UserNameInfo {
  userAvatar: Resource | PixelMap
  userName: ResourceStr
  userInfo: ResourceStr

  constructor(userAvatar: Resource | PixelMap, userName: ResourceStr, userInfo: ResourceStr) {
    this.userAvatar = userAvatar
    this.userName = userName
    this.userInfo = userInfo
  }
}


[@Component](/user/Component)
export struct Mine {
  [@State](/user/State) userNameInfo: UserNameInfo = new UserNameInfo($r('app.media.ic_appassist_gift'), "用户名", "后端开发")
  [@State](/user/State) userOperateInfo: Array<ArrayDescItem> = []

  aboutToAppear(): void {
    this.userOperateInfo = [
      [
        new DescItem('个人信息', '', $r('app.media.ic_appassist_gift')).onClick(() => {
          console.log(`个人信息`)
        })
      ],
      [new DescItem('退出登录', '', $r('app.media.ic_appassist_ranking')).onClick(() => {
        console.log(`退出登录`)
      })
      ],
    ]
  }

  build() {
    Column() {
      Row() {
        Row() {
          Image(this.userNameInfo.userAvatar)
            .width(60)
            .height(60)
          Column() {
            Text(this.userNameInfo.userName)
              .fontSize(16)
              .fontColor($r("sys.color.ohos_id_color_text_primary"))
            Text(this.userNameInfo.userInfo)
              .fontSize(16)
              .fontColor($r("sys.color.ohos_id_color_text_primary"))
          }
          .margin({ left: 12 })
          .alignItems(HorizontalAlign.Start)
        }

        Row() {
          Image($r('app.media.ic_public_collect'))
            .width(15)
            .height(15)
            .fillColor(Color.White)
          Text("已验证")
            .fontSize(12)
            .fontColor(Color.White)
            .margin({ left: 8 })
        }
        .width(80)
        .height(24)
        .borderRadius(20)
        .justifyContent(FlexAlign.Center)
        .backgroundColor("#6fd8d3")
      }
      .width('100%')
      .height(120)
      .backgroundColor(Color.White)
      .alignItems(VerticalAlign.Center)
      .padding({ left: 25, right: 25 })
      .justifyContent(FlexAlign.SpaceBetween)

      Column() {
        PafList({
          items: this.userOperateInfo,
          isMultiCard: true
        })
      }
      .margin({ top: 12 })
    }
    .height('100%')
    .width('100%')
    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
  }
}

component/List.ets

import { Util } from '../common/Util'

[@Observed](/user/Observed)
export class DescItem {
  public label: string | Resource
  public desc: string | Resource
  public icon: string | PixelMap | Resource
  public isDisabled?: boolean = false
  public clickEvent: (event?: ClickEvent) => void = () => {
  }
  public hasRightArrow: boolean = false
  public rightDesc: ResourceStr

  constructor(label: string | Resource, desc: string | Resource = '', icon: string | PixelMap | Resource = '',
    isDisabled: boolean = false,
    rightDesc: ResourceStr = '') {
    this.label = label
    this.desc = desc
    this.icon = icon
    this.isDisabled = isDisabled
    this.rightDesc = rightDesc
  }

  public onClick(event: (event?: ClickEvent) => void): DescItem {
    this.clickEvent = event
    this.hasRightArrow = true
    return this
  }
}

[@Observed](/user/Observed)
export class ArrayDescItem extends Array<DescItem> {
}

[@Component](/user/Component)
export struct PafList {
  [@Link](/user/Link) items: Array<Array<DescItem>> | Array<DescItem>
  isMultiCard: boolean = false
  [@State](/user/State) private leftMargin: number = 12
  [@State](/user/State) hoverBackgroundColor: Array<object> = []
  [@State](/user/State) private leftTextWidthEnums: Record<string, number> = {}
  [@State](/user/State) private listItemWidth: number = 0

  [@Styles](/user/Styles)
  pressedStyles() {
    .backgroundColor($r("sys.color.ohos_id_color_click_effect"))
    .borderWidth(0)
    .borderColor(null)
  }

  [@Styles](/user/Styles)
  disabledStyles() {
    .opacity($r('sys.float.ohos_id_alpha_disabled'))
  }

  [@Styles](/user/Styles)
  focusedStyles() {
    .backgroundColor(null)
    .borderWidth(2)
    .borderColor($r("sys.color.ohos_id_color_focused_outline"))
  }

  [@Styles](/user/Styles)
  clickedStyles() {
    .backgroundColor($r("sys.color.ohos_id_color_emphasize"))
    .borderWidth(0)
    .borderColor(null)
  }

  aboutToAppear(): void {
    if (this.isMultiCard) {
      this.items.forEach(() => {
        this.hoverBackgroundColor.push(new Object())
      });
    } else {
      this.hoverBackgroundColor.push(new Object())
    }
  }

  [@Builder](/user/Builder)
  buildItemWithIcon(item: DescItem, index: number) {
    RelativeContainer() {
      Row() {
        Image(item.icon)
          .width(24)
          .height(24)
          .margin({ right: 16 })
          .draggable(false)
          .autoResize(false)
          .interpolation(ImageInterpolation.High)
          .alignRules({
            center: { anchor: "__container__", align: VerticalAlign.Center },
            left: { anchor: "__container__", align: HorizontalAlign.Start }
          })
          .id('icon')

        Text(item.label)
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
          .fontSize($r('sys.float.ohos_id_text_size_sub_title2'))
          .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
          .fontWeight(FontWeight.Medium)
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .height(21)
          .constraintSize({
            minHeight: 48,
            maxWidth: Util.notEmpty(item.rightDesc) ? 'calc(66% - 56vp)' :
              item.hasRightArrow ? 'calc(100% - 48vp)' : '100%'
          })
          .margin({ top: 8, bottom: 8, })
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            left: { anchor: 'icon', align: HorizontalAlign.End },
          })
          .id('label')
      }
      .onAreaChange((oldValue: Area, newValue: Area) => {
        this.leftTextWidthEnums[index] = (newValue.width as number)
      })
      .margin({
        right: Util.notEmpty(item.rightDesc) ? 16 : item.hasRightArrow ? 8 : 0
      })
      .id('leftSide')
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        left: { anchor: "__container__", align: HorizontalAlign.Start }
      })

      if (Util.notEmpty(item.rightDesc) || item.hasRightArrow) {
        Row() {
          this.IconAndText(item)
        }
        .width(this.listItemWidth - this.leftTextWidthEnums[index] -
          (Util.notEmpty(item.rightDesc) ? 16 : item.hasRightArrow ? 8 : 0))
        .constraintSize({
          minWidth: Util.notEmpty(item.rightDesc) ? '33%' : ''
        })
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          right: { anchor: "__container__", align: HorizontalAlign.End },
          left: { anchor: "label", align: HorizontalAlign.End },
        })
        .id('rightSide')
      }
    }
    .width('100%')
    .height(56)
  }

  [@Builder](/user/Builder)
  buildItemNoIcon(item: DescItem, index: number) {
    RelativeContainer() {
      Column() {
        Text(item.label)
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
          .fontSize($r('sys.float.ohos_id_text_size_sub_title2'))
          .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
          .fontWeight(FontWeight.Medium)
          .lineHeight(22)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .margin({ top: item.desc ? 10 : 13, bottom: item.desc ? 0 : 14 })
          .alignRules({
            top: { anchor: "__container__", align: VerticalAlign.Top },
            left: { anchor: "__container__", align: HorizontalAlign.Start }
          })
          .id('icon')
        if (Util.notEmpty(item.desc)) {
          Text(item.desc)
            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
            .fontSize($r('sys.float.ohos_id_text_size_sub_title3'))
            .fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
            .fontWeight(FontWeight.Regular)
            .height(19)
            .margin({ top: 2, bottom: 11 })
            .alignRules({
              top: { anchor: 'icon', align: VerticalAlign.Bottom },
              left: { anchor: "__container__", align: HorizontalAlign.Start }
            })
            .id('desc')
        }
      }
      .onAreaChange((oldValue: Area, newValue: Area) => {
        this.leftTextWidthEnums[index] = (newValue.width as number + 16)
      })
      .constraintSize({
        minHeight: 48,
        maxWidth: Util.notEmpty(item.rightDesc) ? 'calc(66% - 16vp)' : item.hasRightArrow ? 'calc(100% - 12vp)' : '100%'
      })
      .margin({ right: Util.notEmpty(item.rightDesc) || item.hasRightArrow ? 16 : 0 })
      .alignItems(HorizontalAlign.Start)
      .alignRules({
        top: { anchor: "__container__", align: VerticalAlign.Top },
        left: { anchor: "__container__", align: HorizontalAlign.Start }
      })
      .id('leftSide')

      if (Util.notEmpty(item.rightDesc) || item.hasRightArrow) {
        Column() {
          this.IconAndText(item)
        }
        .width(this.listItemWidth - this.leftTextWidthEnums[index])
        .constraintSize({
          minWidth: Util.notEmpty(item.rightDesc) ? '33%' : ''
        })
        .id('rightSide')
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          right: { anchor: "__container__", align: HorizontalAlign.End },
          left: { anchor: "icon", align: HorizontalAlign.End },
        })
      }
    }
    .width('100%')
    .height(item.desc ? 64 : 48)
  }

  [@Builder](/user/Builder)
  IconAndText(item: DescItem) {
    RelativeContainer() {
      if (Util.notEmpty(item.rightDesc)) {
        Text(item.rightDesc)
          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
          .fontSize($r('sys.float.ohos_id_text_size_sub_title3'))
          .fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
          .fontWeight(FontWeight.Regular)
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .textAlign(TextAlign.End)
          .constraintSize({
            minHeight: 48
          })
          .lineHeight(19)
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            left: { anchor: '__container__', align: HorizontalAlign.Start },
            right: item.hasRightArrow ? { anchor: "rightArrow", align: HorizontalAlign.Start } :
              { anchor: '__container__', align: HorizontalAlign.End }
          })
          .id('rightText')
      }
      if (item.hasRightArrow) {
        Image($r('app.media.ic_public_arrow_right'))
          .fillColor($r('sys.color.ohos_id_color_fourth'))
          .width(12)
          .height(24)
          .margin({ left: item.rightDesc ? 4 : 0 })
          .draggable(false)
          .autoResize(false)
          .interpolation(ImageInterpolation.High)
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            right: { anchor: "__container__", align: HorizontalAlign.End }
          })
          .id('rightArrow')
      }
    }
    .width('100%')
    .height(item.desc ? 64 : 48)
  }

  judge(item: DescItem): boolean {
    if (Util.notEmpty(item.icon)) {
      this.leftMargin = 52
      return true
    } else {
      this.leftMargin = 12
      return false
    }
  }

  [@Builder](/user/Builder)
  buildItem(item: DescItem, index: number) {
    Row() {
      if (this.judge(item)) {
        this.buildItemWithIcon(item, index)
      } else {
        this.buildItemNoIcon(item, index)
      }
    }
    .onAreaChange((oldValue: Area, newValue: Area) => {
      this.listItemWidth = newValue.width as number
    })
    .margin({ left: 8, right: 8 })
    .alignItems(VerticalAlign.Center)
  }

  [@Builder](/user/Builder)
  buildCard(card: Array<DescItem> | Array<Array<DescItem>>, cardIndex: number) {
    ListItemGroup() {
      ForEach(card, (item: DescItem, index) => {
        ListItem() {
          this.buildItem(item, index)
        }
        .onClick((event: ClickEvent) => {
          if (item.clickEvent && item.hasRightArrow) {
            item.clickEvent(event)
          }
        })
        .margin({ left: 4, right: 4 })
        .constraintSize({ minHeight: Util.notEmpty(item.icon) ? 56 : Util.notEmpty(item.desc) ? 64 : 48 })
        .borderRadius(14)
        .enabled(!item.isDisabled)
        .backgroundColor(this.hoverBackgroundColor[cardIndex][index])
        .stateStyles({
          pressed: this.pressedStyles,
          focused: this.focusedStyles,
          disabled: this.disabledStyles,
        })
        .onHover((isHover: boolean) => {
          let temp: Array<object> = [...this.hoverBackgroundColor]
          if (isHover) {
            temp[cardIndex][index] = $r("sys.color.ohos_id_color_hover")
          } else {
            temp[cardIndex][index] = $r('sys.color.ohos_id_color_list_card_bg')
          }
          this.hoverBackgroundColor = [...temp]
        })
      })
    }
    .backgroundColor($r('sys.color.ohos_id_color_list_card_bg'))
    .padding({ top: 4, bottom: 4 })
    .divider({
      strokeWidth: '1px',
      color: $r('sys.color.ohos_id_color_list_separator'),
    })
    .width("100%")
  }

  build() {
    Column() {
      List({ space: this.isMultiCard ? 12 : 0 }) {
        if (this.isMultiCard) {
          ForEach(this.items, (item: Array<DescItem>, index: number) => {
            this.buildCard(item, index)
          })
        } else {
          this.buildCard(this.items, 0)
        }
      }
      .listDirection(Axis.Vertical)
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.None)
      .chainAnimation(false)
      .width("100%")
    }
  }
}

common/Util.ets

export class Util {
  static notEmpty(param: Color | number | string | Resource | PixelMap | ResourceStr): boolean {
    if (!param) {
      return false
    }
    if (typeof param === 'string') {
      return param.length > 0
    }
    return true
  }

  // hex转rgba
  static hexToRgba(hex: string, alpha: number): string {
    let rgb = hex.slice(1)
    if (rgb.length == 8) {
      rgb = rgb.slice(2, 8)
    }
    let rgba = [
      Number.parseInt("0x" + rgb.slice(0, 2)),
      Number.parseInt("0x" + rgb.slice(2, 4)),
      Number.parseInt("0x" + rgb.slice(4, 6)),
      alpha
    ]
    return "rgba(" + rgba.toString() + ")"
  }

  // 十进制转rgba
  static decimalToRgba(decimal: number, alpha: number): string {
    let bitThree = decimal & 0xff;
    let bitTwo = decimal >> 8 & 0xff;
    let bitOne = decimal >> 16 & 0xff;
    decimal = decimal >> 24 & 0xff;
    return `rgba(${bitOne}, ${bitTwo}, ${bitThree}, ${alpha})`
  }
}