当前位置： 首页 > news >正文

QML中显示二级界面的三种方式

news 2025/8/9 7:36:23

二级界面显示效果 

方式一 ：局部变量方式

            局部变量方式实现步骤:

                1.在调用方qml文件中注册组件;

                2.在调用方qml文件中初始化该组件的对象;

                3.在调用方qml文件中指定控件下使用该对象,实现二级界面显示.

        调用方qml文件关键实现

import QtQuick 2.1
import QtQuick.Controls 2.1ItemDelegate {id: delegateRow...//注册组件Component {id: musicPropertyDialogSetMetaInfo {id: setMetaInfosenderObj: musicProperty}}//初始化组件property var dialog: nullComponent.onCompleted: {dialog  = musicPropertyDialog.createObject()}...MouseArea {anchors.fill: parenthoverEnabled: trueacceptedButtons: Qt.LeftButton | Qt.RightButtoncursorShape: styleData.row === undefined ? Qt.ArrowCursor : Qt.PointingHandCursoronDoubleClicked: dataModel.play()onClicked: {if (mouse.button === Qt.LeftButton && styleData.row !== undefined) {
//                console.log("Индекс делегата " + styleData.row)
//                songLabelContainer.songLabel.text = model.artist
//                dataModel.setCurrentMedia(model.index)if (isCurrentMediaPlaying) {dataModel.pause()}tableView.currentRow = styleData.rowdataModel.setCurrentMedia(styleData.row)tableView.selection.clear()tableView.selection.select(styleData.row)}else if (mouse.button === Qt.RightButton && styleData.row !== undefined) {console.log("CLICKED")hideMenu.popup()}}Menu {id: hideMenuwidth: 100height: 150MenuItem {id: menuItemtext: "删除"implicitHeight: 30implicitWidth: 100onTriggered: dataModel.removeRow(styleData.row)background: Rectangle {width: menuItem.widthheight: menuItem.heightradius: 5color: menuItem.hovered ? "lightblue" : "white"}contentItem: Text {text: menuItem.textcolor: menuItem.hovered ? "white" : "black"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}MenuItem{id: goToLiricstext: "转到歌词"implicitHeight: 30implicitWidth: 100onTriggered: {}background: Rectangle {width: goToLirics.widthheight: goToLirics.heightradius: 5color: goToLirics.hovered ? "lightblue" : "white"}contentItem: Text {text: goToLirics.textcolor: goToLirics.hovered ? "white" : "black"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}MenuItem{id: musicPropertytext: "属性"implicitHeight: 30implicitWidth: 100//定义一个信号signal updateMusicProperty(string msg)onTriggered: {//局部变量实现属性对话框的显示if(dialog){dialog.show();}updateMusicProperty("更新音乐属性##")//发送信号给属性界面}background: Rectangle {width: musicProperty.widthheight: musicProperty.heightradius: 5color: musicProperty.hovered ? "lightblue" : "white"}contentItem: Text {text: musicProperty.textcolor: musicProperty.hovered ? "white" : "black"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}}}
}

        二级界面qml文件关键实现


import QtQuick 2.1
import QtQuick.Window 2.1
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3Window {id: roottitle: "音乐属性编辑"flags: Qt.Dialog // 设置为对话框样式modality: Qt.ApplicationModalwidth: 335height: 248property string songTitle: ""property string artist: ""property string duration: "03:45"property string album: ""//绑定发送对象property var senderObj: nullComponent.onCompleted: {if(senderObj) {//绑定发送对象信号与当前函数senderObj.updateMusicProperty.connect(handleMessage)}}function handleMessage(msg) {
//        console.log("SetMeaInfo UI Received:", msg)var data = dataModel.metaDatasongTitle = String(data["title"])artist = String(data["artist"])duration = String(data["time"])album = String(data["album"])console.log("songTitle:",songTitle," artist:",artist," duration:",duration," album:",album)}Column{anchors.centerIn: parentspacing: 10ColumnLayout {spacing: 15GridLayout {columns: 2columnSpacing: 20rowSpacing: 10Label { text: "标题：" }TextField {id: titleFieldtext: root.songTitleLayout.fillWidth: trueonTextChanged: root.songTitle = text}Label { text: "艺术家：" }TextField {id: artistFieldtext: root.artistLayout.fillWidth: trueonTextChanged: root.artist = text}Label { text: "时长：" }TextField {id: durationFieldtext: root.durationreadOnly: trueLayout.fillWidth: truecolor: "gray"}Label { text: "专辑：" }TextField {id: albumFieldtext: root.albumLayout.fillWidth: trueonTextChanged: root.album = text}}}Row{anchors.right: parent.rightspacing: 10Button{width: 80height:  30text: '确定'onClicked: {if(titleField.text === ""||artistField.text === ""||durationField.text === ""||albumField.text === ""){console.log("music property can't is null")return}var metaData = {"title": titleField.text,"artist":artistField.text,"album": albumField.text}dataModel.metaData = metaData;root.hide()}}Button{width: 80height:  30text: '取消'onClicked: root.hide()}}}}

方式二：全局变量方式

          全局变量方式实现步骤 :

        1.在全局main.qml中将二级界面注册为全局属性;

        2.在其它qml文件中使用该属性创建对象 ;

        3.在调用的地方使用该对象.

全局qml文件中关键实现

import QtQuick 2.1
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1
import QtQuick.Dialogs 1.3
import QtQuick.Window 2.1ApplicationWindow {id: rootwidth: 860height: 600visible: trueminimumHeight: 600minimumWidth: 800title: qsTr("音乐播放器")...//注册全局属性Item {Component.onCompleted: {// 将组件注册为全局属性Qt._musicPropertyDlg = Qt.createComponent("SetMetaInfo.qml")}}...}

调用方qml文件关键实现

import QtQuick 2.1
import QtQuick.Controls 2.1
import MusicProperty 1.0ItemDelegate {id: delegateRow...MouseArea {anchors.fill: parenthoverEnabled: trueacceptedButtons: Qt.LeftButton | Qt.RightButtoncursorShape: styleData.row === undefined ? Qt.ArrowCursor : Qt.PointingHandCursoronDoubleClicked: dataModel.play()Menu {id: hideMenuwidth: 100height: 50MenuItem{id: musicPropertytext: "属性"implicitHeight: 30implicitWidth: 100onTriggered: {... //2.全局变量实现属性对话框的显示let dialog = Qt._musicPropertyDlg.createObject(delegateRow)dialog.show()dialog.handleMessage('msg')...}background: Rectangle {width: musicProperty.widthheight: musicProperty.heightradius: 5color: musicProperty.hovered ? "lightblue" : "white"}contentItem: Text {text: musicProperty.textcolor: musicProperty.hovered ? "white" : "black"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}}}
}

二级界面qml文件关键实现


import QtQuick 2.1
import QtQuick.Window 2.1
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3Window {id: roottitle: "音乐属性编辑"flags: Qt.Dialog // 设置为对话框样式modality: Qt.ApplicationModalwidth: 335height: 248property string songTitle: ""property string artist: ""property string duration: "03:45"property string album: ""...function handleMessage(msg) {
//        console.log("SetMeaInfo UI Received:", msg)var data = dataModel.metaDatasongTitle = String(data["title"])artist = String(data["artist"])duration = String(data["time"])album = String(data["album"])console.log("songTitle:",songTitle," artist:",artist," duration:",duration," album:",album)}...Column{anchors.centerIn: parentspacing: 10ColumnLayout {spacing: 15GridLayout {columns: 2columnSpacing: 20rowSpacing: 10Label { text: "标题：" }TextField {id: titleFieldtext: root.songTitleLayout.fillWidth: trueonTextChanged: root.songTitle = text}Label { text: "艺术家：" }TextField {id: artistFieldtext: root.artistLayout.fillWidth: trueonTextChanged: root.artist = text}Label { text: "时长：" }TextField {id: durationFieldtext: root.durationreadOnly: trueLayout.fillWidth: truecolor: "gray"}Label { text: "专辑：" }TextField {id: albumFieldtext: root.albumLayout.fillWidth: trueonTextChanged: root.album = text}}}Row{anchors.right: parent.rightspacing: 10Button{width: 80height:  30text: '确定'onClicked: {if(titleField.text === ""||artistField.text === ""||durationField.text === ""||albumField.text === ""){console.log("music property can't is null")return}var metaData = {"title": titleField.text,"artist":artistField.text,"album": albumField.text}dataModel.metaData = metaData;root.hide()}}Button{width: 80height:  30text: '取消'onClicked: root.hide()}}}}

方式三：模块化方式

        模块化方式实现步骤:

        1.定义一个模块化目录qmlModel;

        2.将该二级界面实现一个模块化文件;

        3.将该模块化文件添加到qml引擎中;

        4.在调用方qml文件中通过 import方式导入 该二级界面 ;

        5.在调用方qml文件中指定位置使用该模块 .

模块化文件

qmldir文件实现

module MusicProperty
MusicProperty 1.0 MusicProperty.qml

调用方qml文件关键实现

import QtQuick 2.1
import QtQuick.Controls 2.1
//引入二级界面模块
import MusicProperty 1.0ItemDelegate {id: delegateRowproperty int heightRows: 50property bool isCurrentMediaPlaying: dataModel.mediaPlayerState === 1&& dataModel.currentMediaIndex === styleData.row//声明二级界面 MusicProperty{id: mProperty}MouseArea {anchors.fill: parenthoverEnabled: trueacceptedButtons: Qt.LeftButton | Qt.RightButtoncursorShape: styleData.row === undefined ? Qt.ArrowCursor : Qt.PointingHandCursoronDoubleClicked: dataModel.play()Menu {id: hideMenuwidth: 100height: 50MenuItem{id: musicPropertytext: "属性"implicitHeight: 30implicitWidth: 100...onTriggered: {//3.模块化调用实现二级界面属性对话框的显示mProperty.open()}...background: Rectangle {width: musicProperty.widthheight: musicProperty.heightradius: 5color: musicProperty.hovered ? "lightblue" : "white"}contentItem: Text {text: musicProperty.textcolor: musicProperty.hovered ? "white" : "black"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}}}
}

二级界面qml文件关键实现

import QtQuick 2.1
import QtQuick.Window 2.1
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3Item{...function open() {root.show()root.handleMessage("")}...Window {id: roottitle: "音乐属性编辑"flags: Qt.Dialog // 设置为对话框样式modality: Qt.ApplicationModalwidth: 335height: 248property string songTitle: ""property string artist: ""property string duration: "03:45"property string album: ""function handleMessage(msg) {
//        console.log("SetMeaInfo UI Received:", msg)var data = dataModel.metaDatasongTitle = String(data["title"])artist = String(data["artist"])duration = String(data["time"])album = String(data["album"])console.log("songTitle:",songTitle," artist:",artist," duration:",duration," album:",album)}Column{anchors.centerIn: parentspacing: 10ColumnLayout {spacing: 15GridLayout {columns: 2columnSpacing: 20rowSpacing: 10Label { text: "标题：" }TextField {id: titleFieldtext: root.songTitleLayout.fillWidth: trueonTextChanged: root.songTitle = text}Label { text: "艺术家：" }TextField {id: artistFieldtext: root.artistLayout.fillWidth: trueonTextChanged: root.artist = text}Label { text: "时长：" }TextField {id: durationFieldtext: root.durationreadOnly: trueLayout.fillWidth: truecolor: "gray"}Label { text: "专辑：" }TextField {id: albumFieldtext: root.albumLayout.fillWidth: trueonTextChanged: root.album = text}}}Row{anchors.right: parent.rightspacing: 10Button{width: 80height:  30text: '确定'onClicked: {if(titleField.text === ""||artistField.text === ""||durationField.text === ""||albumField.text === ""){console.log("music property can't is null")return}var metaData = {"title": titleField.text,"artist":artistField.text,"album": albumField.text}dataModel.metaData = metaData;root.hide()}}Button{width: 80height:  30text: '取消'onClicked: root.hide()}}}}}

引入模块路径

QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.addImportPath("/home/ubuntu/packet/gitpro/MediaPlayer/qmlModel");
engine.load(url);

模块化文件结构

Project/
├── qmlModel/
│   └── MusicProperty/
│       │   ├── qmldir
│       │   └── MusicProperty.qml

http://www.dtcms.com/a/321233.html

相关文章：

  • 【Git】企业级使用
  • electron自定义国内镜像
  • 静电释放场景误报率↓78%！陌讯多模态融合算法在工业检测的落地优化
  • 【unity实战】用unity实现一个简易的战斗飞机控制器
  • BUG调试案例十七：ENC424J600以太网掉线问题案例
  • uniapp瀑布流最简单的实现方法
  • SonarQube 扫描多个微服务模块
  • 【51单片机2个按键控制流水灯转向】2022-10-25
  • 移动端开发中类似腾讯Bugly的产品推荐与比较-5款APP异常最终产品推荐-卓伊凡|bigniu
  • springBoot集成minio并实现文件的上传下载
  • 华为网路设备学习-28（BGP协议 三）路由策略
  • 怎么实现对三菱PLC的远程调试和PLC远程维护？
  • 【世纪龙科技】数智重构车身实训-汽车车身测量虚拟实训软件
  • 矩阵中的最长递增路径-记忆化搜索
  • 【ESP32-menuconfig（1） -- Build Type及Bootloader config】
  • Vue 项目安全设置方案：XSS/CSRF 防护指南
  • 浅谈：如何复现修复Bug？
  • OpenCV 3 终极指南：创建炫酷自定义窗口与图像显示的艺术
  • 【代码随想录day 14】 力扣 111.二叉树的最小深度
  • Cesium 无人机视角飞行漫游，截屏
  • RabbitMQ详情介绍—七种工作模式
  • springmvc4+hibernate4整合框架的搭建
  • 库函数版独立按键用位运算方式实现（STC8）
  • Array Description(Dynamic programming)
  • 【网络编程】IO多路转接——epoll
  • Java文件读写（IO、NIO）
  • 第39周——训练自己的数据集
  • 汇编语言和高级语言的差异
  • BGP综合实验练习作业
  • Fabarta个人专属智能体：三维搜索链+动态大纲重构教材开发范式