Web Loads PDF, Toggle Disable, Grid Multiple Rendering Issues, Web Title Existence Judgment, List Swipe Menu Closure

#harmonyosnext

[Daily HarmonyOS Knowledge] Web Loads PDF, Toggle Disable, Grid Multiple Rendering Issues, Web Title Existence Judgment, List Swipe Menu Closure

1. After HarmonyOS Web component loads a local PDF file, it displays a title and download button by default. Are there APIs to hide or manipulate this title?

To hide the PDF operation button bar, append #toolbar=0&navpanes=0 at the end, for example:

src:"file://" + filesDir + "/test.pdf#toolbar=0&navpanes=0"

2. How to disable a HarmonyOS Toggle in specific scenarios, so that clicking it remains in the false state without changing?

When multiple Toggles are used to set states, if the first Toggle is false, disable the second and third Toggles (set both to false), and clicking these Toggles should not change false to true.

Reference demo:

@Entry
@Component
struct 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. When a HarmonyOS Grid is rendered multiple times, the layout remains fixed (e.g., displaying historical search records with varying text lengths). How to handle this?

You can use the stretching capability to achieve the effect. Stretching refers to distributing the increased or decreased space to specified areas within a container component when its size changes, typically implemented via the flexGrow and flexShrink properties in Flex layout. For details, refer to the documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/adaptive-layout-V5.

Add the FlexWrap.Wrap property for line wrapping. Reference demo:

@Entry
@Component
struct 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. How to determine if an element has a Title in HarmonyOS Web?

Currently, the Web document does not have a title tag. onTitleReceive and controller.getTitle default to returning the URL without the protocol header. No documentation describes how to check for the Title tag. Can we determine by comparing the URL string with the protocol header removed?

There is no interface to detect the Title in Web. You can detect whether a Title exists via front-end methods or JS injection:

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

5. How to actively close the swipe menu of ListItem in HarmonyOS?

Use the closeAllSwipeActions() method provided by ListScroller to restore the swipe effect.

Reference documentation: 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

Collapses ListItems in the EXPANDED state and sets a callback event.

DEV Community