Row component horizontal scrolling abnormality

Read the original article：Row component horizontal scrolling abnormality

Problem Description

When using the Scroll component to nest the Row component, the horizontal scrolling function does not take effect.
The problem code is as follows:

@Entry
@Component
struct CheckDemo {
  scrollerForRow: Scroller = new Scroller()
  @State list: string[] = ['1', '1', '1', '1', '1', '1', '1', '1', '1', '1']

  build() {
    Scroll(this.scrollerForRow) {
      Row({ space: 10 }) {
        ForEach(this.list, () => {
          Image($r('app.media.startIcon'))
            .width(80)
            .height(80)
            .borderRadius(5)
        })
      }
      .width('90%')
      .justifyContent(FlexAlign.Start)
      .padding({
        left: 10,
        right: 10
      })
    }
    .scrollable(ScrollDirection.Horizontal)
  }
}

Background Knowledge

Scroll: A scrollable container component. When the layout size of the child component exceeds the size of the parent component, the content can scroll.

Solution

Setting a solid width for the Row component will cause horizontal scrolling to fail. You can choose to remove the width setting or put the width setting on the Scroll component to solve the horizontal scrolling problem.

Solution 1: Remove the width. The code is as follows:

@Entry
@Component
struct CheckDemo {
  scrollerForRow: Scroller = new Scroller()
  @State list: string[] = ['1', '1', '1', '1', '1', '1', '1', '1', '1', '1']

  build() {
    Scroll(this.scrollerForRow) {
      Row({ space: 10 }) {
        ForEach(this.list, () => {
          Image($r('app.media.startIcon'))
            .width(80)
            .height(80)
            .borderRadius(5)
        })
      }
      .justifyContent(FlexAlign.Start)
      .padding({
        left: 10,
        right: 10
      })
    }
    .scrollable(ScrollDirection.Horizontal)
  }
}

The effect is as follows:

Solution 2: Set the width on the Scroll component. The code is as follows:

@Entry
@Component
struct CheckDemo {
  scrollerForRow: Scroller = new Scroller()
  @State list: string[] = ['1', '1', '1', '1', '1', '1', '1', '1', '1', '1']

  build() {
    Scroll(this.scrollerForRow) {
      Row({ space: 10 }) {
        ForEach(this.list, () => {
          Image($r('app.media.startIcon'))
            .width(80)
            .height(80)
            .borderRadius(5)
        })
      }
      .justifyContent(FlexAlign.Start)
      .padding({
        left: 10,
        right: 10
      })
    }
    .width('90%')
    .scrollable(ScrollDirection.Horizontal) 
  }
}

Written by Mucahid Kincir