如何创建左右边缘各带有一个图标的按钮？

在qooxdoo里可以通过容器嵌套+布局控制的方式轻松实现这种需求，核心是利用水平布局（HBox）分配元素位置：

• 先创建按钮，再用qx.ui.container.Composite搭配HBox布局作为按钮的内容容器
• 左侧图标、中间占位（或文本）、右侧图标依次添加到容器，通过flex属性控制空间分配

示例代码 #

// 初始化按钮
const button = new qx.ui.form.Button();

// 创建水平布局容器，设置垂直居中对齐
const btnContainer = new qx.ui.container.Composite(
  new qx.ui.layout.HBox(0).set({ alignY: "middle" })
);

// 左侧图标
const leftIcon = new qx.ui.basic.Image("icon/16/actions/go-previous.png");
btnContainer.add(leftIcon, { flex: 0 });

// 中间占位（若要添加按钮文本，替换为qx.ui.basic.Label即可）
const spacer = new qx.ui.core.Spacer();
btnContainer.add(spacer, { flex: 1 });

// 右侧图标
const rightIcon = new qx.ui.basic.Image("icon/16/actions/go-next.png");
btnContainer.add(rightIcon, { flex: 0 });

// 将容器设为按钮内容，调整内边距优化显示
button.set({
  content: btnContainer,
  padding: [4, 12]
});

// 把按钮添加到根节点
this.getRoot().add(button, { left: 150, top: 150 });

关键说明 #

• flex:0：让左右图标保持自身宽度，不占用额外空间
• flex:1：让中间的占位元素占据按钮的剩余空间，从而将两个图标分别推到左右边缘
• 如果需要添加按钮文本，只需把Spacer换成new qx.ui.basic.Label("按钮文本")，并可调整HBox的间距（比如把HBox(0)改成HBox(8)）来让文本和图标保持合适距离

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