如何在SAP UI5中根据单选按钮选中状态显示/隐藏输入字段

修正控制器逻辑 #

你可以通过单选按钮select事件的参数直接获取选中状态，然后统一使用UI5的setVisible方法控制两个FlexBox的显示/隐藏，避免混用原生DOM操作：

checkDone: function (oEvent) {
  // 获取单选按钮的选中状态
  const isSelected = oEvent.getParameter("selected");
  // 控制两个FlexBox的可见性
  this.getView().byId("f1").setVisible(isSelected);
  this.getView().byId("f2").setVisible(isSelected);
}

为什么原来的写法有问题？ #

• 不要用document.getElementById操作UI5控件，UI5有自己的控件实例管理机制，直接操作DOM会破坏框架的生命周期管理
• 通过oEvent.getParameter("selected")能更直接、准确地获取当前单选按钮的选中状态，比再次通过ID获取控件再调用getSelected()更高效

完整代码示例 #

视图部分（XML）

<RadioButton id="ch1" select="checkDone" text="Check" />
<FlexBox class="sapUiSmallMarginEnd" id="f1" visible="false"> <!-- 默认隐藏 -->
  <Input value="ssss" />
</FlexBox>
<FlexBox direction="Column" id="f2" visible="false"> <!-- 默认隐藏 -->
  <Input value="dddd" />
</FlexBox>

控制器部分

checkDone: function (oEvent) {
  const isSelected = oEvent.getParameter("selected");
  const f1 = this.getView().byId("f1");
  const f2 = this.getView().byId("f2");
  f1.setVisible(isSelected);
  f2.setVisible(isSelected);
}

这样就能实现：单选按钮选中时显示两个FlexBox，取消选中时自动隐藏。

内容的提问来源于stack exchange，提问作者boba_fett