qml项目----------数据可视化面板（第二部分）

目录

1.布局

2.怎么完成Header01.qml部分label、图片以及时间的显示

---

所有部分的均已经撰写完成。

分为四个部分：

衔接：

第一部分：

(20条消息) qml项目（一）--------数据可视化面板（qml+echarts）_锦亦之2233的博客-CSDN博客

第二部分：

(20条消息) qml项目----------数据可视化面板（第二部分）_面板数据可视化_锦亦之2233的博客-CSDN博客

第三部分：(20条消息) qml项目---可视化面板（第三部分）--使用echarts以及qchart_echarts qml_锦亦之2233的博客-CSDN博客

第四部分：(20条消息) qml项目四----可视化面板----地图部分_锦亦之2233的博客-CSDN博客

1.布局

数据可视化面板分为两部分，成竖向排列

 头部以及底部

在qml中分为写成两个qml文件，方便在main.cpp中调用

在main函数中我们可以看到很清晰的布局

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15


ApplicationWindow {
    id:a
    width: 1920
    height: 1080
    visible: true
    title: qsTr("可视化面板")

    Image {
        width:a.width
        height:a.height
        id: background
        source: "images/bg.jpg"//身体

    }

    ColumnLayout {

    Header01 {
        header01text:"可视化面板"

    }
    Bottom02{


    }
    }

}

整体布局

Bottom02被分为三部分，分别显示左边三个图，中间一个图，以及右边一个图 

我们先完成可视化面板的头部分，也就是Header01.qml部分。

2.怎么完成Header01.qml部分label、图片以及时间的显示

label用来显示文本"可视化面板"，为可见元素。

Image用来显示底图，为可见元素

timer用来显示时间，时间的动作由js完成。

js文件代码：

function getCurrentDateTime() {
    var now = new Date();

    var year = now.getFullYear();
    var month = now.getMonth() + 1;  // 月份从0开始，所以要加1
    var day = now.getDate();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    return  "当前时间："+year + "年" + month + "月" + day + "日" + "   " + hours + "时" + minutes + "分" + seconds + "秒"+"  ";
}

js的方法用来返回现在的当前时间

 文件命名为Showtime.js,并存放在js文件夹内

时间函数已经准备好，我们再来看整体的划分显示；

import QtQuick 2.15
import "qrc:/js/Showtime.js" as Showtime01
Item {
    width:a.width
    height:a.height/14

    //接口：
   property string header01text: ""  // 定义一个名为 header01.text 的可设置属性



    Image{
        width:a.width
        height:a.height/14
        source: "images/head_bg.png"

        Text {
             text:header01text  // 使用父组件的属性作为文本内容
             color: "white"
             anchors.horizontalCenter: parent.horizontalCenter
             font.pixelSize: 50
             font.family: "Arial"  // 设置字体样式为 Arial

        }


        Text {

                    id: currentTimeText
                    anchors.right: parent.right
                    font.pixelSize: 25
                    color: "white"
                    font.family: "Arial"  // 设置字体样式为 Arial
                    anchors.verticalCenter: parent.verticalCenter //垂直居中
                }
        Timer {
                    interval: 1000  // 每秒更新一次时间
                    running: true
                    repeat: true
                    onTriggered: {

                        currentTimeText.text = Showtime01.getCurrentDateTime();
                    }
                }

    }

}

至此，头文件可以显示完毕。