HarmonyOS 个人中心的demo？

Question

如题：HarmonyOS 个人中心的demo？

Answer 1

index

import { hilog } from '@kit.PerformanceAnalysisKit';
import { HomePage } from 'home';
import { OtherPage } from 'other';
import { PersonalPage } from 'personal';
import { WhiteNoisePage } from 'whiteNoise';


@Entry
@Component
struct Index {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
  @StorageLink('IndexPage') currentPageIndex: number = 0;
  build() {
    Navigation(this.pageInfos) {
      Stack({ alignContent: Alignment.Top }) {
        Tabs({
          barPosition: BarPosition.End,
          index: this.currentPageIndex
        }) {
          TabContent() {
            HomePage()
          }
          .backgroundColor($r('sys.color.background_primary'))
          .tabBar(this.buildTab($r("app.media.ic_home"), "", 0))

          TabContent() {
            OtherPage()
          }
          .backgroundColor($r('sys.color.background_primary'))
          .tabBar(this.buildTab($r("app.media.ic_content"), "", 1))

          TabContent() {
            WhiteNoisePage()
          }
          .backgroundColor($r('sys.color.background_primary'))
          .tabBar(this.buildTab($r("app.media.ic_yun"), "", 2))

          TabContent() {
            PersonalPage()
          }
          .backgroundColor($r('sys.color.background_primary'))
          .tabBar(this.buildTab($r("app.media.ic_person"), "", 3))
        }

        .barWidth('100%')
        .barHeight("40vp")
        .scrollable(false)
        .onChange((index: number) => {
          this.currentPageIndex = index;
        })
      }
    }
    // .backgroundColor('red')
    // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
    .titleMode(NavigationTitleMode.Mini)
    .hideBackButton(true)
    // .hideTitleBar(true)
    .mode(NavigationMode.Stack)
    .title("藏译通")
  }

  @Builder
  buildTab(img: ResourceStr, title: string, tabIndex: number) {
    Column({ space: '6vp' }) {
      Image(img)
        .objectFit(ImageFit.Contain)
        .width("30vp")
        .height("30vp")
        .fillColor(this.currentPageIndex === tabIndex ? $r('sys.color.ohos_id_color_emphasize') : Color.Black)
      // Text(title)
      //   .fontColor(this.currentPageIndex === tabIndex ? $r('sys.color.ohos_id_color_emphasize') : Color.Black)
      //   .fontWeight(500)
      //   .textAlign(TextAlign.Center)
    }
    .layoutWeight(1)
    // .width('25%')
    .height("100%")
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentPageIndex = tabIndex;
    })
  }
  aboutToAppear() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }
}

PersonalPage:

// import { autoFillManager } from '@kit.AbilityKit';
import window from '@ohos.window';
interface List1Json{
  id:number
  icon:Resource
  title:string
  action:Resource
}
enum ListType {
  icon,
  text
}
@Component
export struct PersonalPage {
  @Consume('pageInfos') pageInfos: NavPathStack
  @State statusBarHeight: number = 0;
  @State message: string = 'PersonalPage World';
  @State List1Data:List1Json[] = [
    {
      id:1,
      icon:$r('app.media.ic_home'),
      title:'翻译记录',
      action:$r('app.media.ic_public_arrow_right')
    },
    {
      id:2,
      icon:$r('app.media.ic_home'),
      title:'语言切换',
      action:$r('app.media.ic_public_arrow_right')
    },
    {
      id:3,
      icon:$r('app.media.ic_home'),
      title:'模式切换',
      action:$r('app.media.ic_public_arrow_right')
    }]

  iconClick() {
  }

  @Builder
  listItemContainer(icon: Resource, text: string, type: ListType, callback?: () => void) {
    Row() {
      Image(icon).height(25).objectFit(ImageFit.Contain).margin({ right: 10 })
      Text(text)
      Blank()
      if (type == ListType.icon) {
        Image($r('app.media.ic_public_arrow_right')).height(25)
      }
      if (type == ListType.text) {
        Text('未申请').fontColor($r('app.color.button_theme_color'))
        Image($r('app.media.ic_public_arrow_right')).height(25)
      }
    }
    .width('100%')
    .padding(20)
    .alignItems(VerticalAlign.Center)
    .onClick(() => {
      callback && callback()
    })
  }


  build() {
    Column(){
      Column() {
        //头像
        Row() {
          Button() {
            Image($r('app.media.ic_yun')).width(50)
          }
          .type(ButtonType.Circle)
          .width(50)
          .height(50)
          .clip(true)
          //登录
          Column() {
            Text('立即登录').fontSize(20)
            Text('登录即可获得格桑花奖励').fontSize(12).margin({ top: 10 })
          }.onClick(() => {
            console.info("点击登录")
          })
          .alignItems(HorizontalAlign.Start)
          .margin({ left: 30 })
          Blank()
          //签到
          Button() {
            Row() {
              Image($r('app.media.ic_home')).width(25)
              Text('签到').fontSize(16)
            }
          }
          .backgroundColor('#F0FFF0')
          .width(100).height(35)
        }
        .width('95%')
        .padding(10)
        .margin({ top: 10, bottom: 20 })
        //我的格桑花
        Row() {
          Column() {
            Text('0').fontSize(18)
            Text('我的格桑花').fontSize(18).margin({ top: 10, bottom: 20 })
          }.onClick(() => {
            console.log("hit me!")
          })
          //分割竖线
          Divider()
            .vertical(true)
            .height(62)
            .color('#182431')
            .opacity(0.7)
            .margin({ left: 50, right: 50, bottom: 30 })
          //签到天数
          Column() {
            Text('0').fontSize(18)
            Text('签到天数').fontSize(18).margin({ top: 10, bottom: 20 })
          }.onClick(() => {
            console.log("hit me!")
          })
        }
      }
      .backgroundImage($r('app.media.person_center_back'))
      .width('100%')
      Column(){
        Stack() {
          Grid() {
            GridItem() {
              Column() {
                Image($r('app.media.ic_person')).width(30).objectFit(ImageFit.Contain)
                Text('人工翻译').margin({ top: 10, bottom: 20 })
              }.onClick(() => {
                console.log("hit me!")
              })
            }
            GridItem() {
              Column() {
                Image($r('app.media.ic_person')).width(30).objectFit(ImageFit.Contain)
                Text('常用语句').margin({ top: 8, bottom: 15, })
              }.onClick(() => {
                console.log("hit me!")
              })
            }
            GridItem() {
              Column() {
                Image($r('app.media.ic_person')).width(30).objectFit(ImageFit.Contain)
                Text('我的收藏').margin({ top: 10, bottom: 20, })
              }.onClick(() => {
                console.log("hit me!")
              })
            }
            GridItem() {
              Column() {
                Image($r('app.media.ic_person')).width(30).objectFit(ImageFit.Contain)
                Text('格桑花').margin({ top: 10, bottom: 20, })
              }.onClick(() => {
                console.log("hit me!")
              })
            }

          }
          .width('90%')
          .padding(20)
          .shadow({ radius: 10, color: '#f1f1f1' })
          .borderRadius(10)
          .backgroundColor(Color.White)
          .columnsTemplate('1fr 1fr 1fr 1fr')
          .rowsTemplate('1fr')
          .height(90)

        }
        .margin({ bottom:-15})
        .offset({ x: 0, y: -20 })
        .shadow({
          radius: 20,
          type: ShadowType.COLOR,
          color: Color.Gray,
          offsetY: 5,
          fill: true
        })
        .zIndex(22222)

        List() {
          ForEach(this.List1Data, (item: List1Json) => {
            ListItem() {
              Row() {
                Row({ space: 10 }) {
                  Image(item.icon)
                    .width(30)
                    .height(30)
                  Text(item.title)
                }

                Image(item.action)
                  .width(35)
                  .height(35)
              }
              .onClick(() => {
                this.iconClick()
              })