How to Set Up Scrolling in GridRow Layout?

#harmonyos #gridrowlayout #scrollcomponent

Read the original article：How to Set Up Scrolling in GridRow Layout?

Problem Description

During development, if a large amount of content is directly placed in the GridRow component, the total height of the component will exceed that of the parent container. As a result, the page cannot be scrolled to view the blocked part, affecting the complete display of the content and user experience. When the content exceeds the height of the container, how can you perform scrolling operations?.

Background Knowledge

GridRow is the core component used to create a grid layout, arranging child components in rows within a grid, supporting automatic alignment, responsive layout, and style customization. GridRow is a grid container component that must be used in conjunction with GridCol.
Scroll: A scrollable container component that allows content to scroll when the layout size of its child components exceeds the size of the parent component. For example, when the content size (height or width) of a child component exceeds the visible area of the Scroll container, users can swipe to view the complete content. It supports vertical, horizontal, or bidirectional scrolling and is a key component for addressing content overflow.

Solution

Since the GridRow component itself does not have built-in scrolling functionality, a common solution to achieve the effect of scrolling to view overflow content is to nest the GridRow inside a Scroll component. By setting a clear height limit for the outer Scroll component, the scrollbar will automatically activate when the actual height of the GridRow exceeds this limit.

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

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

  build() {
    Column() {
      Scroll() {
        GridRow({
          columns: 2,
          gutter: { x: 2, y: 3 },
          breakpoints: {
            value: ['100vp', '200vp'],
            reference: BreakpointsReference.WindowSize
          },
          direction: GridRowDirection.Row
        }) {
          ForEach(this.gridRowData, (item: number) => {
            GridCol({
              span: { xs: 1, sm: 1, md: 1, lg: 1 },
              offset: 0,
              order: 0
            }) {
              Row() {
                Text(item.toString())
                  .fontSize(12)
                  .fontColor(Color.White);
              }
              .justifyContent(FlexAlign.Center)
              .width('100%')
              .height(30)
              .backgroundColor('#333333')
              .borderRadius(8)
              .margin({ bottom: 4 });
            };
          });
        }
        .width('100%')
      }
      .height('100%')
      .scrollBar(BarState.Auto);
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#000000');
  }
}

Verification Result

The following figure shows the example effect.:

FAQs

Q: After setting multiple GridCol components within a GridRow, it was found that the touch response area does not match the actual click area.
A: When child components within GridRow and GridCol use relative positioning, there may be component positioning offsets that cause touch events to behave abnormally. Specifically, it is necessary to ensure that the position or size of the relative positioning does not affect the event response area of the child components.

Q: When the GridRow component is used for layout development, scrolling and dragging are not supported. Does the GridRow component support dragging and swapping?
A: The GridRow component is only a layout container component and does not have the scrolling and dragging capabilities of the Grid component. You can use the Grid component to implement dragging and swapping. For details, see Drag and swap of Grid mesh elements.

DEV Community