瀑布流WaterFlow
WaterFlow 组件的用法和Grid组件类似，这里只演示最核心的用法：实现竖直方向的瀑布流(默认)
一、基本语法
WaterFlow({参数}) {
FlowItem() {
// 子组件
}
FlowItem() {
// 子组件
}
}
.属性()
1.1常见的参数：
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| footer | CustomBuilder | 否 | 设置WaterFlow尾部组件。 |
| scroller | Scroller | 否 | 可滚动组件的控制器，与可滚动组件绑定。**说明：**不允许和其他滚动类组件，如：List、Grid、Scroll等绑定同一个滚动控制对象。 |
1.2常用的属性
| 名称 | 参数类型 | 描述 |
|---|---|---|
| columnsTemplate | string | 设置当前瀑布流组件布局列的数量，不设置时默认1列。例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。默认值：'1fr' |
| rowsTemplate | string | 设置当前瀑布流组件布局行的数量，不设置时默认1行。例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。需要配合如下一起使用：.layoutDirection(FlexDirection.Row) // 设置滚动方向为水平.rowsTemplate('1fr 1fr') |
| columnsGap | Length | 设置列与列的间距。默认值：0 |
| rowsGap | Length | 设置行与行的间距。默认值：0 |
| enableScrollInteraction | boolean | 设置是否支持滚动手势，当设置为false时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。默认值：true |
| scrollBar | BarState | 设置滚动条状态。默认值：BarState.Off**说明：**滚动条位置和长度以已布局过的总高度和当前偏移为准，在瀑布流布局全部子节点之前随着滑动持续变化。 |
| edgeEffect | value:EdgeEffect,options?:EdgeEffectOptions11+ | 设置边缘滑动效果。- value：设置瀑布流组件的边缘滑动效果，支持弹簧效果和阴影效果。默认值：EdgeEffect.None- options：设置组件内容大小小于组件自身时，是否开启滑动效果。默认值：false |
二、案例
2.1 实现小红书首页的UI设计和内容展示
如图所示：
2.2 下面进行解析
2.2.1 思路
我认为要实现这个功能首先需要使用WaterFlow这个组件 ——> 还有需要下面的导航栏Tabs这个组件来实现，下面我将导航栏的代码和效果图在下面展示： Tabs:
2.2.2 Tabs模板展示和源码实现
源码展示：
// import { num } from '../utiles/Tools'
import { num } from '../utiles/Tools'
// @Extend(Text)
// function textextdens(number:number) {
//
// }
@Entry
@Component
struct Index {
@State
num: number = 0
@Builder
TabsBuilder(str: string, index: number) {
if (index == 3) {
Badge({
count: 10,
position: BadgePosition.RightTop,
style: {
badgeColor: Color.Red,
badgeSize: 10,
borderWidth: 1,
borderColor: Color.Pink
}
}) {
Text(str)
.fontSize(18)
.fontColor(this.num == index ? Color.Black : Color.Gray)
}
} else {
if (str == '') {
Image($r('app.media.app_icon'))
.width(25)
} else {
Text(str)
.fontSize(18)
.fontColor(this.num == index ? Color.Black : Color.Gray)
}
}
}
build() {
Column() {
Tabs() {
TabContent() {
}
.tabBar(this.TabsBuilder('首页', 0))
TabContent() {
}
.tabBar(this.TabsBuilder('购物', 1))
TabContent() {
}
.tabBar(this.TabsBuilder('', 2))
TabContent() {
}
.tabBar(this.TabsBuilder('消息', 3))
TabContent() {
}
.tabBar(this.TabsBuilder('我', 4))
}
.onTabBarClick((index) => {
this.num = index
console.log('索引值为：', index)
})
.barPosition(BarPosition.End)
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
}
}
小红书案例的源码展示
/*
*
* 实现小红书的视频显示布局
*
* */
interface WaterFlowItem {
nickName: string
avatar: string // 人头像
cover: string // 覆盖的图片
likedCount: string
displayTitle: string
}
@Entry
@Component
struct waterFlowDemo {
list: WaterFlowItem[] = [
{
nickName: 'superJ',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/6101120d28d08a14c96759b7.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/b58b355cd1b3604b72c41d41d4549e01/1000g0082jv8olpaii0004a1mpf511sca35ugh8g!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '文华东方的神级果酱 玫瑰园里的草莓喷泉'
},
{
nickName: '小红薯66BD15F5',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/645b7f8f2a34639eb26eb1cd.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/296bb944c637c56f533fe1aed21136fd/1000g0082k926h82ja0005nt74gbg91qsr17itro!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '懒人做饭47 '
},
{
nickName: '再吃四次舒芙蕾',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo30ujteigjl8005oeh18r41d5ijl2bklo',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/73a6cab445054f40a996b53a5797e445/1000g0082jfneprmio0005oeh18r41d5i2d9nnlo!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '请吃饭的漂亮姐姐💗'
},
{
nickName: 'KL吃透透',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/63a95f04877f58de106fcce1.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/1479fd7e1bf8f9475e4c2b426665c6ad/110/0/01e479a148ba255f001000000001887b1e25fb_0.jpg!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: 'Ampang太子园道地风味麻辣板面！'
},
{
nickName: '何阿姨hoayee',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/5ef97c8fecd7e90001debc55.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/597943aa8a0070dfb896553a1cc9879d/1000g0082kk3sgkaj403045l90cg5tusmfm3c14g!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '广州的！ '
},
{
nickName: '農場小高與老墨',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/62681accad8eea75cc37208a.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/3e09fda03661e3e8c9a211b8210fb8c3/1000g0082jisdktij20005nvtbqa084kmjcphcqo!nc_n_webp_prv_1',
likedCount: '9',
displayTitle: '農場小高//加州雷尼爾黃櫻桃'
},
{
nickName: '美食二胖',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/641aadbae33a6ed3c5135160.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/8c0cd5c716c01198d0c6d62250d9b49c/1000g0082k9jh4jej40605niaoqv09dglfivfmj8!nc_n_webp_prv_1',
likedCount: '1千+',
displayTitle: '发面美食做法 '
},
{
nickName: '单小姐的生活碎片',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/6456eed6777659a44a2320c6.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/c9de577e892dd171ea5cea839153f513/1000g0082lb2fh28j20005n8vahtkda7f0ufs98g!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '我的私藏配方给你们～巧克力奶冻'
},
{
nickName: 'cherry baby',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo30naf54j160704a7mekms59t4cfbmm30',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/b89acb18b5a4d251e9ee9333e29a3be0/1000g0082k5kmtemj80004a7mekms59t4s7uld2o!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '絕美餐廳推介📸｜露天玻璃屋｜神秘花園🌷'
},
{
nickName: '边角料',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/60181b82000000000100680a.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/e100b567b728b8f4b7085bf9cd518a88/1000g0082k8elq7qja0005o0o3e108q0aql10f5g!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '麻辣烫加辣吗 '
},
{
nickName: '短澤雅美',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/61d596ca7f97b8de68b6e6ea.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/eacd04e698e6fa273f488ad40d81fa25/1000g0082k4fdo7mj20005njbisdg8t4urbc7a08!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '札幌生活｜🥟🍺📺'
},
{
nickName: '馋嘴美芽',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/61e3f64342ea00a1d2e065fd.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/a0a3d0efd083517b4a2e1e0cdb67577f/1000g0082jasgqm0iu00044sdvu9rvha3isp2hm8!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '如果只能选一个！ '
},
{
nickName: '洛日Sunset.',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/1000g2jo2pni700ek80005nks1730940ao9q8ck0',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/5583cde05158dfab17c13b4485a96c43/1000g0082kevvsvsjc0005nks1730940avrqf7qg!nc_n_webp_prv_1',
likedCount: '1千+',
displayTitle: 'Sunset.丨🖤💗'
},
{
nickName: '吃货渣渣辉',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/63fa65e4c04ea1143dd05196.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/8dacefef5a3b2219f09572907b43e13e/1000g0082kkdmjhmii0105ndmvh1081timcteee8!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '澳门康公夜市必吃的10款美食攻略，记得收藏'
},
{
nickName: '梅白说',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/63f8a08648fe215887373d17.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/837a423593025c87eb4801fcf2277cf1/1000g0082kcscjdsii00049r5mgmkualaf4tpnno!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '这个博主没骗人！做好的脆梅口感绝了！！'
},
{
nickName: '广厦食思书屋',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/64bc74ae16d44a0001e2d431.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/f221c3665d89664097fa10d6c2538d0e/1000g0082l676en8j406g4busucc8vr5jjmla1ho!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '配方分享-仿真🍓草莓！'
},
{
nickName: 'iiimogen',
avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/62e1560cbfd144a5cb45ca67.jpg',
cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/b8d0dd425b27219eac84ef3f51a7f4a5/1000g0082ksn7pkoja00g5ncnf7t08jdcnm6nmoo!nc_n_webp_prv_1',
likedCount: '10+',
displayTitle: '呼吸新鲜空气 '
}
]
build() {
Column() {
Image($r('app.media.ic_xhs_top'))
.width('100%')
WaterFlow() {
ForEach(this.list, (item: WaterFlowItem) => {
FlowItem() {
Column() {
Image(item.cover)
.width('100%')
.backgroundColor(Color.Gray)
Column({ space: 10 }) {
Text(item.displayTitle)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
Row() {
Row({ space: 5 }) {
Image(item.avatar)
.width(20)
.borderRadius(10)
Text(item.nickName)
.fontSize(12)
}
Row({ space: 5 }) {
Image($r('app.media.ic_public_favor'))
.width(15)
.fillColor(Color.Gray)
Text(item.likedCount)
.fontColor(Color.Gray)
.fontSize(12)
}
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.padding(10)
}
.borderRadius(5)
.clip(true)
}
.backgroundColor(Color.White)
})
}
.edgeEffect(EdgeEffect.Spring)
.backgroundColor('#f3f3f3')
.rowsGap(5)
.columnsGap(5)
.columnsTemplate('1fr 1fr')
.padding(5)
.layoutWeight(1)
Image($r('app.media.ic_xhs_bottom'))
.width('100%')
}
}
}
