如何在UI5 sap.m.Dialog页脚添加“不再显示此对话框”复选框？

sap.m.Dialog的addButton()方法确实只能添加Button控件，但我们完全可以通过自定义页脚区域来实现需求——不用局限于默认的按钮栏，而是自己构建一个包含复选框和按钮的页脚栏，再赋值给Dialog的footer属性。

核心实现思路 #

利用Dialog的setFooter()方法，传入一个自定义的sap.m.Bar控件，在这个Bar中分别放置复选框和操作按钮：

• 把复选框放在Bar的左侧（contentLeft）
• 把确定/取消按钮放在Bar的右侧（contentRight）

这样既保留了页脚的布局逻辑，又能灵活添加非按钮控件。

完整代码示例 #

// 初始化对话框
const oDialog = new sap.m.Dialog({
  title: "系统提示",
  content: new sap.m.Text({ 
    text: "请注意：此操作将修改您的个人设置，请确认后执行。" 
  }),
  // 可选：设置对话框宽度，让布局更美观
  width: "400px"
});

// 创建自定义页脚栏
const oCustomFooter = new sap.m.Bar({
  // 左侧放置"不再显示"复选框
  contentLeft: new sap.m.CheckBox({
    text: "不再显示此对话框",
    select: (oEvent) => {
      // 复选框选中状态变更时，将状态存入本地存储（也可存入后端）
      const isChecked = oEvent.getParameter("selected");
      localStorage.setItem("skipThisDialog", isChecked.toString());
    }
  }),
  // 右侧放置操作按钮
  contentRight: [
    new sap.m.Button({
      text: "确认",
      type: sap.m.ButtonType.Emphasized,
      press: () => oDialog.close()
    }),
    new sap.m.Button({
      text: "取消",
      press: () => oDialog.close()
    })
  ]
});

// 为对话框设置自定义页脚
oDialog.setFooter(oCustomFooter);

// 打开对话框前，先判断是否需要显示
const shouldShowDialog = localStorage.getItem("skipThisDialog") !== "true";
if (shouldShowDialog) {
  oDialog.open();
}

额外说明 #

1. 状态持久化：示例中用localStorage存储复选框状态，下次打开页面时会自动判断是否显示对话框；如果是多用户场景，建议将状态存入后端数据库。
2. 布局调整：如果需要调整复选框和按钮的间距或位置，可以通过自定义CSS类来修改sap.m.Bar的样式，比如给Bar添加custom-footer-bar类，然后在CSS中设置padding或flex布局。
3. 兼容性：这种方法适用于所有支持sap.m.Dialog的UI5版本，没有版本限制。

内容的提问来源于stack exchange，提问作者David.Ng