HarmonyOS 如何让界面中同时有两个webview

可以使用Stack组件，通过改变两个web的zIndex来控制显示隐藏

import webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();
  controller2: webview.WebviewController = new webview.WebviewController();
  @State html1zIndex: number = 10
  @State html2zIndex: number = 9

  build() {
    Column() {
      Button('html1显示').onClick((event: ClickEvent) => {
        this.html1zIndex = 10
        this.html2zIndex = 9
      })
      Button('html2显示').onClick((event: ClickEvent) => {
        this.html1zIndex = 9
        this.html2zIndex = 10
      })
      Stack() {
        Web({ src: $rawfile('html1.html'), controller: this.controller })
          .width('100%')
          .height(300)
          .zIndex(this.html1zIndex)
        Web({ src: $rawfile('html2.html'), controller: this.controller2 })
          .width('100%')
          .height(300)
          .zIndex(this.html2zIndex)
      }
    }

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

也可通过给两个web添加visibility属性，来进行显隐的控制

import webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();
  controller2: webview.WebviewController = new webview.WebviewController();
  @State visibility1: Visibility = Visibility.Visible
  @State visibility2: Visibility = Visibility.None
  build() {
    Column() {
      Button('html1显示').onClick((event: ClickEvent) => {
        this.visibility1 = Visibility.None
        this.visibility2 = Visibility.Visible
      })
      Button('html2显示').onClick((event: ClickEvent) => {=
        this.visibility2 = Visibility.None
        this.visibility1 = Visibility.Visible
      })

      // Stack() {
      Web({ src: $rawfile('html1.html'), controller: this.controller })
        .width('100%')
        .height(300)
        .visibility(this.visibility1)
      Web({ src: $rawfile('html2.html'), controller: this.controller2 })
        .width('100%')
        .height(300)
        .visibility(this.visibility2)
    }

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.