【每日学点鸿蒙知识】web 加载 pdf、Toggle 禁用、Grid 多次渲染问题、Web 判断是否存在 title、 List 侧滑栏关闭

2025-03-06
北京
本文字数：1757 字
阅读完需：约 6 分钟

1、HarmonyOS Web 组件加载本地 pdf 文件后，默认显示标题和下载按钮，可以隐藏或者有对应的操作这个 title 的 API 吗？

隐藏 PDF 操作按钮栏，后面加 #toolbar=0&navpanes=0 即可，举例： src:"file://" + filesDir + "/test.pdf#toolbar=0&navpanes=0"

2、HarmonyOS Toggle 如何在特定场景下禁用，即点击依旧保持 false 的状态，不会改变？

在多个 Toggle 来设置状态的情况下，如果第一个 Toggle 是 false，则禁用第二个和第三个 Toggle，即都设置成 false，且点击这两个 Toggle 无法将 false 变为 true

参考 demo 如下：

@Entry@Componentstruct ToggleExample {  @State is_on:boolean = false;  build() {    Column() {      Row() {        Text("Bluetooth Mode")          .height(50)          .fontSize(16)      }      Row() {        Text("Bluetooth")          .height(50)          .padding({left: 10})          .fontSize(16)          .textAlign(TextAlign.Start)          .backgroundColor(0xFFFFFF)        Stack(){          Toggle({ type: ToggleType.Switch ,isOn:this.is_on})            .margin({left: 200, right: 10})          Column(){          }.width(60)          .height(50)          .margin({left: 200, right: 10})          .onClick(()=>{            this.is_on = !this.is_on          })        }      }      .backgroundColor(0xFFFFFF)    }    .padding(10)    .backgroundColor(0xDCDCDC)    .width('100%')    .height('100%')  }}

复制代码

3、HarmonyOS Grid 多次渲染会固定布局如历史搜索记录展示，搜索文字长度不固定？

可以参考使用拉伸能力实现效果，拉伸能力是指容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域，通常通过 Flex 布局中的 flexGrow 和 flexShrink 属性实现，具体使用可参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/adaptive-layout-V5

可以加上 FlexWrap.Wrap 这个属性来换行,参考 demo

@Entry@Componentstruct ListExample {  private arr: string[] = ['测试1111', '测试', '测试0', '测试112222', '测试112222yeyeyeyy', '测试1', '测试112222yeyeyeyyjdjkd']
  build() {    Column() {      Row() {        Flex({ wrap: FlexWrap.Wrap }) {          ForEach(this.arr, (item: string) => {            Text(item)              .height(50)              .fontSize(16)              .textAlign(TextAlign.Center)              .borderRadius(10)              .backgroundColor(0xFFFFFF)              .width('30%')              .flexGrow(1)              .flexShrink(0)          },            (item: string) => item)        }      }
      .height('100%')      .width('100%')      .backgroundColor(Color.Pink)      .justifyContent(FlexAlign.SpaceEvenly)

    }    .width('100%').height('100%')    .backgroundColor(0xDCDCDC).padding({ top: 5 })  }}

复制代码

4、HarmonyOS Web 如何判断元素是否存在 Title？

目前看到 Web 的 document 中没有 title 标签，在 onTitleReceive 和 controller.getTitle 默认返回了不带协议头的 url 链接，没找到文档有描述，是否可以判断 Title 标签是否存在？是否可以自己对比去掉协议头的 url 字符串进行判断？

web 中无检测 Title 的接口，可以在前端或使用 JS 注入的方式检测是否存在 Title。

<script>    if(document.title){    alert("该页面存在title，标题为：" + document.title);    }else{    alert("该页面不存在title");    }</script>

复制代码

5、HarmonyOS ListItem 的侧滑栏如何主动关闭？

可以使用 ListScroller 提供的 closeAllSwipeActions()方法将滑动效果进行恢复

参考文档如下：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#closeallswipeactions11

closeAllSwipeActions(options?: [CloseSwipeActionOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#closeswipeactionoptions11%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E)): void将 EXPANDED 状态的 ListItem 收起，并设置回调事件。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/bc78348996129ff838f91be54】。文章转载请联系作者。