【QML】自定义小组件，直接使用

定义了一个Component，id为customButtonComponent，但是并没有将其定义为CustomButton类型。在QML中，要创建一个可重用的自定义组件，通常需要创建一个单独的QML文件（例如CustomButton.qml），或者使用Component并在其他地方实例化。

1、方案一：将自定义按钮转换为单独的可重用组件

创建一个单独的CustomButton.qml文件

 1 // CustomButton.qml
 2 import QtQuick 2.15
 3 import QtQuick.Controls 2.15
 4
 5 Button {
 6     property alias textColor: btnText.color
 7
 8     background: Rectangle {
 9         gradient: Gradient {
10             GradientStop {
11                 position: 0.0;
12                 color: parent.down ? "#2A3F5F" :
13                       (parent.hovered ? "#2A3F5F" : "#1E2A4A")
14             }
15             GradientStop {
16                 position: 1.0;
17                 color: parent.down ? "#1E2A4A" :
18                       (parent.hovered ? "#1E2A4A" : "#2A3F5F")
19             }
20         }
21         radius: 6
22         border.color: "#00E5FF"
23         border.width: 2
24     }
25
26     contentItem: Text {
27         id: btnText
28         text: parent.text
29         font.bold: true
30         font.pointSize: 10
31         color: "#00E5FF"
32         horizontalAlignment: Text.AlignHCenter
33         verticalAlignment: Text.AlignVCenter
34     }
35 }

1. 在您的 main.qml 中导入包含 CustomButton.qml 的目录：

import "components" // 假设 CustomButton.qml 在 components 目录中

2、方案二：使用内联组件定义（适用于 Qt 5.15+）

 1 Component {
 2     id: webSocketComp
 3     Popup {
 4         // ... 其他代码保持不变 ...
 5
 6         // 按钮区域
 7         RowLayout {
 8             Layout.fillWidth: true
 9             Layout.preferredHeight: 40
10             spacing: 12
11
12             Item {
13                 Layout.fillWidth: true
14             }
15
16             // 使用内联组件定义
17             component CustomButton: Button {
18                 property alias textColor: btnText.color
19
20                 background: Rectangle {
21                     gradient: Gradient {
22                         GradientStop {
23                             position: 0.0;
24                             color: parent.down ? "#2A3F5F" :
25                                   (parent.hovered ? "#2A3F5F" : "#1E2A4A")
26                         }
27                         GradientStop {
28                             position: 1.0;
29                             color: parent.down ? "#1E2A4A" :
30                                   (parent.hovered ? "#1E2A4A" : "#2A3F5F")
31                         }
32                     }
33                     radius: 6
34                     border.color: "#00E5FF"
35                     border.width: 2
36                 }
37
38                 contentItem: Text {
39                     id: btnText
40                     text: parent.text
41                     font.bold: true
42                     font.pointSize: 10
43                     color: "#00E5FF"
44                     horizontalAlignment: Text.AlignHCenter
45                     verticalAlignment: Text.AlignVCenter
46                 }
47             }
48
49             CustomButton {
50                 id: connectButton
51                 text: "连接"
52                 width: 80
53                 height: 36
54                 onClicked: {
55                     // 连接WebSocket逻辑
56                 }
57             }
58
59             CustomButton {
60                 id: disconnectButton
61                 text: "断开"
62                 width: 80
63                 height: 36
64                 enabled: false
65                 onClicked: {
66                     // 断开WebSocket逻辑
67                 }
68             }
69
70             CustomButton {
71                 id: sendButton
72                 text: "发送"
73                 width: 80
74                 height: 36
75                 enabled: false
76                 onClicked: {
77                     // 发送消息逻辑
78                 }
79             }
80         }
81     }
82 }