Web_Person
简单的制作一个个人主页。在这里面我们需要制作一个表头，Tabs导航栏。这个·做的比较简单，所以比较复杂的东西。
- 表头
先自定义一个组件制作表头，这里面的使用的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)
}}
- 主体部分
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('有些人做了于适生平小列表，看完只有三个字感慨：好精彩