HarmonyOS 鸿蒙Next 多个按钮，在一个按钮被选中的状态下，其他按钮不能按压，该如何实现呢

HarmonyOS 鸿蒙Next 多个按钮，在一个按钮被选中的状态下，其他按钮不能按压，该如何实现呢多个按钮，在一个按钮被选中的状态下，其他按钮不能按压，要该如何实现呢

Button("test1").stateStyles({
  focused: {//获得聚焦 默认
    .backgroundColor(Color.Red)
  },
  pressed: { //按压状态
    .backgroundColor(Color.Black)
  },
  normal: { //正常状态 
    .backgroundColor(Color.Pink)
  }
})

Button("test2").stateStyles({
  focused: {//获得聚焦
    .backgroundColor(Color.Red)
  },
  pressed: { //按压状态
    .backgroundColor(Color.Black)
  },
  normal: { //正常状态 默认
    .backgroundColor(Color.Pink)
    disabled: { //disabled：不可用态。
      .backgroundColor(Color.Gray)
    },
  }
})

更多关于HarmonyOS 鸿蒙Next 多个按钮，在一个按钮被选中的状态下，其他按钮不能按压，该如何实现呢的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 1楼•8 天前

给需要控制的每个按钮都设置不同的标记key，创建一个记录被点击按钮的string变量buttonKey，用@State装饰，重写Button的onTouch()事件，通过enabled()属性控制，如下：

[@State](/user/State) buttonKey: string = ''

Button("test1")
  .onTouch((event) => {
    if (event.type == TouchType.Down) {
      this.buttonKey = 'test1'
    } else if (event.type == TouchType.Up) {
      this.buttonKey = ''
    }
  }).enabled(this.buttonKey ? this.buttonKey == 'test1' : true)

不知这是不是你想要的效果

yuanlaile 2楼•8 天前

能否通过伪类StateStyle来实现呢。

sinazl 3楼•8 天前

看懂这个逻辑了😅，

基本信息

姓名: 张三
年龄: 28
职业: 软件工程师

技能

熟练掌握Java
熟悉Python
了解C++

项目经验

参与开发企业级电商系统
负责模块: 用户管理、订单处理

联系

邮箱: example@example.com
手机: 12345678901

ionicwang 4楼•8 天前

StateStyle只能设置相应状态的显示样式~

zlyuanteng 5楼•8 天前

在HarmonyOS（鸿蒙Next）中，要实现多个按钮中一个按钮被选中时，其他按钮不可按压的功能，可以使用RadioButton组件结合RadioContainer来实现。RadioButton是单选按钮，默认情况下，同一组内的RadioButton只能选择一个。

首先，在布局文件中定义RadioContainer和多个RadioButton：

<RadioContainer
    ohos:id="$+id:radio_container"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:orientation="vertical">

    <RadioButton
        ohos:id="$+id:radio_button1"
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:text="Button 1"/>

    <RadioButton
        ohos:id="$+id:radio_button2"
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:text="Button 2"/>

    <RadioButton
        ohos:id="$+id:radio_button3"
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:text="Button 3"/>
</RadioContainer>

在代码中，可以通过RadioContainer的setOnCheckedChangeListener方法来监听按钮的选择状态：

RadioContainer radioContainer = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);
radioContainer.setOnCheckedChangeListener(new RadioContainer.CheckedStateChangedListener() {
    @Override
    public void onCheckedChanged(RadioContainer radioContainer, int checkedId) {
        // 在这里处理按钮选择状态变化的逻辑
    }
});

当用户选择一个按钮时，其他按钮将自动变为不可按压状态。

eggper 6楼•8 天前

在HarmonyOS中，可以通过设置按钮的clickable属性来实现这一功能。首先，定义一个全局变量来记录当前选中的按钮。当某个按钮被点击时，将其clickable属性设置为false，并将其他按钮的clickable属性设置为true，以禁用其他按钮的点击事件。具体代码示例如下：

Button button1 = ...;
Button button2 = ...;
Button button3 = ...;

button1.setOnClickListener(v -> {
    button1.setClickable(false);
    button2.setClickable(true);
    button3.setClickable(true);
});

button2.setOnClickListener(v -> {
    button1.setClickable(true);
    button2.setClickable(false);
    button3.setClickable(true);
});

button3.setOnClickListener(v -> {
    button1.setClickable(true);
    button2.setClickable(true);
    button3.setClickable(false);
});

这样，当一个按钮被选中时，其他按钮将无法点击。