HarmonyOS Grid横向滑动

想创建一个 2行5列的 网格布局,横向滑动 怎么创建?

HarmonyOS
2024-09-27 11:40:06
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

将Grid组件设置当前网格布局行数rowsTemplate且不设置列数columnsTemplate,当内容超出Grid组件宽度时,Grid可横向滚动进行内容展示。

具体可参考以下代码:

@Entry  
@Component  
struct GridExample {  
  @State numbers: String[] = ['0', '1', '2', '3', '4', '0', '1', '2', '3', '4']  
  scroller: Scroller = new Scroller()  
  
  build() {  
    Column({ space: 5 }) {  
      Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')  
      Grid(this.scroller) {  
        ForEach(this.numbers, (item: string, index: number) => {  
          GridItem() {  
            Column() {  
              Image($r('app.media.icon')).aspectRatio(1)  
                .height(90).width(90)  
              Text('incon').fontColor("#ff0000").fontSize('13fp').margin({ top: '5vp' })  
            }  
            .alignItems(HorizontalAlign.Center)  
            .justifyContent(FlexAlign.Center)  
  
          }  
          .alignSelf(ItemAlign.Center)  
        }, (item: string) => JSON.stringify(item))  
  
      }  
      .layoutDirection(GridDirection.Row)  
      .margin({ top: '20vp' })  
      .rowsTemplate('1fr 1fr')  
      .height('30%')  
    }.width('100%').margin({ top: 5 })  
  }  
}
分享
微博
QQ
微信
回复
2024-09-27 19:19:15
相关问题
HarmonyOS 自动横向滚动List
136浏览 • 1回复 待解决
HarmonyOS Grid拖动+删除?
144浏览 • 0回复 待解决
HarmonyOS Grid相关问题
383浏览 • 1回复 待解决
HarmonyOS Grid组件拖动异常
347浏览 • 1回复 待解决
HarmonyOS Grid拖拽动画问题
37浏览 • 1回复 待解决
HarmonyOS Tabs嵌套Grid问题
46浏览 • 1回复 待解决
List列表组件如何改为横向显示的?
939浏览 • 1回复 待解决
HarmonyOS 设备上Grid 无法触发onReachEnd
41浏览 • 1回复 待解决
HarmonyOS 可移动GridItem的Grid组件
280浏览 • 1回复 待解决
HarmonyOS Grid拖动排序和长按冲突
493浏览 • 2回复 待解决