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 Grid拖动+删除?
17浏览 • 0回复 待解决
HarmonyOS Grid相关问题
300浏览 • 1回复 待解决
HarmonyOS Grid组件拖动异常
234浏览 • 1回复 待解决
HarmonyOS Grid拖动排序和长按冲突
313浏览 • 1回复 待解决
HarmonyOS 可移动GridItem的Grid组件
156浏览 • 1回复 待解决
HarmonyOS 使用Grid和GriItem组合的问题
209浏览 • 1回复 待解决
HarmonyOS 关于Grid组件拖拽排序的问题
299浏览 • 0回复 待解决
HarmonyOS Grid容器视图更新问题
382浏览 • 1回复 待解决
List列表组件如何改为横向显示的?
661浏览 • 1回复 待解决
Grid如何实现拖拽功能
2444浏览 • 1回复 待解决
HarmonyOS Grid自适应高度和拖拽问题
275浏览 • 1回复 待解决
js如何把list组件设置为横向的?
3951浏览 • 1回复 待解决
HarmonyOS 滑动冲突问题
275浏览 • 1回复 待解决
HarmonyOS Grid高度无法等分(横3竖2)
219浏览 • 1回复 待解决