关键词：LCD Number控件，字体，定时器，布局 1、QML没有类似与Qt Widgets中的LCD Number控件，可以在https://www.dafont.com/theme.php?cat=302下载LCD效果的字体DS-Digital 2、把字体文件添加到Resources中，如何添加参见第一篇文章； 3、SendTime.qml中的代码如下： Rectangle { id:detailRect Layout.fillHeight: true Layout.fillWidth: true anchors.top: parent.top anchors.topMargin: 0 height: 30 width: 60 color: "#00000000" property string sendT: "00:00:50.500" property int labelsize1: 0 property int labelsize2: 0 GridLayout {
columns: 2 rows:1 Layout.fillHeight: true Layout.fillWidth: true
FontLoader { id:fontlcd source: "qrc:/file/ds_digital/DS-DIGI.TTF" }
Rectangle { id:rect1 Layout.fillHeight: true Layout.fillWidth: true anchors.top: parent.top anchors.topMargin: 6 anchors.left: parent.left anchors.leftMargin: 5 width: 2*detailRect.width/5 height: detailRect.height color: "#00000000"; //必须也设置透明 Label { id: mvalue text: " 发射时间 : " anchors.centerIn: parent.Center color: Qt.rgba(255, 255, 255,1) font:Qt.font({weight:Font.Bold,pointSize:labelsize1}) } }
Rectangle { id:rect2 Layout.fillHeight: true Layout.fillWidth: true anchors.top: parent.top anchors.topMargin: 10 anchors.left: rect1.right anchors.leftMargin: 0 width: 3*detailRect.width/5 height: detailRect.height color: "#00000000"; //必须也设置透明 Label { id: unit anchors.centerIn: parent.Center text: sendT color: Qt.rgba(255, 255, 255,1) font:Qt.font({family:fontlcd.name,letterSpacing:5,weight:Font.Bold,pointSize:labelsize2}) } }
} }
其中： FontLoader { id:fontlcd source: "qrc:/file/ds_digital/DS-DIGI.TTF" } 是加载字体，该字体是上一步中加到资源中的字体文件。 4、在main.qml中添加如下代码，需要注意的是体会布局的规律： import QtQuick 2.0 import QtQuick.Layouts 1.0 import QtQuick.Controls 1.0 import QtQuick.Controls.Styles 1.0
Rectangle { id: main width: 600 height: 400
color: "#00000000"; //必须也设置透明 property int targetN: 0; property string chartName: ""; property string titleName: ""; property string paraName: ""
property string curr_time: "" property string fly_time: "" property string t0_time: "" property int labsize1: 36 property int labsize2: 50 signal chartclicksig(int targ,string cName); ColumnLayout {
Layout.fillHeight: true Layout.fillWidth: true anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: parent.left anchors.right: parent.right
Rectangle { Layout.fillHeight: true Layout.fillWidth: true id:titlerect anchors.top: parent.top anchors.topMargin: 40 height: 20 width: main.width color: "#00000000"; //必须也设置透明 Label { id: titlelabel text: "LCD效果的QML时间显示" anchors.centerIn: parent color: Qt.rgba(237, 212, 0,1) font:Qt.font({weight:Font.Bold,pointSize:40}) } }
Rectangle { id:mtime Layout.fillHeight: true Layout.fillWidth: true border.width: 4 border.color: "#DCDCDC" anchors.top: titlerect.bottom anchors.topMargin: 40 anchors.bottom: parent.bottom anchors.bottomMargin: 263 height: 20 width: main.width color: "#00000000"; //必须也设置透明 RowLayout {
Layout.fillHeight: true Layout.fillWidth: true
Rectangle { Layout.fillHeight: true Layout.fillWidth: true id:t0timerect anchors.left: parent.left height: mtime.height width: 3*mtime.width/5 color: "#00000000"; //必须也设置透明
SendTime { objectName: "t0time" id: t0time anchors.top: parent.top anchors.left: parent.left height: parent.height width: parent.width sendT:t0_time labelsize1: labsize1 labelsize2: labsize2 }
} Rectangle{ //竖线 id:line1 anchors.left: t0timerect.right anchors.top:parent.top anchors.topMargin: 7 height: mtime.height-15 width: 3 color: "#DCDCDC" }
Rectangle { Layout.fillHeight: true Layout.fillWidth: true anchors.left: line1.right height: mtime.height width: 2*mtime.width/5 color: "#00000000"; //必须也设置透明
FlyTime { objectName: "flytime" id: flytime anchors.top: parent.top anchors.left: parent.left height: parent.height width: parent.width flyT:fly_time labelsize1: labsize1 labelsize2: labsize2
}
} } }
}
5、在main.qml中添加方法如下，由MainWindow调用该方法传参： function refreshData(t0t,flyt){ t0_time = t0t fly_time = flyt
}
6、在MainWindow.cpp中添加定时器方法如下： void MainWindow::timerEvent(QTimerEvent *event) { QString t0,str; str = QString::number(num*1000); t0 = QTime::currentTime().toString("hh:mm:ss.zzz"); QMetaObject::invokeMethod(obj, "refreshData",Q_ARG(QVariant, QVariant::fromValue(t0)),Q_ARG(QVariant, QVariant::fromValue(str))); num++;
}
需要完整源代码，请到www.toutiao.com/i6844160335339848196/链接评论区写上你的邮箱
