HarmonyOS 鸿蒙Next如何关闭按钮背景色的转场动画

发布于 1周前 作者 caililin 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何关闭按钮背景色的转场动画

build() {
  Column() {
    this.PermissionDialog();
  }
  .borderRadius(vpAdaptDefault(this.borderRadiusValue))
  .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
  .padding({left: vpAdaptDefault(this.marginValue), right: vpAdaptDefault(this.marginValue) })
  .width(this.dlgWidth)
  .margin({ left: this.marginValueOfCol, right: this.marginValueOfCol })
}
@Builder
PermissionDialog() {
  Column() {
    Column() {
      Text($r('app.string.input_method_permission_instruction_title'))
        .fontSize(this.getFontSize(SpecConstantsOfSetting.FONT_SIZE_COMMON_V_20))
        .fontWeight(FontWeight.Bold)
    }
    .justifyContent(FlexAlign.Center)
    .margin({
      top: SpecConstantsOfSetting.PADDING_OR_MARGIN_COMMON_V_16,
      bottom: SpecConstantsOfSetting.PADDING_OR_MARGIN_COMMON_V_4
    })

    Column() {
      Text(this.getDesc())
        .fontSize(SpecConstantsOfSetting.FONT_SIZE_COMMON_V_12)
        .fontColor($r('sys.color.ohos_id_color_text_secondary'))
        .fontWeight(FontWeight.Regular)
        .width('100%')
    }
    .padding({
      left: SpecConstantsOfSetting.PADDING_OR_MARGIN_COMMON_V_16,
      right: SpecConstantsOfSetting.PADDING_OR_MARGIN_COMMON_V_16
    })
    .margin({
      bottom: SpecConstantsOfSetting.PADDING_OR_MARGIN_COMMON_V_8
    })
    .width(this.dlgSubTitleWidth)
    .justifyContent(FlexAlign.Center)

    Column() {
      this.Content();
    }
    .width(this.dlgContextWidth)

    Column() {
      Button($r('app.string.dialog_btn_confirm'), { type: ButtonType.Capsule, stateEffect: true })
        .fontSize(this.getFontSize(SpecConstantsOfSetting.FONT_SIZE_COMMON_V_16))
        .fontColor($r('sys.color.font_emphasize'))
        .fontWeight(FontWeight.Medium)
        .width('100%')
        .backgroundColor(Color.White)
        .onClick(() => {
          this.confirm?.();
          this.controller?.close();
        })
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .margin({
      top: SpecConstantsOfSetting.PADDING_OR_MARGIN_COMMON_V_16,
      bottom: SpecConstantsOfSetting.PADDING_OR_MARGIN_COMMON_V_16
    })
    .padding({
      left: SpecConstantsOfSetting.PADDING_OR_MARGIN_COMMON_V_16,
      right: SpecConstantsOfSetting.PADDING_OR_MARGIN_COMMON_V_16
    })
  }
}

更多关于HarmonyOS 鸿蒙Next如何关闭按钮背景色的转场动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
6 回复

stateEffect:  按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。

更多关于HarmonyOS 鸿蒙Next如何关闭按钮背景色的转场动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


是要关闭按压按钮时的动画效果吗，设置stateEffect属性为false就可以了
深色代码主题
复制
      Button($r('app.string.dialog_btn_confirm'), { type: ButtonType.Capsule, stateEffect: true })
        .fontSize(this.getFontSize(SpecConstantsOfSetting.FONT_SIZE_COMMON_V_16))
        .fontColor($r('sys.color.font_emphasize'))
        .fontWeight(FontWeight.Medium)
        .width('100%')
        .backgroundColor(Color.White)
        .stateEffect(false)
        .onClick(() => {
          this.confirm?.();
          this.controller?.close();
        })

不是，是按钮加载的时候会闪一下，好像是从默认背景色变成了设置的背景色

设置stateEffect属性为false，然后用多态设置按压状态样式试下

@Styles normalStyle() { .backgroundColor(Color.White) }

@Styles pressedStyle() { .backgroundColor(Color.Gray) }

    Button(('dialog_btn_confirm'), { type: ButtonType.Capsule, stateEffect: false })
      .fontSize(16)
      .fontColor($r('sys.color.font_emphasize'))
      .fontWeight(FontWeight.Medium)
      .width('100%')// .stateEffect(false)
      .onClick(() => {

      })
      .stateStyles({
        normal: this.normalStyle,
        pressed: this.pressedStyle,
      })

在HarmonyOS 鸿蒙Next系统中，关闭按钮背景色的转场动画可以通过修改XML布局文件或直接在代码中设置动画属性来实现。具体操作如下：

  1. XML布局文件修改： 在按钮的XML定义中，通过添加或修改动画属性来禁用背景色转场动画。例如，使用transitionName属性来控制动画效果，将其设置为空字符串或移除相关动画引用。但HarmonyOS中具体属性可能不同，通常可通过ohos:background_element_transition来直接控制背景元素的过渡效果，设置为none即可禁用。

    <Button
    ohos:id="$+id:my_button"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:text="Click Me"
    ohos:background_element_transition="none"/>

  2. 代码设置： 在JavaScript或ETS代码中，通过按钮的实例直接设置动画属性为禁用状态。如果HarmonyOS提供了相应的API来控制动画，可以使用类似component.setTransition(null)或相关API来禁用动画，但具体API需查阅官方文档。

    let button = this.$element('my_button');
button.setTransitionEffect('none'); // 假设有此类API，实际需查阅文档

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部