【QML Button】 设置button
【需求】：想要设置button的字体颜色，button自身的颜色、形状等
1、Button内部字体
1.1、 直接设置 font 属性
Button 组件有一个 font 属性，可以直接设置字体的大小、家族、粗细等。
1 Button {
2 text: "开始"
3 font.pointSize: 14 // 字体大小
4 font.family: "Times" // 字体家族
5 font.bold: true // 字体加粗
6 font.italic: true // 字体斜体
7 }
1.2、使用 contentItem 自定义内容
如果需要对字体进行更精细的控制（例如对齐方式、颜色等），可以使用 contentItem 属性，将 Text 组件作为按钮的内容。
1 Button {
2 width: 100
3 height: 50
4
5 contentItem: Text {
6 text: "开始"
7 font.pointSize: 14
8 font.family: "Times"
9 font.bold: true
10 color: "white" // 字体颜色
11 horizontalAlignment: Text.AlignHCenter // 水平居中
12 verticalAlignment: Text.AlignVCenter // 垂直居中
13 }
14
15 background: Rectangle {
16 color: "grey"
17 }
18 }
1.3、全局设置字体
如果你希望整个应用程序中的按钮都使用相同的字体，可以在根组件（例如 ApplicationWindow）中设置默认字体。
1 ApplicationWindow {
2 font.pointSize: 14
3 font.family: "Times"
4 font.bold: true
5
6 Button {
7 text: "开始"
8 }
9 }
1.4、动态修改字体
如果需要在运行时动态修改按钮的字体，可以使用属性绑定
1 Button {
2 id: myButton
3 text: "开始"
4 font.pointSize: 14
5
6 MouseArea {
7 anchors.fill: parent
8 onClicked: {
9 myButton.font.pointSize = 18; // 点击时修改字体大小
10 myButton.font.family = "Arial"; // 点击时修改字体家族
11 }
12 }
13 }
1.5、复用 Text 组件定义为单独的组件
1 Component {
2 id: myTextComponent
3 Text {
4 text: qsTr("开始")
5 font.pointSize: 10
6 font.family: "Times"
7 font.bold: true
8 color: "white"
9 horizontalAlignment: Text.AlignHCenter
10 verticalAlignment: Text.AlignVCenter
11 }
12 }
13
14 Button {
15 anchors.centerIn: parent
16 width: 100
17 height: 50
18 contentItem: myTextComponent.createObject(button) // 动态创建 Text 组件
19 background: Rectangle {
20 anchors.fill: parent
21 color: "grey"
22 }
23 }
2、Button的背景
2.1、使用 Rectangle 设置纯色背景
Rectangle是最常用的背景组件，可以设置颜色、圆角、边框等。
1 Button {
2 text: "开始"
3 width: 100
4 height: 50
5
6 background: Rectangle {
7 color: "grey" // 背景颜色
8 radius: 10 // 圆角半径
9 border.color: "black" // 边框颜色
10 border.width: 2 // 边框宽度
11 }
12 }
2.2、使用 Image 设置图片背景
如果希望按钮的背景是一张图片，可以使用 Image 组件
1 Button {
2 text: "开始"
3 width: 100
4 height: 50
5
6 background: Image {
7 source: "path/to/your/image.png" // 图片路径
8 fillMode: Image.PreserveAspectCrop // 图片填充模式
9 }
10 }
2.3、使用渐变色背景
通过 Gradient 组件，可以为按钮设置渐变色背景。需在Rectangle中，Button自身没有gradient:Gradient
1 Button {
2 text: "开始"
3 width: 100
4 height: 50
5
6 background: Rectangle {
7 gradient: Gradient {
8 GradientStop { position: 0.0; color: "lightblue" }
9 GradientStop { position: 1.0; color: "darkblue" }
10 }
11 radius: 10 // 圆角半径
12 }
13 }
2.4、动态修改背景
如果需要在运行时动态修改按钮的背景，可以使用属性绑定或 JavaScript。
1 Button {
2 id: myButton
3 text: "开始"
4 width: 100
5 height: 50
6
7 background: Rectangle {
8 id: buttonBackground
9 color: "grey"
10 radius: 10
11 }
12
13 MouseArea {
14 anchors.fill: parent
15 onClicked: {
16 buttonBackground.color = "lightgreen"; // 点击时修改背景颜色
17 buttonBackground.radius = 20; // 点击时修改圆角半径
18 }
19 }
20 }
2.5、渐变色变换
（1）渐变色变换为另一个渐变色
1 Button {
2 id:button
3 anchors.centerIn: parent
4 width: 100
5 height: 50
6 contentItem:Text {
7 id: txt
8 text: qsTr("开始")
9 font.bold: true
10 font.pointSize: 20
11 horizontalAlignment: Text.AlignHCenter // 水平居中
12 verticalAlignment: Text.AlignVCenter // 垂直居中
13 }
14 background: Rectangle {
15 id : buttonbackground
16 anchors.fill: parent
17 gradient: Gradient{
18 GradientStop{id:stop1;position: 0.0; color: "lightblue"}
19 GradientStop{id:stop2;position: 1.0; color: "darkblue"}
20 }
21
22 radius: 10
23
24 }
25
26 MouseArea{
27 anchors.fill: parent
28 onClicked: {
29 stop1.color = "#FF7F50"
30 stop2.color = "#6200E2"
31 }
32 }
33
34 }
（2）渐变色被另一个颜色覆盖
1 Button {
2 id:button
3 anchors.centerIn: parent
4 width: 100
5 height: 50
6 contentItem:Text {
7 id: txt
8 text: qsTr("开始")
9 font.bold: true
10 font.pointSize: 20
11 horizontalAlignment: Text.AlignHCenter // 水平居中
12 verticalAlignment: Text.AlignVCenter // 垂直居中
13 }
14 background: Rectangle {
15 id : buttonbackground
16 anchors.fill: parent
17 gradient: Gradient{
18 GradientStop{id:stop1;position: 0.0; color: "lightblue"}
19 GradientStop{id:stop2;position: 1.0; color: "darkblue"}
20 }
21
22 radius: 10
23
24 }
25
26 MouseArea{
27 anchors.fill: parent
28 onClicked: {
29 buttonbackground.gradient = null
30 buttonbackground.color = "#6200E2"
31 }
32 }
33
34 }
