【无标题】

Web_Person

简单的制作一个个人主页。在这里面我们需要制作一个表头,Tabs导航栏。这个·做的比较简单,所以比较复杂的东西。

  1. 表头

先自定义一个组件制作表头,这里面的使用的Text、Image和Button组件。并且我们需要在Texr添加点击事件:页面返回到上一级。

@Component
struct  Head1{
  build(){
    Row({space:10}){
      Text('←')
        .fontSize(35)
        .width(40)
        .fontColor('white')
        .onClick(()=>{
          //
返回上一级
          router.back()
        })
      Blank()
        Image($r('app.media.search12'))
          .width(30)
          .margin({right:10})
      Button('···').backgroundColor(Color.Transparent).fontSize(30)
    }
    .width('100%')
    .padding(10)
  }}

  1. 主体部分

2.1最上面是一个图片,我们需要将表头部分层叠进去。

Stack({ alignContent: Alignment.Top }){
    Image($r('app.media.cai')).width('100%').height(150)
    Head1()
}

2.2现在我们做的是这一部分:

这一部分我们用的是Row和Column做的。首先布局上:图片和文字是左右分的所以使用Row,文字部分有上下两行使用Column。

Row({space:20}){
    Image($r('app.media.dongman2')).width(80)
  Column(){
    Row({space:10}){
      Text('
叫我姨太好了').fontWeight(FontWeight.Bolder).fontSize(20)
      Text('♀')
      Text('VVIPⅡ')
    }.padding(3)
    Row({space:10}){
        Text('938.8
').fontSize(12)
        Text('
粉丝').fontColor('#9E9E9E').fontSize(10)
        Text('780').fontSize(12)
        Text('
关注').fontColor('#9E9E9E').fontSize(10)
        Text('1.05
亿').fontSize(12)
        Text('
转评赞').fontColor('#9E9E9E').fontSize(10)
    }.padding(3)
  }.alignItems(HorizontalAlign.Start)
}.justifyContent(FlexAlign.Center).width('100%')

 

 2.2现在做的部分:

整体布局是Column,第一行是Button,第二行是Text。 第一行我们需要调整按钮的大小和文字的颜色。第二行调整文字的大小颜色,

Column({space:5}){
  Row({space:5}){
    Button('
热门娱乐博主数据飙升').width(160).fontSize(12).height(20).backgroundColor('#EEEEEE').fontColor('#FB8845')
    Button('
娱乐博主').width(80).fontSize(12).height(20).backgroundColor('#EEEEEE').fontColor('#FB8845')
  }
  Row({space:5}){
    Text('v').fontColor('#9E9E9E').fontSize(15)
    Text('
微博电视团成员 2022年辰星计划博主').fontSize(12).fontColor('#9E9E9E')
  }
}.margin({left:20})

  2.3现在做的是这一部分:

这里面是Image和Text只需要注意一下布局就行。

Row(){
  Row(
    {space:5}){
    Image($r('app.media.chao')).width(30)
    Text('
粉丝群')
  }
  Row({space:5}){
    Text('4
个群聊')
    Image($r('app.media.arrow_right')).width(25)
  }
}

.width('100%')

.backgroundColor('#F5F5F5')

.justifyContent(FlexAlign.SpaceBetween)

.padding(10)

.margin(5 )

2.4现在做的是Tabs导航栏,这个是这个页面最难的部分。这个导航栏是自定义的。第一个动态是需要有提示点的,剩下两个不需要。我们用if条件判断,设置一个判断的变量:

@State currentIndex: number = 0

现在用@Buildder构建函数,这里面剩下的就是图片加文字,代码如下:

  • 在struct中写入:

private controller: TabsController = new TabsController()

  • 在build中写入:

@Builder TabBuilder(index: number) {
  Row() {
    if (index === 0) {
      Badge({
        value: '',
        style: { badgeSize: 6, badgeColor: '#FA2A2D' }
      }) {
       Text('
动态')
      }
      .height(24)
    } else if (index===1){
      Image($r('app.media.7suo'))
        .width(24)
        .height(24)
    Text('
微博')
      }
    else{
      Image($r('app.media.7suo'))
        .width(24)
        .height(24)
      Text('
视频')
    }
  }.width('100%').height('100%').justifyContent(FlexAlign.Center)
}

2.5现在做动态里面的内容。

这里为了简便,所以我们做的样式是一样的,这个可以使用foreach做,这里为了简便使用的列表。

Tabs({controller: this.controller}) {
  TabContent(){
    Column(){
      Divider().strokeWidth(15).color('#F5F5F5')
      List(){
        ListItem(){
          Column(){
            Row({space:15}){
              Image($r ('app.media.zhuanfa')).width(15)
              Column({space:10}){
                Text('
她发布了视频')
                Row(){
                  Image($r('app.media.xincaoliu')).width(40)
                  Column({space:10}){
                    Text('
歌手的神秘人疑似是Charlie...')
                    Text('5-10 · ·14.5
万次观看').fontSize(12)
                  }.alignItems(HorizontalAlign.Start).padding(10)
                }.backgroundColor('#F5F5F5')
              }.alignItems(HorizontalAlign.Start)
            }.alignItems(VerticalAlign.Top).padding(10)
          }
        }
        ListItem(){
          Column(){
            Row({space:15}){
              Image($r('app.media.zhuanfa')).width(15)
              Column({space:10}){
                Text('
她发布了视频')
                Row(){
                  Image($r('app.media.xincaoliu')).width(40)
                  Column({space:10}){
                    Text('
歌手的神秘人疑似是Charlie...')
                    Text('5-10 · ·14.5
万次观看').fontSize(12)
                  }.alignItems(HorizontalAlign.Start).padding(10)
                }.backgroundColor('#F5F5F5')
              }.alignItems(HorizontalAlign.Start)
            }.alignItems(VerticalAlign.Top).padding(10)
          }
        }
        ListItem(){
          Column(){
            Row({space:15}){
              Image($r('app.media.zhuanfa')).width(15)
              Column({space:10}){
                Text('
她发布了视频')
                Row(){
                  Image($r('app.media.xincaoliu')).width(40)
                  Column({space:10}){
                    Text('
歌手的神秘人疑似是Charlie...')
                    Text('5-10 · ·14.5
万次观看').fontSize(12)
                  }.alignItems(HorizontalAlign.Start).padding(10)
                }.backgroundColor('#F5F5F5')
              }.alignItems(HorizontalAlign.Start)
            }.alignItems(VerticalAlign.Top).padding(10)
          }.height('100%')
        }
      }
      .divider({
        strokeWidth: 1,
        startMargin: 60,
        endMargin: 10,
        color: '#ffe9f0f0'
      })
    }
  }
    .tabBar(this.TabBuilder(0))

 2.6现在做的是微博页面的内容。这里面没有什么太大的要求,就是正常的画页面。注意排版就可以了。

TabContent(){
  Column(){
    Row(){
      Row({space:5}){
        Text('
全部微博(34765')
      }
      Row({space:5}){
        Image($r('app.media.bhead3')).width(25)
        Text('
筛选')
      }
    }.width('100%').backgroundColor('#F5F5F5').justifyContent(FlexAlign.SpaceBetween).padding(10)
    Column(){
      Row(){
        Image($r('app.media.dongman2')).width(50)
        Column(){
          Text('
叫我姨太好了')
          Text('27
分钟前')
        }.alignItems(HorizontalAlign.Start).padding(10)
      }
      Text('
有些人做了于适生平小列表,看完只有三个字感慨:好精彩👍').padding(10)
      Image($r('app.media.bliuyifei')).width('70%')
      Row(){
        Row({space:10}){
          Image($r('app.media.fenxiang')).width(25)
          Text('2')
        }
        Row({space:10}){
          Image($r('app.media.pinglun')).width(35)
          Text('13')
        }
        Row({space:10}){
          Image($r('app.media.dianzan')).width(30)
          Text('63')
        }
      }.justifyContent(FlexAlign.SpaceAround).width('100%').margin({top:10})
    }.alignItems(HorizontalAlign.Start)
  }.justifyContent(FlexAlign.Start).height('100%')
}
  .tabBar(this.TabBuilder(1))

2.7最后一个视频页面,这个页面也只需要注意一下布局就可以了。

      TabContent(){
  Column(){
    Row({space:10}){
      Image($r('app.media.dianzan')).width(20)
      Text('
')
      Image($r('app.media.arrow_right')).width(15)
    }.backgroundColor('white').width('90%').justifyContent(FlexAlign.Center).margin(15).padding(10)
    Row(){
      Column(){
        Image($r('app.media.cai')).width(170).height(200)
        Text('
汪峰新恋情被拍了,对方是93年的女网红森林...').width(150)
        Row(){
          Text('8
小时前')
          Row(){
            Image($r('app.media.dianzan')).width(15)
            Text('234')
          }
        }.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10)

      }.width('50%').backgroundColor('white')
      Column(){
        Image($r('app.media.cai')).width(170).height(200)
        Text('
汪峰新恋情被拍了,对方是93年的女网红森林...').width(150)
        Row(){
          Text('8
小时前')
          Row(){
            Image($r('app.media.dianzan')).width(15)
            Text('234')
          }
        }.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10)
      }.width('50%').backgroundColor('white')
    }
  }.height('100%')

}.backgroundColor('#F5F5F5')
  .tabBar(this.TabBuilder(2))

  1. 源代码

import router from '@ohos.router'
@Component
struct  Head1{
  build(){
    Row({space:10}){
      Text('←')
        .fontSize(35)
        .width(40)
        .fontColor('white')
        .onClick(()=>{
          //
返回上一级
          router.back()
        })
      Blank()
        Image($r('app.media.search12'))
          .width(30)
          .margin({right:10})
      Button('···').backgroundColor(Color.Transparent).fontSize(30)
    }
    .width('100%')
    .padding(10)
  }
}
@Entry
@Component
struct Person{
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  build() {
    Column(){
      Stack({ alignContent: Alignment.Top }){
        Image($r('app.media.cai')).width('100%').height(150)
        Head1()
    }
      Row({space:20}){
          Image($r('app.media.dongman2')).width(80)
        Column(){
          Row({space:10}){
            Text('
叫我姨太好了').fontWeight(FontWeight.Bolder).fontSize(20)
            Text('♀')
            Text('VVIPⅡ')
          }.padding(3)
          Row({space:10}){
              Text('938.8
').fontSize(12)
              Text('
粉丝').fontColor('#9E9E9E').fontSize(10)
              Text('780').fontSize(12)
              Text('
关注').fontColor('#9E9E9E').fontSize(10)
              Text('1.05
亿').fontSize(12)
              Text('
转评赞').fontColor('#9E9E9E').fontSize(10)
          }.padding(3)
        }.alignItems(HorizontalAlign.Start)
      }.justifyContent(FlexAlign.Center).width('100%')
      Row(){}.height(20)
      Column({space:5}){
        Row({space:5}){
          Button('
热门娱乐博主数据飙升').width(160).fontSize(12).height(20).backgroundColor('#EEEEEE').fontColor('#FB8845')
          Button('
娱乐博主').width(80).fontSize(12).height(20).backgroundColor('#EEEEEE').fontColor('#FB8845')
        }
        Row({space:5}){
          Text('v').fontColor('#9E9E9E').fontSize(15)
          Text('
微博电视团成员 2022年辰星计划博主').fontSize(12).fontColor('#9E9E9E')
        }
      }.margin({left:20})
      Row(){
        Row(
          {space:5}){
          Image($r('app.media.chao')).width(30)
          Text('
粉丝群')
        }
        Row({space:5}){
          Text('4
个群聊')
          Image($r('app.media.arrow_right')).width(25)
        }
      }.width('100%').backgroundColor('#F5F5F5').justifyContent(FlexAlign.SpaceBetween).padding(10).margin(5 )
      Tabs({controller: this.controller}) {
        TabContent(){
          Column(){
            Divider().strokeWidth(15).color('#F5F5F5')
            List(){
              ListItem(){
                Column(){
                  Row({space:15}){
                    Image($r
                    ('app.media.zhuanfa')).width(15)
                    Column({space:10}){
                      Text('
她发布了视频')
                      Row(){
                        Image($r('app.media.xincaoliu')).width(40)
                        Column({space:10}){
                          Text('
歌手的神秘人疑似是Charlie...')
                          Text('5-10 · ·14.5
万次观看').fontSize(12)
                        }.alignItems(HorizontalAlign.Start).padding(10)
                      }.backgroundColor('#F5F5F5')
                    }.alignItems(HorizontalAlign.Start)
                  }.alignItems(VerticalAlign.Top).padding(10)
                }
              }
              ListItem(){
                Column(){
                  Row({space:15}){
                    Image($r('app.media.zhuanfa')).width(15)
                    Column({space:10}){
                      Text('
她发布了视频')
                      Row(){
                        Image($r('app.media.xincaoliu')).width(40)
                        Column({space:10}){
                          Text('
歌手的神秘人疑似是Charlie...')
                          Text('5-10 · ·14.5
万次观看').fontSize(12)
                        }.alignItems(HorizontalAlign.Start).padding(10)
                      }.backgroundColor('#F5F5F5')
                    }.alignItems(HorizontalAlign.Start)
                  }.alignItems(VerticalAlign.Top).padding(10)
                }
              }
              ListItem(){
                Column(){
                  Row({space:15}){
                    Image($r('app.media.zhuanfa')).width(15)
                    Column({space:10}){
                      Text('
她发布了视频')
                      Row(){
                        Image($r('app.media.xincaoliu')).width(40)
                        Column({space:10}){
                          Text('
歌手的神秘人疑似是Charlie...')
                          Text('5-10 · ·14.5
万次观看').fontSize(12)
                        }.alignItems(HorizontalAlign.Start).padding(10)
                      }.backgroundColor('#F5F5F5')
                    }.alignItems(HorizontalAlign.Start)
                  }.alignItems(VerticalAlign.Top).padding(10)
                }.height('100%')
              }
            }
            .divider({
              strokeWidth: 1,
              startMargin: 60,
              endMargin: 10,
              color: '#ffe9f0f0'
            })
          }
        }
          .tabBar(this.TabBuilder(0))
        TabContent(){
          Column(){
            Row(){
              Row({space:5}){
                Text('
全部微博(34765')
              }
              Row({space:5}){
                Image($r('app.media.bhead3')).width(25)
                Text('
筛选')
              }
            }.width('100%').backgroundColor('#F5F5F5').justifyContent(FlexAlign.SpaceBetween).padding(10)
            Column(){
              Row(){
                Image($r('app.media.dongman2')).width(50)
                Column(){
                  Text('
叫我姨太好了')
                  Text('27
分钟前')
                }.alignItems(HorizontalAlign.Start).padding(10)

              }
              Text('
有些人做了于适生平小列表,看完只有三个字感慨:好精彩👍').padding(10)
              Image($r('app.media.bliuyifei')).width('70%')
              Row(){
                Row({space:10}){
                  Image($r('app.media.fenxiang')).width(25)
                  Text('2')
                }
                Row({space:10}){
                  Image($r('app.media.pinglun')).width(35)
                  Text('13')
                }
                Row({space:10}){
                  Image($r('app.media.dianzan')).width(30)
                  Text('63')
                }
              }.justifyContent(FlexAlign.SpaceAround).width('100%').margin({top:10})
            }.alignItems(HorizontalAlign.Start)
          }.justifyContent(FlexAlign.Start).height('100%')
        }
          .tabBar(this.TabBuilder(1))
        TabContent(){
          Column(){
            Row({space:10}){
              Image($r('app.media.dianzan')).width(20)
              Text('
')
              Image($r('app.media.arrow_right')).width(15)
            }.backgroundColor('white').width('90%').justifyContent(FlexAlign.Center).margin(15).padding(10)
            Row(){
              Column(){
                Image($r('app.media.cai')).width(170).height(200)
                Text('
汪峰新恋情被拍了,对方是93年的女网红森林...').width(150)
                Row(){
                  Text('8
小时前')
                  Row(){
                    Image($r('app.media.dianzan')).width(15)
                    Text('234')
                  }
                }.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10)

              }.width('50%').backgroundColor('white')
              Column(){
                Image($r('app.media.cai')).width(170).height(200)
                Text('
汪峰新恋情被拍了,对方是93年的女网红森林...').width(150)
                Row(){
                  Text('8
小时前')
                  Row(){
                    Image($r('app.media.dianzan')).width(15)
                    Text('234')
                  }
                }.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10)
              }.width('50%').backgroundColor('white')
            }
          }.height('100%')

        }.backgroundColor('#F5F5F5')
          .tabBar(this.TabBuilder(2))
      }
      .barWidth(300)
    }.alignItems(HorizontalAlign.Start)
  }
  @Builder TabBuilder(index: number) {
    Row() {
      if (index === 0) {
        Badge({
          value: '',
          style: { badgeSize: 6, badgeColor: '#FA2A2D' }
        }) {
         Text('
动态')
        }
        .height(24)
      } else if (index===1){
        Image($r('app.media.7suo'))
          .width(24)
          .height(24)
      Text('
微博')
        }
      else{
        Image($r('app.media.7suo'))
          .width(24)
          .height(24)
        Text('
视频')
      }
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)

  }


}

  • 26
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值