# GridRow布局如何设置滚动

#### 问题现象

在开发时，如果直接在GridRow栅格布局组件中放置大量内容，导致其总高度超出父容器，页面将无法通过滚动来查看被遮挡的部分，影响了内容的完整展示和用户体验。当内容超出容器高度，如何进行滚动操作。

#### 背景知识

*   GridRow是用于创建栅格布局的核心组件，用于将子组件按行排列在网格中，支持自动对齐、响应式布局和样式定制。GridRow为栅格容器组件，需与GridCol联合使用。
*   Scroll：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。例如当子组件的内容尺寸（高度或宽度）超过Scroll容器的可视区域时，用户可以通过滑动来浏览完整内容。它支持垂直、水平或双向滚动，是解决内容溢出的关键组件。

#### 解决方案

由于GridRow组件本身不内置滚动功能，要实现内容溢出时滚动查看的效果，常见的解决方案是将GridRow嵌套在Scroll组件内部。通过为外层的Scroll组件设置一个明确的高度限制，当GridRow的实际高度超过这个限制时，滚动条便会自动激活。

```
@Entry
@Component
struct GridRowExample {
  @State gridRowData: Array<number> = [];

  aboutToAppear(): void {
    for (let index = 0; index < 20; index++) {
      this.gridRowData.push(index);
    }
  }

  build() {
    Column() {
      // 使用Scroll组件包裹GridRow使其可以进行滚动
      Scroll() {
        GridRow({
          columns: 5,
          gutter: { x: 5, y: 10 },
          breakpoints: {
            value: ['400vp', '600vp', '800vp'],
            reference: BreakpointsReference.WindowSize
          },
          direction: GridRowDirection.Row
        }) {
          ForEach(this.gridRowData, (item: number) => {
            GridCol({
              span: {
                xs: 1,
                sm: 2,
                md: 3,
                lg: 5
              },
              offset: 0,
              order: 0
            }) {
              Row() {
                Text(item.toString());
              }
              .justifyContent(FlexAlign.Center)
              .width('100%')
              .height(40);
            };
          });
        }.width('100%');
      }
      .height('100%');
    }
    .width('80%')
    .margin({ left: 30, top: 200 })
    .height(130)
    .borderWidth(1);
  }
}
```

#### 常见FAQ

Q：GridRow内设置多个GridCol组件后发现触摸响应区域与实际点击区域不匹配。

A：GridRow和GridCol里的子组件使用相对定位时，可能存在组件定位偏移导致触摸事件异常，具体需要确保相对定位的位置或尺寸不会影响子组件的事件响应区域。

Q：使用GridRow组件进行布局开发，除了无法进行滚动，发现也无法进行拖拽，GridRow组件是否支持拖拽交换？

A：GridRow组件只是布局容器组件，不具备Grid组件的滚动、拖拽等能力。实现拖拽交换可以使用Grid组件，具体可参考Grid网格元素拖拽交换。