如何使切换按钮组响应

Question

切换按钮的xml：

<HBox id="toggleButtons1" fitContainer="false" class="fullWidthButtons" alignItems="Center">
            <items>
        <ToggleButton text="BUTTON1" enabled="true" pressed="true" press=".onPress1" class="firsttogglebutton" >
            <layoutData>
            <FlexItemData growFactor="1" />
          </layoutData>
        </ToggleButton>
        <ToggleButton text="BUTTON2" enabled="true" pressed="false" press=".onPress2">
            <layoutData>
            <FlexItemData growFactor="1" />
          </layoutData>
        </ToggleButton>
        <ToggleButton text="BUTTON3" enabled="true" pressed="false" press=".onPress3">
            <layoutData>
            <FlexItemData growFactor="1" />
          </layoutData>
        </ToggleButton>
            </items>
    </HBox>

应用了一些CSS不需要猜测

我正在检查响应，当在 small/medium 设备中查看时，它非常适合所有尺寸的设备：

供参考：

但是当我更改（放大）按钮内的文本时，它没有响应。可能是什么原因？如何克服这个问题？

我尝试用 FlexBox 替换 HBox 但它是一样的（也许我应该包含更多属性）。

Controller.js:

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!");
    }
  });
});

Answer 1

view.xml

<l:Grid id="gridToggleButtons" containerQuery="true" defaultSpan="XL2 L4 M4 S6">
  <ToggleButton text="BUTTON1EEE" enabled="true" pressed="true" press=".onPress1" class="firsttogglebutton" />
  <ToggleButton text="BUTTON2EEE" enabled="true" pressed="false" press=".onPress2" />
  <ToggleButton text="BUTTON3EEE" enabled="true" pressed="false" press=".onPress3" />
</l:Grid>

controller.js

var oGrid = this.byId("gridToggleButtons");
var oBtns = oGrid.getContent();
var oBUTTON1EEE = oBtns[0];
var oBUTTON2EEE = oBtns[1];
var oBUTTON3EEE = oBtns[2];

注意：containerQuery 用于根据网格大小而不是根据设备大小（大、中和小）获取大小。 defaultSpan 根据您的要求设置。有关网格的更多信息，请访问 Grid API

如何使切换按钮组响应

How to make group of toggle buttons responsive

sapui5