HarmonyOS 鸿蒙Next中半模态关闭按钮的实现

HarmonyOS 鸿蒙Next中半模态关闭按钮的实现 如何将半模态自带的关闭按钮背后的原型阴影去掉

cke_129.png


更多关于HarmonyOS 鸿蒙Next中半模态关闭按钮的实现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

目前bindSheet不支持直接设置关闭按钮背景色，通过配置bindSheet的可选属性[a href=“https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-sheet-transition#sheetoptions”]options[/a]中的showClose参数为false隐藏关闭按钮，然后封装一个自定义关闭按钮，从而解决上述问题，示例代码如下：

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

  @Builder bindSheetExample(){
    Row{
      Column{
        Text('标题')
      }.alignItems(HorizontalAlign.Start)
      Column{
        SymbolGlyph($r('sys.symbol.xmark'))
          .fontSize(20)
          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
          .fontColor([Color.Black, Color.Green, Color.White])
      }
      .border({width:1,color:'#000',radius:'100%'})
      .padding(5)
      .backgroundColor(Color.Blue)
      .onClick(()=>{
        this.isShow=false
      }).alignItems(HorizontalAlign.End)
      .width(30)
    }.width('100%')
    .padding({top:20,left:20,right:20})
    .justifyContent(FlexAlign.SpaceBetween)
  }

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

更多关于HarmonyOS 鸿蒙Next中半模态关闭按钮的实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


目前没有办法直接进行此类操作，没有提供此类接口，但是可以把关闭按钮设置为false,然后自行封装一个关闭按钮就可以了,希望可以帮到你

在HarmonyOS（鸿蒙Next）中，半模态关闭按钮的实现通常涉及自定义组件和事件处理。以下是一个简单的实现步骤：

  1. 创建自定义组件：使用@Component装饰器创建一个自定义组件，定义半模态的布局和样式。

  2. 添加关闭按钮：在组件布局中添加一个按钮，用于触发关闭操作。

  3. 事件绑定：使用@State和@Watch装饰器管理组件的显示状态，并通过onClick事件绑定关闭按钮的点击事件。

  4. 状态更新：在点击事件中更新组件的显示状态，实现半模态的关闭效果。

示例代码：

[@Component](/user/Component)
struct SemiModal {
  [@State](/user/State) isVisible: boolean = true;

  build() {
    Column() {
      if (this.isVisible) {
        Text('半模态内容')
          .margin(10);
        Button('关闭')
          .onClick(() => {
            this.isVisible = false;
          });
      }
    }
  }
}

通过以上步骤，您可以在HarmonyOS中实现一个简单的半模态关闭按钮。

回到顶部