微博-消息-发现群页面

@￥月亮

于 2024-05-10 15:22:31 发布

阅读量804

点赞数 20

文章标签：鸿蒙系统

本文链接：https://blog.csdn.net/m0_74164855/article/details/138667605

版权

微博-消息-发现群页面

如何制作发现群的页面?将页面分为7个部分，分别是：表头、搜索、图片、轮播、主体、感兴趣、list循环页面。

表头

表头我用到自定义组件，里面有三个部分，返回键、文本和图片。这里返回键用的是输入法的符号表示的（输入法输入‘zuo’）。Blank是填空空白。

@Component
struct Head{
build(){
    Row({space:10}){
      Text('←')
        .fontSize(35)
        .width(40)
             Blank()
      Text('发现群')
        .fontSize(20)
      Blank()
      Image($r('app.media.gengduo'))
        .width(30)
    }
    .width('100%')
    .padding(10)
}
}

在主体框架中调用。

@Entry
@Component
struct Group {

build() {
Column(){
//表头
Head()

}}}

搜索

使用TextInput添加输入框，这里面有个搜索的图案，使用的是层叠。这里面使用了一个组件控制器，在struct Group中写。

TextInputController:TextInputController = new TextInputController()

在build中写入文本，这里添加了提示文本：placeholder。

//搜索
Stack(){
TextInput({placeholder:'搜索群',controller:this.TextInputController})
.textAlign(TextAlign.Center)
.width('95%')
Image($r('app.media.search')).width('25').margin({right:80})
}

粉丝群

这里只需要一张图片，调整大小即可。

//粉丝群
Image($r("app.media.group1")).width('100%').padding(10)

轮播

首先先在struct Group添加一个控制器。

private swiperController: SwiperController = new SwiperController()

轮播的画面我们使用的forEach循环来遍历数组。

定义class类定义数据类型。

class down{
img:ResourceStr
content:string
img1:ResourceStr
    constructor(img:ResourceStr,content:string,img1:ResourceStr) {
      this.img=img
      this.content=content
      this.img1=img1
    }
}

添加轮播需要添加的数据。

private downs:Array<down>=[
new down($r('app.media.2dongman1'),'小野...昨天20：37空降粉丝群',$r('app.media.arrow_right')),
new down($r('app.media.2dongman1'),'小野...昨天20：37空降粉丝群',$r('app.media.arrow_right')),
new down($r('app.media.2dongman1'),'小野...昨天20：37空降粉丝群',$r('app.media.arrow_right'))
]

在build添加轮播组件，利用forEack循环遍历数组。下面是这里利用到的属性，除了最后一个是number类型，剩下的是都是boolean类型。

Indicator：导航点指示器，

Vertical：纵向滑动，

Loop：循环，

autoPlay：自动播放，

interval：使用自动播放时播放的时间间隔。

Swiper(this.swiperController){
ForEach(this.downs,(item:down)=>{
    Row(){
      Row({space:15}){
        Image(item.img).width(30)
        Text(item.content)
      }.margin({left:10})
      Image(item.img1).width(20)
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .padding(5)
    .width('95%')
})
}
.indicator(false)
.vertical(true)
.loop(true)

.autoPlay(true)
.interval(1500)

这里添加了一个Divider（）分割线。

Divider().color('#EEEEEE').strokeWidth(10).width('95%')

主体

这里用的list列表中嵌套ForEach循环，这里面为了方便，图片只使用了教育的图片。

定义class类定义数据类型。

class contiltle{
img2:ResourceStr
content1:string
constructor( img2:ResourceStr,content1:string) {
this.img2=img2
this.content1=content1
}
}

添加列表需要添加的数据。

使用ForEach循环遍历再调整样式。

listDirection（Axis.Horizontal）：主轴方向为垂直方向，

lanes：行数。

List(){
    ForEach(this.contitles,(item:contiltle)=>{
      ListItem(){
      Row(){
        Column({space:10}){
          Image(item.img2).width(30)
          Text(item.content1).fontSize(14)
        }
      }.width('20%')
        .justifyContent(FlexAlign.Center)
      }
    })
}
.listDirection(Axis.Horizontal)
.width('100%')
.lanes(2)
.height(160)
.padding(15)

在添加一次分割线。

Divider().color('#EEEEEE').strokeWidth(10).width('95%')

感兴趣

这里面有一个黄色的竖线，和文本。黄色的竖线用的是Shape中的Rect（矩形），再用fill填充颜色。

Row({space:10}){
Shape(){
Rect({width:4,height:25}).fill('#FA5F55')
}
Text('你可能感兴趣')
}.padding(8)
.justifyContent(FlexAlign.Start)
.width('100%')

添加一个分割线。

Divider().width('95%').color('#EEEEEE')

Liat循环

这里也使用的list嵌套ForEach循环。

- 定义class类的数据类型。

class interest{
Himg:ResourceStr
name:string
title:string
content3:string
Fimg:ResourceStr
constructor( Himg:ResourceStr,name:string,title:string,content:string,Fimg:ResourceStr) {
    this.Himg=Himg
    this.name=name
    this.title=title
    this.content3=content
    this.Fimg=Fimg
}
}

- 添加感兴趣群的数据

private interests:Array<interest>=[
new interest($r('app.media.2dongman5'),'真好吃','246人','野生炸姐的粉丝群',$r('app.media.Group_qun')),
new interest($r('app.media.2dongman5'),'真好吃','246人','野生炸姐的粉丝群',$r('app.media.Group_qun')),
new interest($r('app.media.2dongman5'),'真好吃','246人','野生炸姐的粉丝群',$r('app.media.Group_qun')),
new interest($r('app.media.2dongman5'),'真好吃','246人','野生炸姐的粉丝群',$r('app.media.Group_qun'))

]

- 、使用ForEach循环遍历再调整样式。

BarState.Auto：表示按需显示滚动条。

List(){
ForEach(this.interests,(item:interest)=>{
    ListItem(){
      Row(){
        Row({space:15}){
          Image(item.Himg).width(60)
          Column({space:5}){
            Text(item.name).fontSize(14)
      Text(item.title).fontSize(10).fontColor('#FA5F55').backgroundColor('#FDDDCA')
            Text(item.content3).fontSize(10)
          }.alignItems(HorizontalAlign.Start)
        }
          Image(item.Fimg).width(80)
      }.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(15).alignItems(VerticalAlign.Top)
    }

})
}.scrollBar(BarState.Auto)
.height('40%')
.divider({
strokeWidth: 1,
startMargin: 60,
endMargin: 10,
color: '#ffe9f0f0'
})

源代码

import router from '@ohos.router'
import Network from '@system.network'
//表头部分
@Component
export default struct Head{
build(){
    Row({space:10}){
      Text('←')
        .fontSize(35)
        .width(40)
        .onClick(()=>{
          //返回上一级
          router.back()
        })
      Blank()
      Text('发现群')
        .fontSize(20)
      Blank()
      Image($r('app.media.gengduo'))
        .width(30)
    }
    .width('100%')
    .padding(10)
}
}
class down{
img:ResourceStr
content:string
img1:ResourceStr
    constructor(img:ResourceStr,content:string,img1:ResourceStr) {
      this.img=img
      this.content=content
      this.img1=img1
    }
}
class contiltle{
img2:ResourceStr
content1:string
constructor( img2:ResourceStr,content1:string) {
    this.img2=img2
    this.content1=content1
}
}
class interest{
Himg:ResourceStr
name:string
title:string
content3:string
Fimg:ResourceStr
constructor( Himg:ResourceStr,name:string,title:string,content:string,Fimg:ResourceStr) {
    this.Himg=Himg
    this.name=name
    this.title=title
    this.content3=content
    this.Fimg=Fimg
}
}
@Entry
@Component
struct Group {
TextInputController:TextInputController = new TextInputController()
private swiperController: SwiperController = new SwiperController()
//轮播页面
private downs:Array<down>=[
    new down($r('app.media.2dongman1'),'小野...昨天20：37空降粉丝群',$r('app.media.arrow_right')),
    new down($r('app.media.2dongman1'),'小野...昨天20：37空降粉丝群',$r('app.media.arrow_right')),
    new down($r('app.media.2dongman1'),'小野...昨天20：37空降粉丝群',$r('app.media.arrow_right'))
]
//组件页面
private contitles:Array<contiltle>=[
    new contiltle($r('app.media.Group_title'),'教育'),
    new contiltle($r('app.media.Group_title'),'美妆'),
    new contiltle($r('app.media.Group_title'),'幽默搞笑'),
    new contiltle($r('app.media.Group_title'),'动漫'),
    new contiltle($r('app.media.Group_title'),'时尚'),
    new contiltle($r('app.media.Group_title'),'美食'),
    new contiltle($r('app.media.Group_title'),'母婴育儿'),
    new contiltle($r('app.media.Group_title'),'读书作家'),
    new contiltle($r('app.media.Group_title'),'游戏'),
    new contiltle($r('app.media.Group_title'),'更多')
]
//感兴趣群页面
private interests:Array<interest>=[
    new interest($r('app.media.2dongman5'),'真好吃','246人','野生炸姐的粉丝群',$r('app.media.Group_qun')),
    new interest($r('app.media.2dongman5'),'真好吃','246人','野生炸姐的粉丝群',$r('app.media.Group_qun')),
    new interest($r('app.media.2dongman5'),'真好吃','246人','野生炸姐的粉丝群',$r('app.media.Group_qun')),
    new interest($r('app.media.2dongman5'),'真好吃','246人','野生炸姐的粉丝群',$r('app.media.Group_qun'))
]
build() {
    Column(){
      //表头
      Head()
      //搜索
      Stack(){
        TextInput({placeholder:'搜索群',controller:this.TextInputController})
          .textAlign(TextAlign.Center)
          .width('95%')
        Image($r('app.media.search')).width('25').margin({right:80})
      }
      //粉丝群
      Image($r("app.media.group1")).width('100%').padding(10)
      //轮播
      Swiper(this.swiperController){
        ForEach(this.downs,(item:down)=>{
          Row(){
            Row({space:15}){
              Image(item.img).width(30)
              Text(item.content)
            }.margin({left:10})
            Image(item.img1).width(20)
          }
          .justifyContent(FlexAlign.SpaceBetween)
          .padding(5)
          .width('95%')
        })
      }
      .indicator(false)
      .vertical(true)
      .loop(true)
      .autoPlay(true)
      .interval(1500)
      Divider().color('#EEEEEE').strokeWidth(10).width('95%')
      //教育、美妆...页面
      List(){
          ForEach(this.contitles,(item:contiltle)=>{
            ListItem(){
            Row(){
              Column({space:10}){
                Image(item.img2).width(30)
                Text(item.content1).fontSize(14)
              }
            }.width('20%')
              .justifyContent(FlexAlign.Center)
            }
          })
      }
      .listDirection(Axis.Horizontal)
      .width('100%')
      .lanes(2)
      .height(160)
      .padding(15)
      Divider().color('#EEEEEE').strokeWidth(10).width('95%')
      //你可能感兴趣
      Row({space:10}){
        Shape(){
          Rect({width:4,height:25}).fill('#FA5F55')
        }
        Text('你可能感兴趣')
      }.padding(8)
      .justifyContent(FlexAlign.Start)
      .width('100%')
      Divider().width('95%').color('#EEEEEE')
      //感兴趣的群
      List(){
        ForEach(this.interests,(item:interest)=>{
          ListItem(){
            Row(){
              Row({space:15}){
                Image(item.Himg).width(60)
                Column({space:5}){
                  Text(item.name).fontSize(14)                  Text(item.title).fontSize(10).fontColor('#FA5F55').backgroundColor('#FDDDCA')
                  Text(item.content3).fontSize(10)
                }.alignItems(HorizontalAlign.Start)
              }
                Image(item.Fimg).width(80)
            }.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(15).alignItems(VerticalAlign.Top)
          }
        })
      }.scrollBar(BarState.Auto)
      .height('40%')
      .divider({
        strokeWidth: 1,
        startMargin: 60,
        endMargin: 10,
        color: '#ffe9f0f0'
      })
    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)
}
}

页面效果

@￥月亮

关注

20
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
微博-消息-发现群页面

表头我用到自定义组件，里面有三个部分，返回键、文本和图片。这里返回键用的是输入法的符号表示的（输入法输入‘zuo’）。使用TextInput添加输入框，这里面有个搜索的图案，使用的是层叠。将页面分为7个部分，分别是：表头、搜索、图片、轮播、主体、感兴趣、list循环页面。黄色的竖线用的是Shape中的Rect（矩形），再用fill填充颜色。这里用的list列表中嵌套ForEach循环，这里面为了方便，图片只使用了教育的图片。在build中写入文本，这里添加了提示文本：placeholder。
复制链接

扫一扫