如何实现与切换按钮（sugg）一样的分段按钮，更改为下一个onclicked

Question

从我之前的问题中了解到（），我使用了分段按钮来做到这一点：

我的预期结果是：

按下下一步时 INDICATOR2 应该处于活动状态，第二次按下时 INDICATOR3 应该处于活动状态。
当在 INDICATOR2 上时，如果按下上一个 INDICATOR2 和 INDICATOR1（当前的）都应该处于活动状态。

因为我在这里使用分段按钮，所以 2) 无法实现，并且还建议使用切换按钮代替分段按钮。

所以我尝试了，

<HBox id="toggleButton1">
    <ToggleButton text="BUTTON1" enabled="true" pressed="true" press="onPress">
    </ToggleButton>
    <ToggleButton text="BUTTON2" enabled="true" pressed="false" press="onPress">
    </ToggleButton>
    <ToggleButton text="BUTTON3" enabled="true" pressed="false" press="onPress">
    </ToggleButton>
</HBox>    
<Button text="Previous" press="onPressPrevious" enabled="true"> </Button>
<Button text="Next" press="onPressNext" enabled="true"> </Button>

为此，

如何编写 JS 代码：

按下下一步时 BUTTON2 应该处于活动状态，第二次按下时 BUTTON3 应该处于活动状态。
当在 BUTTON2 上时，如果按下 Previous BUTTON2 和 BUTTON1（当前的）都应该处于活动状态。
如何将这些切换按钮宽度设置为整个页面（在 CSS 中尝试了我的运气 display: block; width=100% 但无法工作）

我对 JS 一无所知，至少可以尝试一下，任何帮助我都可以通过它学习，TIA

Answer 1

这里是将三个 ToggleButton 用作一个 SegmentedButton 的示例。我将按钮列表缓存在局部变量中，因为只有一组按钮。如果需要，您可以调整它以支持多个这样的组，方法是添加更多局部变量，或者每次获取相关的按钮列表。

如果按下 next，它会跳转到下一个按钮。如果按下 previous，它会启用 all previous 按钮。如果按下切换按钮，它会禁用所有其他按钮，就像 SegmentedButton.

至于大小，需要设置一些flexbox相关的属性。 fitContainer 在 HBox 上，所以它拉伸 100%，在切换按钮上 growFactor=1，所以它们实际上使用了所有 space。即便如此，按钮本身似乎也不喜欢拉伸太多，所以我设置了一个额外的 CSS 样式来强制它们。

sap.ui.define("myController", [
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";

  var toggleButtons1;

  return Controller.extend("myController", {
    onInit: function() {
      toggleButtons1 = this.byId("toggleButtons1").getItems();
    },

    onPressNext: function(e) {
      for (var i = 0; i < toggleButtons1.length - 1; ++i) {
        if (toggleButtons1[i].getPressed()) {
          toggleButtons1[i].setPressed(false);
          toggleButtons1[i + 1].setPressed(true);
          break;
        }
      }
    },

    onPressPrevious: function() {
      for (var i = toggleButtons1.length - 1; i > 0; --i) {
        if (toggleButtons1[i].getPressed()) {
          toggleButtons1[i - 1].setPressed(true);
        }
      }
    },

    onPress: function(e) {
      var btn = e.getSource();
      if(!btn.getPressed()) {
        btn.setPressed(true);
        return;
      }
      for (var i = 0; i < toggleButtons1.length; ++i) {
        if (toggleButtons1[i] != btn) {
          toggleButtons1[i].setPressed(false);
        }
      }
    },
    
    onPress1: function(e) {
       this.onPress(e);
       alert("Do something here!");
    }
  });
});

sap.ui.require(["sap/ui/core/mvc/XMLView"], function(XMLView) {
  XMLView.create({
    definition: $('#myView').html()
  }).then(function(oView) {
    oView.placeAt('content');
  });
});

.fullWidthButtons button {
  width: 100%;
}

<html>

<head>
  <meta charset="utf-8">
  <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_fiori_3' data-sap-ui-libs='sap.m'></script>
  <script id="myView" type="sapui5/xmlview">
    <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="myController">

      <HBox id="toggleButtons1" fitContainer="true" class="fullWidthButtons">
        <ToggleButton text="BUTTON1" enabled="true" pressed="true" press=".onPress1">
          <layoutData>
            <FlexItemData growFactor="1" />
          </layoutData>
        </ToggleButton>
        <ToggleButton text="BUTTON2" enabled="true" pressed="false" press=".onPress">
          <layoutData>
            <FlexItemData growFactor="1" />
          </layoutData>
        </ToggleButton>
        <ToggleButton text="BUTTON3" enabled="true" pressed="false" press=".onPress">
          <layoutData>
            <FlexItemData growFactor="1" />
          </layoutData>
        </ToggleButton>
      </HBox>

      <Button text="Previous" press="onPressPrevious" enabled="true" />
      <Button text="Next" press="onPressNext" enabled="true" />

    </mvc:View>
  </script>
</head>

<body class='sapUiBody'>
  <div id='content'></div>
</body>

</html>

如何实现与切换按钮（sugg）一样的分段按钮，更改为下一个onclicked

How to achieve same like Segemented button with toggle button(sugg) ,change to next onclicked

button

sapui5