import QtQuick 2.0
import QtQuick.Controls 2.12
Item {
width: 880
height: 664
Rectangle {
anchors.fill: parent
color: "#333333"
radius: 8
Button {
id: buttonStart
x: 344
y: 422
width: 72
height: 72
text: timer.running ? "暂停" : "开始"
onClicked: {
if (timer.running) {
timer.stop();
} else {
timer.start();
}
}
}
Button {
id: buttonStop
x: 464
y: 422
width: 72
height: 72
text: "停止"
onClicked: {
timer.stop();
elapsedTime = 0;
updateTimerText();
}
}
Text {
id: timerText
x: 356
y: 276
text: "00:00:00.00"
anchors.horizontalCenterOffset: 26
font.pixelSize: 40
color: "white"
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 266
}
Text {
id: element
x: 356
y: 320
width: 168
height: 22
text: qsTr("正在录制...")
font.pixelSize: 12
}
}
property real elapsedTime: 0
Timer {
id: timer
interval: 10
running: false
repeat: true
onTriggered: {
elapsedTime += 0.01;
updateTimerText();
}
}
function updateTimerText() {
const minutes = Math.floor(elapsedTime / 60);
const seconds = Math.floor(elapsedTime % 60);
const milliseconds = Math.floor((elapsedTime % 1) * 100);
timerText.text =
(minutes < 10 ? "0" + minutes : minutes) + ":" +
(seconds < 10 ? "0" + seconds : seconds) + "." +
(milliseconds < 10 ? "0" + milliseconds : milliseconds);
}
Rectangle {
id: soundWave
x: 368
y: 200
anchors.centerIn: parent
width: 230
height: 80
color: "transparent"
anchors.verticalCenterOffset: -125
anchors.horizontalCenterOffset: 40
Row {
anchors.rightMargin: 230
anchors.fill: parent
spacing: 10
Repeater {
model: 12
Rectangle {
id: waveBar
width: 10
height: Math.random() * 60 + 20
color: "#FFFF4431"
// 动画绑定 timer.running,自动同步
SequentialAnimation {
running: timer.running
loops: Animation.Infinite
NumberAnimation {
target: waveBar
property: "height"
to: Math.random() * 60 + 20
duration: 500
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: waveBar
property: "height"
to: Math.random() * 60 + 20
duration: 500
easing.type: Easing.InOutQuad
}
}
}
}
}
}
}
qml 动态音频普,与计时器
最新推荐文章于 2025-04-28 11:09:01 发布