鸿蒙开发【页面路由跳转】绘制页面

6.6 给查看更多设置点击事件实现页面跳转

图片如下:

跳转需要进入的页面

6.6.1 描绘该跳转的关注的人的页面

复制代码
新建一个pages页面命名为AttentionPage,在添加相应的内容布局

代码示例:

@Entry
@Component
struct AttentionPage {

build() {
Column(){

}

}
}

6.6.1.1 设置顶部内容

代码示例:

Row(){
Image($r('app.media.xiangzuo')).height(25).width(25)
.onClick(()=>{
router.back()
})
Text('关注').fontSize(20)
Text('发现用户').fontSize(20)
}.justifyContent(FlexAlign.SpaceBetween)
.width('100%').padding(10)

Divider()

Divider 水平分割线,让整体布局更加美观

效果图:

6.6.1.2 绘制tab标签并且添加内容
(1)添加tab标签的自定义

代码示例:

@Entry
@Component
struct AttentionPage {

private tabsController:TabsController=newTabsController()

build() {

(2)tabs的布局以及tabcontent的内容

Tabs({controller: this.tabsController}){
TabContent(){

}.tabBar('关注的人')
TabContent(){

}.tabBar('经常访问')
TabContent(){

}.tabBar('推荐')
TabContent(){

}.tabBar('超话')

6.6.1.3 利用Image组件和TextInput组件添加输入框

给关注的人标签里添加内容

代码示例

ListItem(){
Column() {
Row().height(12).width('100%').backgroundColor('#EDEDED')
Row() {
Stack() {
Image($r('app.media.sousuo')).width(15).margin({ right: 120 })
TextInput({ placeholder: '搜全部关注' }).textAlign(TextAlign.Center).width('95%')
}
}.padding(10)

6.6.1.4 利用线性布局组件描绘图片以及文本内容
(1) 设置Attention类分装

代码示例:

class Attention {
image: ResourceStr
name:string
constructor (image: ResourceStr,name:string) {
this .image =image
this .name=name
}
}

(2) 设置Atten 列表函数

代码示例:

@State Atten:Array<Attention> =[
new Attention(r('app.media.zuixin'),'特别关注'), **new**Attention(r('app.media.fabu'),'是TA的铁粉'),
newAttention(r('app.media.zuixin'),'关注分组'), **new**Attention(r('app.media.renqi'),'兴趣主页'),
]

(3) 利用ForEach 循环渲染

代码示例:

Divider().backgroundColor('#EDEDED')
Row() {
ForEach(this .Atten, (item: Attention) => {
Row({ space: 20 }) {
Column({ space: 5 }) {
Image(item.image).width(50)
Text(item.name)
}
Divider().vertical(true ).height(60)
}.margin({ right: 5 })
})
}.justifyContent(FlexAlign.SpaceBetween)

效果图:

6.6.1.5 利用Divider组件属性和text文本描绘页面

代码示例:

Row().height(12).width('100%').backgroundColor('#EDEDED').margin({ top: 10 })
Column() {
Row({ space: 10 }) {
Divider().vertical(true ).height(30).strokeWidth(5).backgroundColor(Color.Orange) //设置分割线为垂直方向,strokeWidth为线的宽度。
Text('你可能错过了他们的微博,快来看看吧>>')
}.justifyContent(FlexAlign.Start).width('100%').padding(10)
Divider().width('95%')
}

效果图如下:

6.6.1.6 利用Row组件设置图片展示

此处所需要的图片很少只需要利用Image组件按照顺序直接排版即可

代码示例

Row({ space: 10 }) {
Image(r('app.media.liuyifei')).width(50).height(50) Image(r('app.media.bhead')).width(50).height(50)
Image(r('app.media.yaocen')).width(50).height(50) Image(r('app.media.Himg')).width(50).height(50)
}.justifyContent(FlexAlign.Start).width('100%').padding(10)

运行结果:

6.6.1.7 利用 Row组件设置文本内容以及背景属性

代码如下:

Row() {
Text('............').fontSize(20)
Text('批量管理').fontColor(Color.Blue).margin({ top: 10 })
Text('............').fontSize(20)

}.backgroundColor('#EDEDED')
.height(50).width('100%')
.justifyContent(FlexAlign.Center)

运行结果:

6.6.1.8 利用 Column 组件布局已关注的人描述
(1)创建自定义Guanzhu的类用来封装

代码示例:

export class Guanzhu{
Himg: ResourceStr
name:string
img: ResourceStr
text:string
img1:ResourceStr
constructor ( Himg: ResourceStr,name:string,img: ResourceStr,text:string,img1:ResourceStr) {
this .Himg=Himg
this .name=name
this .img=img
this .text = text
this .img1=img1
}
}

(2)设置一个自定义列表YAtten的函数用来封装内容

代码示例:

@State YAtten:Array<Guanzhu>=[
new Guanzhu(r('app.media.Yyqx'),'易烊千玺' ,r('app.media.bhead0'),'演员易烊千玺',r('app.media.yiguanzhu')), **new**Guanzhu(r('app.media.liuyifei'),'刘亦菲' ,r('app.media.bhead0'),'演员刘亦菲',r('app.media.yiguanzhu')),
newGuanzhu(r('app.media.liuhaocun'),'刘浩存' ,r('app.media.bhead0'),'演员刘浩存',r('app.media.yiguanzhu')), **new**Guanzhu(r('app.media.Yyqx'),'易烊千玺' ,r('app.media.bhead0'),'演员易烊千玺',r('app.media.yiguanzhu')),
]

(3)利用ForEach组件循环渲染

代码示例:

Column() {
ForEach(this .YAtten, (item: Guanzhu) => {
Row({ space: 10 }) {
Image(item.Himg).width(60).height(60)
Column() {
Row({ space: 10 }) {
Text(item.name).fontColor(Color.Orange)
Image(item.img).height(25).width(25)
}.justifyContent(FlexAlign.Start).width('100%')

Row({ space: 10 }) {
Text(item.text)
Image(item.img1).width(80).height(40)
}.justifyContent(FlexAlign.SpaceBetween).width('90%')

}.justifyContent(FlexAlign.Start).width('80%')
}.width('100%')

Row({ space: 10 }) {
Image($r('app.media.chaohua')).height(20).width(20)
Text('个人超话')
Button('+关注超话').backgroundColor('#EDEDED').fontColor(Color.Orange)
}
.width('70%')
.height(35)
.backgroundColor('#EDEDED')
.borderRadius(10)
.margin({ left: 50, top: 5 })
Divider().padding(20)
})
}.height('80%')

运行代码:

6.6.2 给查看更多里面的经常访问标签绘制页面内容

图片如下:

6.6.2.1 利用Row组件布局并且输入文本内容
(1)创建一自定义页面,命名为OfftenVisit 页面

直接加上export导出,在主页面的标签里面调用即可

代码示例:

@Component
export struct OfftenVisit {

build() {
Column() {

}.height('100%')
}
}

(2)在build里面描绘页面内容

代码示例:

Column({space:10}) {
Row() {
Text('................').fontSize(20)
Text('管理经常访问').fontColor(Color.Blue).margin({ top: 10 })
Text('................').fontSize(20)
}
Text('我经常访问的人(仅自己可见)')
}.backgroundColor('#EDEDED')
.height(90).width('100%')
.justifyContent(FlexAlign.Center)

运行效果图:

6.6.2.2 利用ForEach组件循环渲染内容
(1)定义一个VisitInfo的类用来封装

代码示例:

class VisitInfo{
Himg:ResourceStr
name:string
img1:ResourceStr
img2:ResourceStr
title:string
content:string
constructor ( Himg:ResourceStr,name:string,img1:ResourceStr, img2:ResourceStr,title:string,content:string ) {
this .Himg=Himg
this .name=name
this .img1=img1
this .img2 = img2
this .title = title
this .content =content
}
}

(2)定义一个自定义列表函数Vlist

代码示例:

@Provide Vlist:Array< VisitInfo> =[
new VisitInfo(r('app.media.Yyqx'),'易烊千玺',r('app.media.gender'),r('app.media.img2'),'近7天访问25次' ,'人气少年偶像组合TFBOYS成员!'), **new**VisitInfo(r('app.media.liuyifei'),'刘亦菲',r('app.media.gender'),r('app.media.img2'),'近7天访问20次'
,'娱乐圈女神神仙姐姐 !'),
newVisitInfo(r('app.media.Yyqx'),'易烊千玺',r('app.media.gender'),r('app.media.img2'),'近7天访问25次' ,'人气少年偶像组合TFBOYS成员!'), **new**VisitInfo(r('app.media.liuyifei'),'刘亦菲',r('app.media.gender'),r('app.media.img2'),'近7天访问20次'
,'娱乐圈女神神仙姐姐 !'),
]

(3)ForEach循环渲染内容展示:

代码示例:

ForEach(this .Vlist,(item:VisitInfo)=>{
Row({space:10}){
Image(item.Himg).width(50).height(50)
Column({space:5}){
Row({space:10}){
Text(item.name).fontSize(18)
Image(item.img1).width(50).height(20)
Image(item.img2).width(80).height(40).margin({top:10,left:50})
}
Row(){
Text(item.title).fontColor(Color.Grey).margin({right:150})
}.height(15).backgroundColor(Color.Orange).width(100)
}
}
Column(){
Text(item.content).padding(10)
}.alignItems(HorizontalAlign.Start)
Divider().padding(10)
})

运行结果:

6.6.2.3 利用Text组件设置底部内容

代码示例:

Row() {
Text('................').fontSize(20)
Text('没有更多了').margin({ top: 10 })
Text('................').fontSize(20)
}.backgroundColor('#EDEDED')
.height(90).width('100%')
.justifyContent(FlexAlign.Center)

运行结果:

6.6.2.4 在Attention Page页面直接调用 OffenVisitPage页面的内容

代码示例:

TabContent(){
OfftenVisit()
}.tabBar('经常访问')

6.6.3 实现页面路由跳转

6.6.3.1给主页面中的查看更多文本添加点击事件实现页面路由跳转

代码示例:

Text('查看更多').fontColor('#36D')
.onClick(() => {
router.pushUrl({
url: 'pages/HQ/AttentionPage'
}, router.RouterMode.Single, (err) => {
if (err) {
console.log(`路由失败,errCode:{err.code}errMsg:{err.message}`)
return ;
}
console.info('Invoke replaceUrl succeeded.');
})
})

6.6.3.2 给进入的页面设置页面跳转返回

代码示例:

Image($r('app.media.xiangzuo')).height(25).width(25)
.onClick(()=>{
router.back()
})

相关推荐
SameX1 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX1 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index9 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室12 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu715 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
zhangjr057517 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟4641 天前
初识ArkUI
harmonyos
SameX1 天前
HarmonyOS Next 设备安全特性深度剖析学习
harmonyos
郭梧悠1 天前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
郝晨妤1 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙