The size of Web components ADAPTS to the layout of page content

Posted on by — No Comments ↓

Web Component Adaptive Layout and Usage Scenarios in HarmonyOS Next

Adaptive Layout Based on Content

HarmonyOS Next Web components support the layoutMode(WebLayoutMode.FIT_CONTENT) setting, which allows the Web component’s size to adapt dynamically to the content of the webpage. This mode is particularly useful in scenarios where the Web component needs to expand based on the webpage’s height and scroll alongside other native components.

Use Cases

  • Long Article Browsing: When the Web component shares the same layout level with other native components like comment sections or toolbars.
  • Long Home Pages: When the Web component shares the same layout level with other native components like grid menus.

Specifications and Constraints

  • Recommended Rendering Mode: Synchronous rendering mode (RenderMode.SYNC_RENDER) is recommended to avoid abnormal situations such as blank screens or layout errors caused by component size limits.
  • Over-Scroll Mode: Set to OverScrollMode.NEVER to disable over-scrolling and prevent conflicts between the Web component’s bounce-back animation and the Scroll component’s bounce-back effect.
  • Keyboard Avoidance: The keyboard avoidance mode RESIZE_CONTENT is not effective in this layout mode.
  • No Page Zooming: Page zooming is not supported.
  • Height Adjustment: The height of the Web component cannot be modified via the height attribute.
  • Width Adaptation: Only height adaptation is supported; width adaptation is not supported.

Example Code

The following example demonstrates how to use the FIT_CONTENT layout mode with a Web component: 

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

@Entry
@Component
struct WebHeightPage {
  private webviewController: WebviewController = new webview.WebviewController();
  private scroller: Scroller = new Scroller();

  build() {
    Navigation() {
      Column() {
        Scroll(this.scroller) {
          Column() {
            Web({
              src: $rawfile("fit_content.html"),
              controller: this.webviewController,
              renderMode: RenderMode.SYNC_RENDER // Set to synchronous rendering mode
            })
              .layoutMode(WebLayoutMode.FIT_CONTENT) // Set Web component size to adapt to page content
              .overScrollMode(OverScrollMode.NEVER) // Disable over-scroll mode
            Text("Comment Section")
              .fontSize(28)
              .fontColor("#FF0F0F")
              .height(100)
              .width("100%")
              .backgroundColor("#f89f0f")
          }
        }
      }
    }
    .title("Title Bar")
  }
}

Frontend Page: fit_content.html

<!-- fit_content.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Fit-Content</title>
</head>
<body>
<div>
    <div><h2 id="Use Cases">Use Cases</h2>
        <p>ArkWeb provides Web components to display Web page content within applications. Common use cases include:</p>
        <ul>
            <li><p>Integrating Web pages into applications to reduce development costs and improve efficiency.</p></li>
            <li><p>Browsers can use Web components to open third-party web pages with features like incognito mode and ad blocking.</p></li>
            <li><p>Mini-program hosts can render mini-program pages using Web components.</p></li>
        </ul>
    </div>
    <div><h2 id="Capabilities">Capabilities</h2>
        <p>Web components offer rich capabilities for controlling Web pages:</p>
        <ul>
            <li><p>Web page loading, including declarative and off-screen loading.</p></li>
            <li><p>Lifecycle management with notifications for Web page loading status changes.</p></li>
            <li><p>Common attributes and events like UserAgent management, Cookie and storage management, font and dark mode management, and permission management.</p></li>
            <li><p>Interactions with native UI elements, such as custom text selection menus, context menus, and file upload interfaces.</p></li>
            <li><p>JavaScript interaction between the app and Web pages via JavaScriptProxy.</p></li>
            <li><p>Security features like incognito browsing, ad blocking, and privacy protection modes.</p></li>
            <li><p>Development and testing tools, including DevTools debugging and crash information collection.</p></li>
            <li><p>Advanced features like rendering with native components, network management, media playback support, and custom input method integration.</p></li>
        </ul>
    </div>
    <div><h2 id="Constraints">Constraints</h2>
        <ul>
            <li>ArkWeb is based on the Chromium M114 kernel.</li>
        </ul>
    </div>
</div>
</body>
</html>

Leave a Reply