How to change the background color of the close button in the semi-modal pop-up window?

#harmonyos #arkts #bindsheet #symbolglyphcomponent

Read the original article：How to change the background color of the close button in the semi-modal pop-up window?

Problem Description

How can I modify the background color of the close button in a semi-modal popup? As shown in the image below:

Background Knowledge

A half-modal transition is implemented by binding a half-modal page to a component using bindSheet. The half-modal page is displayed or hidden based on the isShow property, and the options property is used to configure the related attributes.
The SymbolGlyph component is suitable for displaying standalone icons. Developers can set the font size and weight for the icons. Additionally, the SymbolGlyph component supports custom color rendering strategies, allowing developers to adjust the icon colors according to the application's theme or user preferences. The component also supports animation strategies, enabling the icons to display vivid animation effects when users interact with them.
For details about the icon names, see HarmonyOS Symbol Library.

Solution

The close button style of bindSheet is an inherent attribute. You can hide the close button by setting the showClose parameter in the optional options attribute of bindSheet to false, and then encapsulate a custom close button to display at the corresponding position in the dialog box to customize the close button style. The sample code is as follows:

@Entry
@Component
struct Index {
  @State isShow: boolean = false

  @Builder
  bindSheetExample() {
    Row() {
      Column() {
        Text('Title')
      }.alignItems(HorizontalAlign.Start)

      Column() {
        SymbolGlyph($r('sys.symbol.xmark'))
          .fontSize(18)
          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
          .fontColor([Color.White, Color.Green, Color.White])
      }
      .borderRadius('100%')
      .padding(5)
      .backgroundColor('#ff165cf3')
      .onClick(() => {
        this.isShow = false
      })
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .width(34)
      .height(34)
    }.width('100%')
    .padding({ top: 20, left: 20, right: 20 })
    .justifyContent(FlexAlign.SpaceBetween)
  }

  build() {
    Column() {
      Button('open')
        .onClick(() => {
          this.isShow = true
        })
        .bindSheet($$this.isShow, this.bindSheetExample(), {
          height: 100,
          width: '100%',
          showClose: false,
          backgroundColor: Color.Black
        })

        .margin({top:180})
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%')
  }
}