需求
效果
多个按钮使用同一个样式
原理
写成组件形式（在或不在当前文件中），需要样式时，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;
}
}
}
}