HarmonyOS Grid实现滑动时无法修改 layoutDirection 属性

资料中rowsTemplate、columnsTemplate仅设置其中的一个:

元素按照设置的方向进行排布,超出Grid显示区域后,Grid可通过滚动的方式展示

此模式下以下属性不生效:layoutDirection

如何既满足 超出Grid显示区域后,Grid可通过滚动的方式展示,又可以设置 layoutDirection(即元素横向排列)

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

可以通过 Scroll和 Grid嵌套来实现,参考demo如下:

@Entry
@Component
struct GridExample {
  @State numbers: string[] = []

  aboutToAppear() {
    for (let i = 1; i <= 200; i++) {
      this.numbers.push(i + '')
    }
  }

  build() {
    Scroll() {
      Column({ space: 5 }) {
        Grid() {
          ForEach(this.numbers, (day: string) => {
            GridItem() {
              Text(day).fontSize(16).backgroundColor(0xF9CF93)
            }.width(40).height(80).borderWidth(2).borderColor(Color.Red)
          }, (day: string) => day)
        }
        .columnsGap(10)
        .rowsGap(10)
        .backgroundColor(0xFAEEE0)
        .layoutDirection(GridDirection.Row)
      }
      .width('90%').margin({ top: 5, left: 5, right: 5, bottom: 5 })

    }.width("100%")
    .height("100%")
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS tabs和grid实现滑动
29浏览 • 1回复 待解决
HarmonyOS Grid横向滑动
422浏览 • 1回复 待解决
键盘拉起列表无法上下滑动
2188浏览 • 1回复 待解决
HarmonyOS 动态修改List不让它滑动
80浏览 • 1回复 待解决
HarmonyOS 设备上Grid 无法触发onReachEnd
63浏览 • 1回复 待解决
HarmonyOS Scroll组件无法滑动
474浏览 • 1回复 待解决
HarmonyOS 滑动组件问题
35浏览 • 1回复 待解决
HarmonyOS Grid高度无法等分(横3竖2)
354浏览 • 1回复 待解决
Grid如何实现拖拽功能
2666浏览 • 1回复 待解决