Skip to content

Commit 798d407

Browse files
RealChuanRealChuan
committed
[重构Battery和Clock组件]: 增强UI一致性和交互体验，新增动画和主题功能
-**Battery组件**: 移除冗余sizeHint方法，调整最小尺寸为50x30，重构主窗口布局使用GridLayout统一组织控件，改进颜色选择按钮添加实时颜色预览功能 -**Clock组件**: 完全重构时钟绘制逻辑，支持平滑动画效果，新增文字颜色、动画控制、秒针显示等属性，改进刻度绘制精度，增强主窗口控制面板 -**UI一致性**: 统一两个组件的颜色选择交互模式，优化布局结构提升空间利用率，添加状态反馈和实时预览功能，增强整体用户体验 -**QML同步**: 同步优化BatteryQuick组件的布局结构，与C++版本保持一致，改进颜色选择交互和状态显示逻辑
1 parent 7e8eee4 commit 798d407

8 files changed

Lines changed: 880 additions & 267 deletions

File tree

‎src/Battery/batterywidget.cpp‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,9 @@ BatteryWidget::BatteryWidget(QWidget *parent)
6464

6565
BatteryWidget::~BatteryWidget() = default;
6666

67-
// Size hints
68-
auto BatteryWidget::sizeHint() const -> QSize
69-
{
70-
return {150, 80};
71-
}
72-
7367
auto BatteryWidget::minimumSizeHint() const -> QSize
7468
{
75-
return {80, 45};
69+
return {50, 30};
7670
}
7771

7872
// Border color

‎src/Battery/batterywidget.h‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ class BatteryWidget : public QWidget
1717
explicit BatteryWidget(QWidget *parent = nullptr);
1818
~BatteryWidget() override;
1919

20-
[[nodiscard]] auto sizeHint() const -> QSize override;
2120
[[nodiscard]] auto minimumSizeHint() const -> QSize override;
2221

2322
// 颜色设置

‎src/Battery/mainwindow.cpp‎

Lines changed: 69 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,15 @@ MainWindow::MainWindow(QWidget *parent)
2525
alarmSlider->setValue(20);
2626
auto *alarmLabel = new QLabel(tr("Alarm threshold: 20%"), this);
2727

28-
// 创建颜色选择控件
29-
auto *powerColorButton = new QPushButton(tr("Battery level color"), this);
30-
auto *alarmColorButton = new QPushButton(tr("Alarm color"), this);
31-
auto *borderColorButton = new QPushButton(tr("Border color"), this);
28+
// 创建颜色选择控件 - 使用颜色预览按钮
29+
auto *powerColorLabel = new QLabel(tr("Battery color:"), this);
30+
auto *powerColorButton = new QPushButton(this);
31+
32+
auto *alarmColorLabel = new QLabel(tr("Alarm color:"), this);
33+
auto *alarmColorButton = new QPushButton(this);
34+
35+
auto *borderColorLabel = new QLabel(tr("Border color:"), this);
36+
auto *borderColorButton = new QPushButton(this);
3237

3338
// 创建动画控制
3439
auto *animationCheckbox = new QCheckBox(tr("Enable animation"), this);
@@ -57,22 +62,19 @@ MainWindow::MainWindow(QWidget *parent)
5762
batteryLayout->addWidget(slider);
5863

5964
// 充电和动画控制布局
60-
auto *controlLayout = new QHBoxLayout();
61-
controlLayout->addWidget(chargingCheckbox);
62-
controlLayout->addWidget(animationCheckbox);
63-
64-
// 颜色选择布局
65-
auto *colorLayout = new QHBoxLayout();
66-
colorLayout->addWidget(powerColorButton);
67-
colorLayout->addWidget(alarmColorButton);
68-
colorLayout->addWidget(borderColorButton);
69-
70-
// 阈值和动画时长布局
71-
auto *settingsLayout = new QGridLayout();
72-
settingsLayout->addWidget(alarmLabel, 0, 0);
73-
settingsLayout->addWidget(alarmSlider, 0, 1);
74-
settingsLayout->addWidget(durationLabel, 1, 0);
75-
settingsLayout->addWidget(animationDurationSlider, 1, 1);
65+
auto *gridLayout = new QGridLayout;
66+
gridLayout->addWidget(chargingCheckbox, 0, 0);
67+
gridLayout->addWidget(animationCheckbox, 0, 1);
68+
gridLayout->addWidget(powerColorLabel, 1, 0);
69+
gridLayout->addWidget(powerColorButton, 1, 1);
70+
gridLayout->addWidget(alarmColorLabel, 2, 0);
71+
gridLayout->addWidget(alarmColorButton, 2, 1);
72+
gridLayout->addWidget(borderColorLabel, 3, 0);
73+
gridLayout->addWidget(borderColorButton, 3, 1);
74+
gridLayout->addWidget(alarmLabel, 4, 0);
75+
gridLayout->addWidget(alarmSlider, 4, 1);
76+
gridLayout->addWidget(durationLabel, 5, 0);
77+
gridLayout->addWidget(animationDurationSlider, 5, 1);
7678

7779
// 快速操作布局
7880
auto *quickActionsLayout = new QHBoxLayout();
@@ -82,9 +84,7 @@ MainWindow::MainWindow(QWidget *parent)
8284

8385
// 主布局组装
8486
mainLayout->addLayout(batteryLayout);
85-
mainLayout->addLayout(controlLayout);
86-
mainLayout->addLayout(colorLayout);
87-
mainLayout->addLayout(settingsLayout);
87+
mainLayout->addLayout(gridLayout);
8888
mainLayout->addLayout(quickActionsLayout);
8989
mainLayout->addWidget(statusLabel);
9090

@@ -121,33 +121,54 @@ MainWindow::MainWindow(QWidget *parent)
121121
durationLabel->setText(tr("Animation duration: %1ms").arg(value));
122122
});
123123

124-
// 颜色选择
125-
connect(powerColorButton, &QPushButton::clicked, this, [this, battery]() {
126-
QColor color = QColorDialog::getColor(battery->powerColor(),
127-
this,
128-
tr("Select the battery color"));
129-
if (color.isValid()) {
130-
battery->setPowerColor(color);
131-
}
132-
});
124+
// 颜色选择 - 更新按钮颜色预览
125+
auto updateColorButton = [](QPushButton *button, const QColor &color) {
126+
button->setStyleSheet(
127+
QString("background-color: %1; border: 1px solid gray;").arg(color.name()));
128+
};
133129

134-
connect(alarmColorButton, &QPushButton::clicked, this, [this, battery]() {
135-
QColor color = QColorDialog::getColor(battery->alarmColor(),
136-
this,
137-
tr("Select the alarm color"));
138-
if (color.isValid()) {
139-
battery->setAlarmColor(color);
140-
}
141-
});
130+
updateColorButton(powerColorButton, battery->powerColor());
131+
updateColorButton(alarmColorButton, battery->alarmColor());
132+
updateColorButton(borderColorButton, battery->borderColor());
142133

143-
connect(borderColorButton, &QPushButton::clicked, this, [this, battery]() {
144-
QColor color = QColorDialog::getColor(battery->borderColor(),
145-
this,
146-
tr("Select the border color"));
147-
if (color.isValid()) {
148-
battery->setBorderColor(color);
149-
}
150-
});
134+
connect(powerColorButton,
135+
&QPushButton::clicked,
136+
this,
137+
[this, battery, powerColorButton, updateColorButton]() {
138+
QColor color = QColorDialog::getColor(battery->powerColor(),
139+
this,
140+
tr("Select the battery color"));
141+
if (color.isValid()) {
142+
battery->setPowerColor(color);
143+
updateColorButton(powerColorButton, color);
144+
}
145+
});
146+
147+
connect(alarmColorButton,
148+
&QPushButton::clicked,
149+
this,
150+
[this, battery, alarmColorButton, updateColorButton]() {
151+
QColor color = QColorDialog::getColor(battery->alarmColor(),
152+
this,
153+
tr("Select the alarm color"));
154+
if (color.isValid()) {
155+
battery->setAlarmColor(color);
156+
updateColorButton(alarmColorButton, color);
157+
}
158+
});
159+
160+
connect(borderColorButton,
161+
&QPushButton::clicked,
162+
this,
163+
[this, battery, borderColorButton, updateColorButton]() {
164+
QColor color = QColorDialog::getColor(battery->borderColor(),
165+
this,
166+
tr("Select the border color"));
167+
if (color.isValid()) {
168+
battery->setBorderColor(color);
169+
updateColorButton(borderColorButton, color);
170+
}
171+
});
151172

152173
// 快速操作
153174
connect(increaseButton, &QPushButton::clicked, battery, [battery]() {

‎src/BatteryQuick/Main.qml‎

Lines changed: 74 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -58,87 +58,122 @@ ApplicationWindow {
5858
}
5959
}
6060

61-
// 充电和动画控制布局
62-
RowLayout {
61+
// 使用GridLayout来组织控件，与C++版本一致
62+
GridLayout {
6363
Layout.fillWidth: true
64+
columns: 2
65+
rowSpacing: 10
66+
columnSpacing: 10
6467

68+
// 第一行：充电状态和动画控制
6569
CheckBox {
6670
id: chargingCheckbox
6771
text: qsTr("Charging state")
6872
checked: false
73+
Layout.columnSpan: 1
6974
onToggled: {
70-
if (checked !== undefined) {
71-
battery.charging = checked;
72-
}
75+
battery.charging = checked;
7376
}
7477
}
7578

7679
CheckBox {
7780
id: animationCheckbox
7881
text: qsTr("Enable animation")
7982
checked: true
83+
Layout.columnSpan: 1
8084
}
81-
}
8285

83-
// 颜色选择布局
84-
RowLayout {
85-
Layout.fillWidth: true
86+
// 第二行：电池颜色选择
87+
Label {
88+
text: qsTr("Battery color:")
89+
}
8690

8791
Button {
88-
text: qsTr("Battery level color")
92+
id: powerColorButton
8993
Layout.fillWidth: true
9094
onClicked: {
9195
colorDialog.selectedColor = battery.powerColor;
9296
colorDialog.accepted.connect(function () {
93-
if (colorDialog.selectedColor !== undefined) {
97+
if (colorDialog.selectedColor) {
9498
battery.powerColor = colorDialog.selectedColor;
99+
updateColorButton(powerColorButton, colorDialog.selectedColor);
95100
}
96101
colorDialog.accepted.disconnect(arguments.callee);
97102
});
98103
colorDialog.open();
99104
}
105+
106+
background: Rectangle {
107+
color: battery.powerColor
108+
border.color: "gray"
109+
border.width: 1
110+
}
111+
112+
contentItem: Item {} // 隐藏默认文本
113+
}
114+
115+
// 第三行：报警颜色选择
116+
Label {
117+
text: qsTr("Alarm color:")
100118
}
101119

102120
Button {
103-
text: qsTr("Alarm color")
121+
id: alarmColorButton
104122
Layout.fillWidth: true
105123
onClicked: {
106124
colorDialog.selectedColor = battery.alarmColor;
107125
colorDialog.accepted.connect(function () {
108-
if (colorDialog.selectedColor !== undefined) {
126+
if (colorDialog.selectedColor) {
109127
battery.alarmColor = colorDialog.selectedColor;
128+
updateColorButton(alarmColorButton, colorDialog.selectedColor);
110129
}
111130
colorDialog.accepted.disconnect(arguments.callee);
112131
});
113132
colorDialog.open();
114133
}
134+
135+
background: Rectangle {
136+
color: battery.alarmColor
137+
border.color: "gray"
138+
border.width: 1
139+
}
140+
141+
contentItem: Item {} // 隐藏默认文本
142+
}
143+
144+
// 第四行：边框颜色选择
145+
Label {
146+
text: qsTr("Border color:")
115147
}
116148

117149
Button {
118-
text: qsTr("Border color")
150+
id: borderColorButton
119151
Layout.fillWidth: true
120152
onClicked: {
121153
colorDialog.selectedColor = battery.borderColor;
122154
colorDialog.accepted.connect(function () {
123-
if (colorDialog.selectedColor !== undefined) {
155+
if (colorDialog.selectedColor) {
124156
battery.borderColor = colorDialog.selectedColor;
157+
updateColorButton(borderColorButton, colorDialog.selectedColor);
125158
}
126159
colorDialog.accepted.disconnect(arguments.callee);
127160
});
128161
colorDialog.open();
129162
}
130-
}
131-
}
132163

133-
// 阈值和动画时长布局
134-
GridLayout {
135-
Layout.fillWidth: true
136-
columns: 2
164+
background: Rectangle {
165+
color: battery.borderColor
166+
border.color: "gray"
167+
border.width: 1
168+
}
137169

170+
contentItem: Item {} // 隐藏默认文本
171+
}
172+
173+
// 第五行：报警阈值
138174
Label {
139175
id: alarmLabel
140176
text: qsTr("Alarm threshold: 20%")
141-
Layout.fillWidth: true
142177
}
143178

144179
Slider {
@@ -153,10 +188,10 @@ ApplicationWindow {
153188
}
154189
}
155190

191+
// 第六行：动画时长
156192
Label {
157193
id: durationLabel
158194
text: qsTr("Animation duration: 500ms")
159-
Layout.fillWidth: true
160195
}
161196

162197
Slider {
@@ -201,9 +236,15 @@ ApplicationWindow {
201236
Layout.fillWidth: true
202237
text: qsTr("Status: Normal")
203238
horizontalAlignment: Text.AlignHCenter
239+
padding: 10
204240
}
205241
}
206242

243+
// 更新颜色按钮预览的函数
244+
function updateColorButton(button, color) {
245+
// 颜色已经在background中自动更新，因为绑定了电池的颜色属性
246+
}
247+
207248
// 连接电池信号
208249
Connections {
209250
target: battery
@@ -222,11 +263,8 @@ ApplicationWindow {
222263
}
223264

224265
// 充电状态变化
225-
function onChargingChanged(charging) {
226-
if (charging !== undefined) {
227-
chargingCheckbox.checked = charging;
228-
}
229-
if (charging === true) {
266+
function onChargingChanged() {
267+
if (battery.charging === true) {
230268
statusLabel.text = qsTr("Status: Charging...");
231269
statusLabel.color = "blue";
232270
} else {
@@ -237,26 +275,20 @@ ApplicationWindow {
237275
// 动画开始
238276
function onAnimationStarted(oldValue, newValue) {
239277
statusLabel.text = qsTr("Animation: %1% → %2%").arg(oldValue).arg(newValue);
278+
statusLabel.color = "green";
240279
}
241280

242281
// 动画完成
243282
function onAnimationFinished(value) {
244283
statusLabel.text = qsTr("The animation is completed: %1%").arg(value);
284+
statusLabel.color = "";
245285
}
286+
}
246287

247-
// 值增加
248-
function onValueIncreased(newValue) {
249-
console.log("Value increased to:", newValue);
250-
}
251-
252-
// 值减少
253-
function onValueDecreased(newValue) {
254-
console.log("Value decreased to:", newValue);
255-
}
256-
257-
// 值重置
258-
function onValueReset() {
259-
console.log("Value reset");
260-
}
288+
// 初始化
289+
Component.onCompleted: {
290+
// 设置初始值
291+
battery.value = 75;
292+
// 初始化颜色按钮预览（通过绑定自动处理）
261293
}
262294
}

0 commit comments

Comments
 (0)