Web component content is too long, how to handle the inability to scroll and link the content at the bottom?

#harmonyos #webcomponents #arkts #layoutweight

Read the original article：Web component content is too long, how to handle the inability to scroll and link the content at the bottom?

Problem Description

When attempting to place a fixed bottom bar below the Web Component, an issue arises with the layout; the text in the fixed bottom bar exceeds the screen boundary and gets truncated.

The code is as follows:

import { webview } from '@kit.ArkWeb';  // import WebView

@Entry
@Component
struct WebScrollDemo  {
    controller: webview.WebviewController = new webview.WebviewController();
    private scrollerForScroll: Scroller = new Scroller()

  build() {
    Column() {
      Text('Title')

      Scroll(this.scrollerForScroll) {
        Column() {
          Text('Below is a web component. ')

          Web({ src: 'https://developer.huawei.com/en/', controller: this.controller })
            .height('100%')

          Text('Text 1')
          Text('Text 2')
          Text('Text 3')
        }
      }
      .scrollBar(BarState.Off)
      .scrollable(ScrollDirection.Vertical)

      Text('Bottom Fixed Bar')
    }
  }
}

Background Knowledge

Scroll Component: A scrollable container component allows content to scroll when the layout size of its child components exceeds the size of the parent component.

Web Component: A component used to display web page content within an application, which allows for scrolling when the web page content exceeds the size of the web component.

Troubleshooting Process

For the layout issue, first analyze the hierarchical structure of the components:
There is an implicit knowledge that when the height is not specified, the default height and width of Column and Scroll components are both 100%.

Analysis Conclusion

The Scroll component and the "title text" have already occupied all the screen content controls, causing the position of the "bottom fixed bar text" to exceed the screen content area range and reach the navigation bar area.

Solution

In the size settings, there is a layoutWeight attribute that can achieve a height adaptive effect (when the parent container size is determined, the child elements with the layoutWeight attribute and their sibling elements allocate the main axis size according to the weight, ignoring the element's own size settings, indicating adaptive occupation of the remaining space). Here, setting layoutWeight(1) for the Scroll component can adapt the height (parent component height minus the height of the two Text components above and below).

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebScrollDemo  {
    controller: webview.WebviewController = new webview.WebviewController();
    private scrollerForScroll: Scroller = new Scroller()

  build() {
    Column() {
      Text('Title')

      Scroll(this.scrollerForScroll) {
        Column() {
          Text('Below is a web component. ')

          Web({ src: 'https://developer.huawei.com/en/', controller: this.controller })
            // add nested scroll here
            .nestedScroll({scrollForward:NestedScrollMode.SELF_FIRST,scrollBackward: NestedScrollMode.PARENT_FIRST})
            .height('100%')

          Text('Text 1')
          Text('Text 2')
          Text('Text 3')
        }
      }
      .scrollBar(BarState.Off)
      .layoutWeight(1) // add layout weight
      .scrollable(ScrollDirection.Vertical)
      Text('Bottom Fixed Bar')
    }
  }
}

Verification Result

Issue resolved and verified on both mobile and wearable devices.

DEV Community