评论栏显隐不正确
========

#### 问题现象

进入H5页面，点击播放视频，全屏后再退出全屏，底部出现评论栏，且无法关闭。

问题现象：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d0/v3/ytn3kaFxRQ-DQkLVEpjs-g/zh-cn_image_0000002658808781.png?HW-CC-KV=V1&HW-CC-Date=20260709T134016Z&HW-CC-Expire=86400&HW-CC-Sign=822DA07DE451F931131B305A15583A2618616621118AE37356BDC4C225F90F2D "点击放大")

#### 背景知识

在HarmonyOS中，通过[visibility](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-visibility#visibility)属性可以控制组件的显隐。

#### 问题定位

第一次进入视频播放页底部没有评论栏，全屏后退出，评论栏出现，且返回列表页不会消失，判断是评论栏的显隐控制有问题。排查代码中触发visibility属性值改变的位置是否正确，错误示范如下：

Image(this.fullVideoImg)
  .onClick(() => {
    _// ..._
    this.controller.requestFullscreen(true); _// 点击全屏_
    this.isCommentShow = true; _// 设置显示评论栏_
  })

Row() {
  _// ..._
}
.visibility(this.isCommentShow ? Visibility.Visible : Visibility.None) _// 控制评论栏显隐_

#### 分析结论

点击全屏后设置显示评论栏，之后没有再将评论栏隐藏，导致退出视频播放后评论栏仍然存在。

#### 修改建议

将评论栏的显示操作放在Web组件的[onFullScreenEnter](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-events#onfullscreenenter9)方法内，并在[onFullScreenExit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-events#onfullscreenexit9)中设置隐藏，确保评论栏只在视频全屏播放时出现，其他页面状态下隐藏，示例代码如下：

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

@Entry
@Component
struct WebVideoPlay {
  webSrc: string = 'XXX.XXX.com'; _// 使用前可以替换为正式页面，如：https://developer.huawei.com/consumer/cn/design/devstart/_
  controller: webview.WebviewController = new webview.WebviewController();
  @State isComment: boolean = false;

  build() {
    Column() {
      Web({ src: this.webSrc, controller: this.controller })
        .fileAccess(false)
        .geolocationAccess(false)
        .height(this.isComment ? '90%' : '100%')
        .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.BOTTOM\])
        .onFullScreenEnter(() => {
          this.isComment = true;
        })
        .onFullScreenExit(() => {
          this.isComment = false;
        })

      Row() {
        Text('评论')
        TextInput()
          .width('70%')
      }
      .width('100%')
      .height('10%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .visibility(this.isComment ? Visibility.Visible : Visibility.None)
      .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.BOTTOM\])
    }
    .width('100%')
    .height('100%')
    .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.BOTTOM\])
  }
}

运行效果：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c9/v3/hpkuw72xT0ibTjG7emBPAA/zh-cn_image_0000002628569418.png?HW-CC-KV=V1&HW-CC-Date=20260709T134016Z&HW-CC-Expire=86400&HW-CC-Sign=061EAC3015D2FD840D29455F2AC36F6742455EA4CBB2734AB147D2B284ECB9DE "点击放大")