Scroller Manual Stop, Second Execution, Web Custom Keyboard, Web Component Injection Style, Safe Area

[Daily HarmonyOS Knowledge] Scroller Manual Stop, Second Execution, Web Custom Keyboard, Web Component Injection Style, Safe Area

1. Does HarmonyOS scroller have a manual stop method?

You can use the scrollTo method to slide to the specified position.

// demo.ets  
import Curves from '@ohos.curves'  

@Entry  
@Component  
struct ScrollExample {  
  scroller: Scroller = new Scroller()  
  private arr: number[] = []  

  aboutToAppear(): void {  
    for (let i = 0; i < 100; i++) {  
      this.arr.push(i)  
    }  
  }  

  build() {  
    Stack({ alignContent: Alignment.TopStart }) {  

      Scroll(this.scroller) {  
        Column() {  
          ForEach(this.arr, (item: number) => {  
            Text(item.toString())  
              .width('90%')  
              .height(150)  
              .backgroundColor(0xFFFFFF)  
              .borderRadius(15)  
              .fontSize(16)  
              .textAlign(TextAlign.Center)  
              .margin({ top: 10 })  
          }, (item: string) => item)  
        }.width('100%')  
      }  
      .scrollable(ScrollDirection.Vertical) // Scroll direction is vertical  
      .scrollBar(BarState.On) // Scroll bar is always visible  
      .scrollBarColor(Color.Gray) // Scroll bar color  
      .scrollBarWidth(10) // Scroll bar width  
      .friction(0.6)  
      .edgeEffect(EdgeEffect.Spring)  
      .onScroll((xOffset: number, yOffset: number) => {  
        console.info(xOffset + ' ' + yOffset)  
      })  
      .onScrollEdge((side: Edge) => {  
        console.info('To the edge')  
      })  
      .onScrollStop(() => {  
        console.info('Scroll Stop')  
      })  

      Button('Interrupt and execute other logic')  
        .height('5%')  
        .onClick(() => {  
          let curve = Curves.interpolatingSpring(10, 1, 228, 30) // Create a stepped curve  
          const yOffset: number = this.scroller.currentOffset().yOffset;  
          this.scroller.scrollTo({  
            xOffset: 0,  
            yOffset: yOffset,  
            // animation: { duration: 1000, curve: curve, canOverScroll: true }  
          })  
        })  
        .margin({ top: 110, left: 20 })  

    }.width('100%').height('100%').backgroundColor(0xDCDCDC)  
  }  
}  

2. HarmonyOS function that executes once per second?

Use setInterval to repeatedly call a function with a fixed time delay between each call. To delete the timer, manually call the clearInterval interface.

Reference link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-timer-V13#setinterval

setInterval(handler: Function | string, delay: number, ...arguments: any[]): number

Repeatedly calls a function with a fixed time delay between each call.

To delete the timer, manually call the clearInterval interface.

setInterval(() => {  
  console.log('do every 1s.');  
}, 1000);  

3. HarmonyOS WebView custom keyboard issue?

When using a custom keyboard in a loaded webview, how to handle the hiding and displaying of the system keyboard, as well as displaying the custom keyboard and processing cursor acquisition.

When using a custom keyboard, the system keyboard should be hidden to avoid conflicts. You can set the focusable property of the TextInput component to false to make the component non-focusable, so that the default system keyboard will not pop up. You can load the custom keyboard by displaying it in the component. The specific implementation method is to create an HTML page containing the desired keys and use it as the src attribute value of the component. When the user clicks on the component, the custom keyboard will pop up automatically. You can obtain the cursor position information by listening to keyboard events. In this way, you can dynamically adjust the cursor to the correct position according to the user's operations during text editing.

Reference link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-search-V5#ZH-CN_TOPIC_0000001847049860__customkeyboard10

4. How to inject styles into HTML in HarmonyOS web components?

Refer to the demo to inject styles into the style tag:

// ets  
import web_webview from '@ohos.web.webview';  

@Entry  
@Component  
struct WebComponent {  
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();  
  private customStyle: string =  
    'html, body {margin: 0; padding: 0; overflow: hidden; touch-action: none; background:#ace}';  

  aboutToAppear() {  
    // Configure Web to enable debug mode  
    web_webview.WebviewController.setWebDebuggingAccess(true);  
  }  

  build() {  
    Column() {  

      Button('style').onClick((event: ClickEvent) => {  

        this.webviewController.runJavaScript(`const head = document.head;  
                                              console.log(head);  
                                              const style = document.createElement('style');  
                                              style.appendChild(document.createTextNode("${this.customStyle}"))  
                                              head.appendChild(style)  
        `)  
      })  
      Web({ src: $rawfile('index.html'), controller: this.webviewController }).domStorageAccess(true)  
    }  
  }  
}  
// html  
<!DOCTYPE html>  
<html>  
<head>  

</head>  

<body>  
<h1 id="text">  
    This is a test message. The default font is black. After calling the runJavaScript method, the font is green. After calling the runJavaScriptCodePassed method, the font is red.  
</h1>  
</body>  
</html>  

5. HarmonyOS safe area issue?

When there is no tabbar, .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) can indeed start from the top of the screen, but it fails when a tabbar is added. What is the solution?

Use immersive development to avoid the navigation bar.

Please refer to: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5#section202484117114