HarmonyOS 鸿蒙Next 如何实现grid分列显示还有头部header标题效果，还能下拉刷新

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 如何实现grid分列显示还有头部header标题效果，还能下拉刷新

想要实现一个效果，可以分组显示，每个组有组的标题，组的标题还可以悬停在头部，每组数据都分开三列显示，还要可以实现下拉刷新的效果，我查看鸿蒙文档以后，发现直接用grid不行，没有头部组标题，用list的话，没发实现多列显示，不知道怎么弄了，有人知道可以怎么实现吗？

Harmonyos Next教程
2 回复

可以参考下面的demo

interface CustomData {
date: string,
img: string[]
}

@Entry
@Component
struct RefreshExample {
@State isRefreshing: boolean = false
@State data: CustomData[] = [
{
date: "2024/10",
img: ["http://www.baidu.com/1.png", "http://www.baidu.com/1.png"]
},
{
date: "2024/10",
img: ["http://www.baidu.com/1.png", "http://www.baidu.com/1.png", "http://www.baidu.com/1.png",
"http://www.baidu.com/1.png", "http://www.baidu.com/1.png",]
},
{
date: "2024/10",
img: ["http://www.baidu.com/1.png"]
}
]

@Builder
customRefreshComponent() {
Stack() {
Row() {
LoadingProgress().height(32)
Text("Refreshing...").fontSize(16).margin({ left: 20 })
}
.alignItems(VerticalAlign.Center)
}
.align(Alignment.Center)
.clip(true)
.constraintSize({ minHeight: 32 }) // 设置最小高度约束保证自定义组件高度随刷新区域高度变化时自定义组件高度不会低于minHeight
.width("100%")
}

build() {
Flex({ direction: FlexDirection.Column }) {
Row() {
Text("历史日签").padding(10)
}

Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent() }) {
List() {
ForEach(this.data, (item: CustomData) => {
ListItem() {
Column() {
Text(item.date || "").padding(10)
Grid(){
ForEach(item.img, (element: string) => {
GridItem(){
Text(element).height(200).width(100).backgroundColor("#eee")
}
})
}.columnsTemplate('1fr 1fr 1fr')
.rowsGap(10)
}.alignItems(HorizontalAlign.Start)
}
})
}
.onScrollIndex((first: number) => {
console.info(first.toString())
})
.width('100%')
.height('100%')
.alignListItem(ListItemAlign.Center)
.scrollBar(BarState.Off)
}
.backgroundColor(0x89CFF0)
.pullToRefresh(true)
.refreshOffset(64)
.onStateChange((refreshStatus: RefreshStatus) => {
console.info('Refresh onStatueChange state is ' + refreshStatus)
})
.onRefreshing(() => {
setTimeout(() => {
this.isRefreshing = false
}, 2000)
console.log('onRefreshing test')
})
.flexGrow(1)
.flexShrink(1)
.flexBasis(1)
}
}
}

更多关于HarmonyOS 鸿蒙Next 如何实现grid分列显示还有头部header标题效果，还能下拉刷新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，实现grid分列显示、头部header标题效果以及下拉刷新功能，可以通过以下方式实现：

  1. Grid分列显示：

    • 使用GridContainer组件，设置其columns属性指定列数。
    • 在GridContainer内添加多个GridItem组件，每个GridItem代表一个网格项。

  2. 头部Header标题效果：

    • 使用ComponentContainer或自定义组件作为header部分。
    • 将header组件放置在页面布局的最上方，通过Direction、Alignment等布局属性调整其位置。

  3. 下拉刷新：

    • 使用RefreshContainer组件实现下拉刷新功能。
    • 在RefreshContainer的onRefresh事件中编写刷新逻辑，比如重新加载数据。

示例代码片段（简化）：

<DirectionalLayout>
    <ComponentContainer id="header" />
    <RefreshContainer>
        <GridContainer columns="3">
            <GridItem>Item 1</GridItem>
            <GridItem>Item 2</GridItem>
            <!-- 更多GridItem -->
        </GridContainer>
    </RefreshContainer>
</DirectionalLayout>

上述代码展示了基本的布局结构，具体实现需根据实际需求调整。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部