如何优化Qooxdoo菜单与工具栏布局？去除分隔线及冗余内边距

消除白色分隔线 #

Qooxdoo 的 MenuBar 默认底部会显示白色分隔线，可通过两种方式移除：

• 直接设置组件的 border 属性为 null：

  const menuBar = new qx.ui.menubar.MenuBar();
  menuBar.setBorder(null);
  

• 若主题样式优先级更高，用自定义 CSS 强制覆盖：

  .qx-menubar {
    border-bottom: none !important;
  }
  

移除工具栏多余灰色内边距 #

ToolBar 默认带有较大内边距，可通过以下方式调整：

• 统一设置四边内边距，数值按需修改：

  const toolBar = new qx.ui.toolbar.ToolBar();
  // 示例：上下左右内边距设为2px
  toolBar.setPadding(2, 2, 2, 2);
  

• 精细控制单方向内边距：

  toolBar.setPaddingTop(2);
  toolBar.setPaddingBottom(2);
  toolBar.setPaddingLeft(4);
  toolBar.setPaddingRight(4);
  

• 主题样式冲突时用 CSS 覆盖：

  .qx-toolbar {
    padding: 2px !important;
  }
  

完整示例代码 #

const app = new qx.application.Standalone();

app.main = function() {
  const doc = this.getRoot();
  
  // 初始化菜单栏并移除分隔线
  const menuBar = new qx.ui.menubar.MenuBar();
  menuBar.setBorder(null);
  
  // 添加菜单项
  const fileBtn = new qx.ui.menubar.Button("文件");
  const editBtn = new qx.ui.menubar.Button("编辑");
  menuBar.add(fileBtn);
  menuBar.add(editBtn);
  
  // 初始化工具栏并调整内边距
  const toolBar = new qx.ui.toolbar.ToolBar();
  toolBar.setPadding(2, 2, 2, 2);
  
  // 添加工具栏按钮
  const saveBtn = new qx.ui.toolbar.Button("保存");
  const undoBtn = new qx.ui.toolbar.Button("撤销");
  toolBar.add(saveBtn);
  toolBar.add(undoBtn);
  
  // 垂直布局容器整合菜单与工具栏
  const container = new qx.ui.container.Composite(new qx.ui.layout.VBox());
  container.add(menuBar);
  container.add(toolBar);
  
  doc.add(container, {edge: 0});
};

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