需求
多个按钮使用同一个样式
原理
写成组件形式(在或不在当前文件中),需要样式时,Button加载style即可
代码
Item { Rectangle { width: 800; height: 640; Column { Button { id: btn; text: "testStyle1"; // 会被样式label中的text覆盖 style: ButtonStyle { background: Rectangle { color: control.hovered?"#a0a0a0":"#c0c0c0"; border.width: control.pressed?2:1; border.color: "white"; } label: Label { text: control.text; // 设置label样式后,按钮显示以此text为准 color: "black"; font.pixelSize: 24; font.bold: true; } } } Button { id: btn1; text: "testStyle2" style: btnStyle; } Button { // id: btn1; text: "testStyle3" style: btnStyle; } } } Component { id: btnStyle; ButtonStyle { background: Rectangle { color: control.hovered?"#a0a0a0":"#c0c0c0"; border.width: control.pressed?2:1; border.color: "white"; } label: Label { text: control.text; // 设置label样式后,按钮显示以此text为准 color: "black"; font.pixelSize: 24; font.bold: true; } } } }
效果