HarmonyOS 鸿蒙Next 是否有一个个人中心的demo呢？
HarmonyOS 鸿蒙Next 是否有一个个人中心的demo呢？
希望提供一个个人中心的demo 谢谢！
2 回复
提供下面demo ：
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()
})
.justifyContent(FlexAlign.SpaceBetween)
.width('90%')
}
.height(55)
.width('100%')
.backgroundColor('white')
})
}.backgroundColor('white')
.width('100%')
.divider({
strokeWidth: 1,
color: '#f1f1f1',
startMargin: 10,
endMargin: 10
})
}
.backgroundColor('white')
Stack().height(10)
Column() {
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)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('90%')
}
.height(55)
.width('100%')
.backgroundColor('white')
})
}
.width('100%')
.divider({
strokeWidth: 1,
color: '#f1f1f1',
startMargin: 10,
endMargin: 10
})
}
.backgroundColor('white')
List() {
ListItem() {
Row() {
Row({ space: 10 }) {
Image($r('app.media.ic_person'))
.width(30)
.height(30)
Text('设置')
}
Image($r('app.media.ic_public_arrow_right'))
.width(35)
.height(35)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('90%')
}
.height(55)
.width('100%')
.backgroundColor('white')
//另一种跳转,还未实现完成
// ListItem() {
// this.listItemContainer($r('app.media.ic_gallery_map_all'), '设置', ListType.icon, () => {
// this.pageInfos.pushPathByName('MyCard', null, false)
// })
// }
}
.margin({ top: 10})
}
.padding({top: this.statusBarHeight})
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Center)
.backgroundColor('#f1f1f1')
}
}
更多关于HarmonyOS 鸿蒙Next 是否有一个个人中心的demo呢？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
