Sapui5 如何使切换按钮组具有响应性

切换按钮的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猜测，但不是必需的 我正在检查是否有响应性，当在中小型设备中查看时，它与所有大小的设备都是完美的：

参考：

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

我试着用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!");
    }
  });
});

view.xml

注意：containerQuery用于获取基于网格大小的大小，而不是基于设备大小大、中、小。

---

defaultSpan是根据您的要求设置的。有关网格的更多信息，请浏览

HBox将不会为您提供响应性布局。根据第一个屏幕截图，按钮文本长度与第二个屏幕截图不同。如果你想要响应性设计，那么就使用响应性布局，比如GridYeah，我给了不同的文本长度来观察相同的内容，认为较小的文本是响应性的……我可以知道如何将它们包装在网格中吗？一个问题，这是一个预定义的类吗？class=responsiveTBtn？class=responsiveTBtn是一个自定义类。您也可以删除它。由于我们不使用HBox，您不能使用toggleButtons1=this.byIdtoggleButtons1.getItems；。网格中没有getItems。你想用它实现什么？我以为没有包含Id，所以我们得到了这个错误对于这个初学者来说不知道，现在我们如何在控制器中做到这一点。。。。。。我向网格控件添加了新的ID gridToggleButtons。现在，您可以在控制器中访问网格布局实例。现在需要使用getContent而不是getItems

<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>

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