瀑布流布局
waterFlow和Grid布局类似，同样支持columnsTemplate和rowsTemplate通过 fr的形式对行和列进行分割。瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局。●waterflow的基本使用。和Grid布局非常的类似。
·
WaterFlow和Grid布局非常的类似
瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局。
瀑布流布局的特点:
- 每一列盒子的宽度一致, 盒子的高度不一致
- 自上而下, 形成参差错落效果
●waterflow的基本使用
@Entry
@Component
struct WaterFlowCase {
build() {
WaterFlow() {
// FlowItem
FlowItem() {
Image("https://img2.baidu.com/it/u=2900801315,2560576511&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")
.height(150)
}
FlowItem() {
Image("https://img2.baidu.com/it/u=1898128106,2722598876&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800")
.height(200)
}
FlowItem() {
Image("https://img1.baidu.com/it/u=4124726588,2153906841&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
.height(120)
}
FlowItem() {
Image("https://img0.baidu.com/it/u=2723682125,109064216&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
.height(140)
}
FlowItem() {
Image("https://img2.baidu.com/it/u=2900801315,2560576511&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")
.height(150)
}
FlowItem() {
Image("https://img2.baidu.com/it/u=1898128106,2722598876&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800")
.height(220)
}
FlowItem() {
Image("https://img1.baidu.com/it/u=4124726588,2153906841&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
.height(200)
}
FlowItem() {
Image("https://img0.baidu.com/it/u=2723682125,109064216&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
.height(200)
}
FlowItem() {
Image("https://img2.baidu.com/it/u=2900801315,2560576511&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")
.height(150)
}
FlowItem() {
Image("https://img2.baidu.com/it/u=1898128106,2722598876&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800")
.height(200)
}
FlowItem() {
Image("https://img1.baidu.com/it/u=4124726588,2153906841&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
.height(200)
}
FlowItem() {
Image("https://img0.baidu.com/it/u=2723682125,109064216&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
.height(200)
}
}
.columnsTemplate("1fr 1fr 1fr")
.columnsGap(20)
.rowsGap(20)
.padding(20)
}
}waterFlow和Grid布局类似，同样支持columnsTemplate和rowsTemplate通过 fr的形式对行和列进行分割
- 例子-做一个瀑布流的图片预览器
import { promptAction } from '@kit.ArkUI'
interface GoodItem {
id: number
goods_name: string
goods_img: string
goods_price: number
goods_count: number
}
@Entry
@Component
struct Demo16 {
@State list: GoodItem[] = [
{
"id": 1,
"goods_name": "班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣",
"goods_img": "https://cdn.nlark.com/yuque/0/2024/webp/38706227/1724570136138-1a98ef70-06fc-483a-b102-c8c77b9b56d8.webp",
"goods_price": 108,
"goods_count": 1,
},
{
"id": 2,
"goods_name": "嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮",
"goods_img": "https://cdn.nlark.com/yuque/0/2024/webp/38706227/1724570136159-802bc994-9a0c-4581-8b48-974cf6cdacd8.webp",
"goods_price": 129,
"goods_count": 1,
},
{
"id": 3,
"goods_name": "思蜜怡2020休闲运动套装女春秋季新款时尚大码宽松长袖卫衣两件套",
"goods_img": "https://cdn.nlark.com/yuque/0/2024/webp/38706227/1724570136044-ab511c7b-480e-40cd-912c-a9179edf94cc.webp",
"goods_price": 198,
"goods_count": 1,
},
{
"id": 4,
"goods_name": "思蜜怡卫衣女加绒加厚2020秋冬装新款韩版宽松上衣连帽中长款外套",
"goods_img": "https://cdn.nlark.com/yuque/0/2024/webp/38706227/1724570136277-8a5be410-adc1-472c-8d7b-7069b54ddd32.webp",
"goods_price": 99,
"goods_count": 1,
},
{
"id": 5,
"goods_name": "幂凝早秋季卫衣女春秋装韩版宽松中长款假两件上衣薄款ins盐系外套潮",
"goods_img": "https://cdn.nlark.com/yuque/0/2024/webp/38706227/1724570136563-3a0072c7-b7f6-46f1-bcc0-61256b4a2ae1.webp",
"goods_price": 156,
"goods_count": 1,
},
{
"id": 6,
"goods_name": "ME&CITY女装冬季新款针织抽绳休闲连帽卫衣女",
"goods_img": "https://cdn.nlark.com/yuque/0/2024/webp/38706227/1724570136266-16c156fa-2204-4ded-99fe-3eb01b982e1d.webp",
"goods_price": 142.8,
"goods_count": 1,
},
{
"id": 7,
"goods_name": "幂凝假两件女士卫衣秋冬女装2020年新款韩版宽松春秋季薄款ins潮外套",
"goods_img": "https://cdn.nlark.com/yuque/0/2024/webp/38706227/1724570136306-9402c839-f963-4cb3-9248-2f9e756e4ceb.webp",
"goods_price": 219,
"goods_count": 2,
},
{
"id": 8,
"goods_name": "依魅人2020休闲运动衣套装女秋季新款秋季韩版宽松卫衣 时尚两件套",
"goods_img": "https://cdn.nlark.com/yuque/0/2024/webp/38706227/1724570136500-c5559c3a-761f-4c8a-8f67-a88407267692.webp",
"goods_price": 178,
"goods_count": 1,
},
{
"id": 9,
"goods_name": "芷臻(zhizhen)加厚卫衣2020春秋季女长袖韩版宽松短款加绒春秋装连帽开衫外套冬",
"goods_img": "https://cdn.nlark.com/yuque/0/2024/webp/38706227/1724570136450-8c48056c-2ef0-4800-a47c-09fb9ccc66af.webp",
"goods_price": 128,
"goods_count": 1,
},
{
"id": 10,
"goods_name": "Semir森马卫衣女冬装2019新款可爱甜美大撞色小清新连帽薄绒女士套头衫",
"goods_img": "https://cdn.nlark.com/yuque/0/2024/webp/38706227/1724570136698-97259381-1bcf-465f-bead-e541e513929c.webp",
"goods_price": 153,
"goods_count": 1,
}
]
@State isLoading: boolean = false
@Builder
GoodsItemBuilder(item: GoodItem, index: number) {
Column({ space: 10 }) {
Image(item.goods_img)
.height(index % 2 == 0 ? 220 : 180)
.borderRadius(10)
Text(item.goods_name)
.lineHeight(25)
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
}
@Builder
FooterBuilder() {
Row() {
Text('数据加载中...')
LoadingProgress()
.width(24)
.aspectRatio(1)
}
.width('100%')
.height(60)
.justifyContent(FlexAlign.Center)
}
// 加载更多数据
loadMoreData() {
return new Promise<boolean>((resolve, reject) => {
// 模拟发送网络请求
setTimeout(() => {
// this.list.push(...this.list.slice(0, 9)) // es6的语法糖
this.list = this.list.concat(this.list.slice(0, 9)) // es5的写法
resolve(true)
}, 2000)
})
}
build() {
WaterFlow({ footer: this.FooterBuilder() }) {
ForEach(this.list, (item: GoodItem, index: number) => {
FlowItem() {
this.GoodsItemBuilder(item, index)
}
})
}
.columnsTemplate('1fr 1fr')
.columnsGap(20)
.rowsGap(20)
.padding({ left: 20, right: 20 })
.onReachEnd(async () => {
// 加载下一页数据
// 频繁的请求 需要执行完上一次 再说 防抖节流 本质上降低频率
// 要做阀门控制
if (!this.isLoading) {
this.isLoading = true
await this.loadMoreData()
this.isLoading = false
promptAction.showToast({ message: '加载数据成功~' })
}
})
}
}适用HarmonyOS NEXT / API12或以上版本
更多推荐
12
0- 0
已为社区贡献1条内容
所有评论(0)