qml之ui控件

最新推荐文章于 2024-05-15 11:48:39 发布
最新推荐文章于 2024-05-15 11:48:39 发布
阅读量302 收藏
点赞数
分类专栏： qt qml 文章标签： c++ qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45526401/article/details/134092915
版权
qt 同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
qml
5 篇文章 0 订阅
订阅专栏

文章目录

ui控件

Qt Quick控件用于创建由标准化组件（如按钮、标签、滑块等）构建的用户界面。

  • QtQuick.Controls：基本控件。
  • QtQuick.Templates：为控件提供行为化的、非可化视的基本类型。
  • QtQuick.Controls.Imagine：为Imagine主题风格提供支持。
  • QtQuick.Controls.Material：为Material主题风格提供支持。
  • QtQuick.Controls.Universal：为Universal主题风格提供支持。
  • Qt.labs.platform：支持常用对话框，如文件、颜色等，以及系统图标和标准路径。
    使用qml创建一个ApplicationWindow程序排版与GUI程序的QMainWindow类似。
    在这里插入图片描述
     我们主要要实现一个图片查看器的例子。
    在这里插入图片描述
    添加工具栏。在工具栏内部，添加了一个Flow元素，里面放置了一个工具按钮。
header: ToolBar { 
	Flow { 
		anchors.fill: parent 
		ToolButton { 
		text: qsTr("Open") 
		icon.source: "images/open.png" 
		onClicked: fileOpenDialog.open() 
	} 
} 
}

fileOpenDialog元素来自Qt.labs.platform模块。文件对话框可用于打开或保存文件。

    Platform.FileDialog{
        id:fileOpenDialog
        title: "Select an image file"
        folder: StandardPaths.writableLocation(StandardPaths.DocumentsLocation)
        nameFilters: [
            "Image files (*.png *.jpg)"
        ]
        onAccepted: {
            image.source = fileOpenDialog.file
        }
    }

添加菜单栏。

    menuBar: MenuBar{
        Menu{
            title: "&File"
            MenuItem{
                text:"&Open..."
                icon.source:"images/open.png"
                onTriggered: fileOpenDialog.open()
            }
        }

        Menu{
            title: "&Help"
            MenuItem{
                text:"&About..."
                onTriggered: aboutDialog.open()
            }
        }
    }

完整代码

import QtQuick
import QtQuick.Controls
import Qt.labs.platform as Platform

ApplicationWindow  {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    background: Rectangle{
        color:"darkGray"
    }

    Image {
        id: image
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
        asynchronous: true
    }

    header: ToolBar{
        Flow{
            anchors.fill: parent
            ToolButton{
                text:"打开"
                icon.source:"images/open.png"
                onClicked: fileOpenDialog.open()
            }
        }
    }

    Platform.FileDialog{
        id:fileOpenDialog
        title: "Select an image file"
        folder: StandardPaths.writableLocation(StandardPaths.DocumentsLocation)
        nameFilters: [
            "Image files (*.png *.jpg)"
        ]
        onAccepted: {
            image.source = fileOpenDialog.file
        }
    }

    menuBar: MenuBar{
        Menu{
            title: "&File"
            MenuItem{
                text:"&Open..."
                icon.source:"images/open.png"
                onTriggered: fileOpenDialog.open()
            }
        }

        Menu{
            title: "&Help"
            MenuItem{
                text:"&About..."
                onTriggered: aboutDialog.open()
            }
        }
    }

    Dialog{
        id: aboutDialog
        width: 300;height:150
        anchors.centerIn: parent
        title:"About"
        Label{
            horizontalAlignment: Text.AlignHCenter
            text:"aaaaaaaaa\nbbbbbbbb"
        }
        standardButtons: Platform.StandardButton.Ok

    }
}

移动版风格

 主要是要实现一个类似手机版的图片查看器。
在这里插入图片描述
首先，需要改变样式。

QQuickStyle::setStyle("Material");

用侧滑菜单（Drawer）替换菜单。

    Drawer{
        id: drawer
        width: parent.width/3*2
        height: parent.height

        ListView{
            anchors.fill: parent

            model: ListModel{
                ListElement{
                    text: "Open..."
                    triggered:function(){fileOpenDialog.open();}
                }

                ListElement{
                    text: "About..."
                    triggered:function(){aboutDialog.open();}
                }
            }

            delegate: ItemDelegate{
                text:model.text
                highlighted: ListView.isCurrentItem
                onClicked: {
                    drawer.close()
                    model.triggered()
                }
            }
        }
    }

完整代码

import QtQuick
import QtQuick.Controls
import Qt.labs.platform as Platform
import QtQuick.Controls.Material

ApplicationWindow  {
    width: 320
    height: 480
    visible: true
    title: qsTr("Image Viewer")
    background: Rectangle{
        color:"darkGray"
    }

    Image {
        id: image
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
        asynchronous: true
    }

    header: ToolBar{
        Material.background: Material.Orange

        ToolButton{
            icon.source: "images/baseline-menu-24px"
            onClicked: drawer.open()
        }

        Label{
            text:"Image Viewer"
            font.pixelSize: 20
            anchors.centerIn: parent
        }
    }

    Platform.FileDialog{
        id:fileOpenDialog
        title: "Select an image file"
        nameFilters: [
            "Image files (*.png *.jpg)"
        ]
        onAccepted: {
            image.source = fileOpenDialog.file
        }
    }

    Drawer{
        id: drawer
        width: parent.width/3*2
        height: parent.height

        ListView{
            anchors.fill: parent

            model: ListModel{
                ListElement{
                    text: "Open..."
                    triggered:function(){fileOpenDialog.open();}
                }

                ListElement{
                    text: "About..."
                    triggered:function(){aboutDialog.open();}
                }
            }

            delegate: ItemDelegate{
                text:model.text
                highlighted: ListView.isCurrentItem
                onClicked: {
                    drawer.close()
                    model.triggered()
                }
            }
        }
    }

    Dialog{
        id: aboutDialog
        width: 300;height:150
        anchors.centerIn: parent
        title:"About"
        Label{
            horizontalAlignment: Text.AlignHCenter
            text:"aaaaaaaaa\nbbbbbbbb"
        }
        standardButtons: Platform.StandardButton.Ok

    }
}

嵌套页面

我们将创建一个页面树，可以通过上级页面访问下级页面。
在这里插入图片描述
该用户界面的关键组件是StackView。它允许我们将页面放在一个堆栈（stack）上，当用户想要返回时，可以弹出（pop）该堆栈。
在这里插入图片描述

import QtQuick
import QtQuick.Window
import QtQuick.Controls

ApplicationWindow {
    id:window
    width: 320
    height: 480
    visible: true
    title: qsTr("Stack")

    header: ToolBar{
        ToolButton{
            text:stackView.depth>1?"\u25C0":"\u2630"
            font.pixelSize: Qt.application.font.pixelSize*1.6
            onClicked: {
                if(stackView.depth>1){
                    stackView.pop()
                }else{
                    drawer.open()
                }
            }
        }
        Label{
            text:stackView.currentItem.title
            anchors.centerIn: parent
        }

    }

    Drawer{
        id:drawer
        width: window.width*0.66;height: window.height

        Column{
            anchors.fill:parent

            ItemDelegate{
                text:"Profile"
                width: parent.width
                onClicked: {
                    stackView.push("Profile.qml")
                    drawer.close()
                }
            }
            ItemDelegate{
                text:"About"
                width: parent.width
                onClicked: {
                    stackView.push(aboutPage)
                    drawer.close()
                }
            }
        }
    }

    StackView{
        id :stackView
        anchors.fill : parent
        initialItem: Home{}
    }

    Component{
        id:aboutPage
        About{}
    }
}

这边贴出main.qml的代码，具体控件可以查看底部仓库代码链接。

并排界面

 对于这个示例，我们创建了一个用户界面，该界面由三个页面组成，用户可以在其中切换。
在这里插入图片描述
 该用户界面的关键组件是SwipeView。PageIndicator（底部的三个点）显示用户当前处于活动状态的页面，这有助于导航。

import QtQuick
import QtQuick.Window
import QtQuick.Controls

ApplicationWindow {
    id:window
    width: 320
    height: 480
    visible: true
    title: qsTr("sidebyside")

    SwipeView{
        id :swipeView
        anchors.fill : parent

        Home{

        }

        About{

        }

        EditProfile{

        }

        Profile{

        }
    }

    PageIndicator{
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter

        currentIndex: swipeView.currentIndex
        count: swipeView.count
    }
}

完整代码链接

ccloud11
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt Quick qml UI库 控件封装框架
qq_33876429的博客
12-17 8278
前言 本人原Java程序猿一枚。最近由于业务需要涉及到Qt Gui编程，目前Qt Gui编程的话可以选择Widget或者Qt Quick，都使用过一点，公司的项目有Widget也有Quick的，通过阅读前辈的代码感觉qml的编程和Html前端编程很类似 Qt Quick qml(以下简称qml)更适合快速开发，可以快速做出比较漂亮的页面，但是呢qml很少有界面库提供给广大的程序猿们使用，之前在...
Qt Quick基础用法+基本知识
MyArrow的专栏
02-09 6121
Qt Quick QML
QMUI框架简介
最新发布
2401_84149220的博客
05-15 232
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
【QML】使用Qt Design Studio设计UI动态行为
iriczhao的博客
09-15 2191
本文描述了如何在Qt Design Studio中创建连接和状态。在Qt Design Studio中使用视图设置的参数，都会在『Code』视图中添加对应的QML代码；反之，如果一个QML文件中已经存在相关的QML代码了，则会在Qt Design Studio中2D/3D视图下显示如果QML文档中存在错误或者存在Qt Design Studio不能识别的代码块时，Qt Design Studio将不能在对应的视图中正确显示。.ui.qml)，该文件只用于在Qt Design Studio中编辑。
QML样式：Default 、Universal 、Material 
baidu_41388533的博客
05-11 2389
QML样式：Default 、Universal 、Material 目录 Default样式 Universal Style Customization 预定义的通用颜色 属性 Material Customization 预定义的材料颜色 预定义的阴影 Variants 附加属性 附加属性 Default样式 官方文档：https://doc.qt.io/qt-5/qtquickcontrols2-default.html 默认样式是基本的全面样式。...
QML 仿ElementUI的基础控件库
Aike_li的博客
09-01 3868
本篇记录一下自己写的一些QML控件
一套完整的强大的qml自定义控件
04-20
一套完整的自定义的qmlGUI控件，功能强大完全可以拿去开发项目而不用重复造轮子。包括Button，Calendar，CheckBox，ComboBox，CtrlDialog，DateEdit，DatePicker，Dialog，FileDialog，ImageButton，Label，LineEdit...
QML+ Tab控件Demo
01-20
【QML+ Tab控件Demo】是一个基于QML技术实现的示例项目，它展示了如何在Qt Quick应用程序中使用Tab控件来创建一个多标签界面。QML（Qt Meta Language）是Qt框架的一部分，用于构建高度交互式的用户界面，其语法简洁...
自编Qml时间控件（实用）
12-21
本篇文章将详细介绍如何自编一个实用的Qml时间控件，以解决在Qt4.8中选择时间的难题。 首先，Qml是一种声明式语言，用于构建用户界面，它允许我们在不编写大量C++代码的情况下，通过声明组件属性和逻辑来创建动态且...
Qt-Qml-Calendar_qml_QT_qml日历控件_calendar_
10-04
QML是一种基于JSON的标记语言，它允许开发者通过声明性方式定义UI元素的结构和行为。在QML中，我们可以创建对象、设置属性、绑定数据、响应事件，以及实现复杂的动画效果。 对于日历控件，以下是一些可能涉及的关键...
使用QML 写的第一个 UI 界面
09-12
用QML 写的一个界面，天蓝色，自我感觉良好，后续还要与c++交互
Gurra：QML ui框架
02-04
此外，Gurra可能包含了对QtQuick Controls的优化和扩展，QtQuick Controls是QtQuick的一个子集，提供了标准的UI控件集合，适用于桌面和移动环境。 使用Gurra进行开发，你可以利用Qt的跨平台特性，编写一次代码，...
QML 项目中使用 Qt Design Studio 生成的UI界面
billy的博客
01-03 3501
今天来和大家聊一下 Qt Design Studio 这个软件。这个软件的主要功能是用来快速完成 UI 界面，就和 widget 中的 designer 设计器一样，可以把控件直接拖到界面上，通过修改属性快速完成一个界面，通过预览非常直观的看到界面效果，效率可以说是非常高的。不同的是，Qt Design Studio 生成的是 .ui.qml 文件，看后缀我们就知道这是用在 Qt Quick 项目中的。相当于原来的 qt quick designer，
【QView】基于QML的UI组件框架 之 AImage (图片)
Adimecoin的博客
12-04 168
AImage类型用于Image显示。基于QML的Image组件进行封装，主要新增图片圆形或圆角显示、背景色、边框控制等功能。
QML UI 与逻辑分开
hw5230的博客
03-28 195
如果我们以这样的方式重构QML，使得objectName更改或其他一些更改破坏了C ++找到QML对象的能力，那么我们的工作流程变得更加复杂和繁琐。重构 QML 比重构 C++容易得多，因此为了维护更方便，我们应该尽可能保持 C++类型不去调用 QML，然后通过将对 C++的类型的引用注册到 QML 中来调用。作为一种强类型语言，C++最适合做应用程序的逻辑，通常，此类代码执行复杂计算或数据处理等任务，这些任务在 C++中比 QML 中更快。这种方式，如果将来需要重构 QML，C++将保持不变。
【QML 底层依赖机制】入门 QML：核心机制与灵活选择
探索C++编程的奥秘，分享深入的技术见解和实践，旨在激发读者创造力与解决问题的思维。
01-14 1138
QML在Qt框架中占据着特殊的地位。它不是简单地替代传统的C++接口，而是与之并行，提供了一个更为高效和现代化的UI开发方法。在QML的帮助下，开发者能够快速地设计和原型化复杂的用户界面，同时保持与底层C++代码的高效集成。
QMUI框架简介，android开发游戏
wqwq_22的博客
02-16 4310
效果： 对话框 对话框的使用，在demo里写不是很清楚，我拿出来做了一个小例子 dialog.xml布局文件是5个按钮，分别对应五种不同的对话框类型: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android” android:layout_width=“match_parent” android:layout
Qt/C++开源作品9-扁平化样式flatui
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
05-14 3542
一、前言 对于现在做前端开发人员来说，FlatUI肯定不陌生，最近几年扁平化的设计越来越流行，大概由于现在PC端和移动端的设备的分辨率越来越高，扁平化反而看起来更让人愉悦，而通过渐变色产生的质感色彩反而没有扁平化来得亲切。 Flat UI是基于Bootstrap之上进行二次开发的扁平化前端框架，他提供了动感、时尚的风格色调搭配，简洁、炫丽的功能组件，同时还提供了更为平滑的js交互动画，可以称得上前端扁平化设计框架的优秀代表之一。 既然是扁平化设计框架的优秀代表，当然需要在自己项目中应用应用，本人最早使用VB
8个优秀的前端UI框架
YuZongTao
01-29 5595
一.Mint UI 官网：https://mint-ui.github.io/#!/zh-cn Github: https://github.com/ElemeFE/mint-ui/ 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。 二.WeUI 官网地址：https://weui.io/ Github: https://github.com/weui/weui.git WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微..
qml 自定义控件 andriod
10-02
qml自定义控件是一种在Qt中用于创建自定义用户界面的技术。它允许开发人员创建自己的控件，并在应用程序中使用它们。在Android平台上，可以使用qml自定义控件来创建自定义的UI元素，以满足应用程序的需求。 在提供的引用中，有关qml自定义时间选择控件的信息。通过使用qml的属性和接口，可以实现一个简单的时间选择控件。其中包括横向偏移值、顶部距离、是否需要年份、当前时间、最大时间、最小时间等属性和接口，以便设置和获取控件的状态。 与此相关的问题可能包括： 1. 如何在qml中创建其他自定义控件？ 2. 如何在Android应用程序中使用qml自定义控件？ 3. 是否有现成的qml自定义控件库可供使用？ 4. 如何处理qml自定义控件的事件和信号？ 5. 如何将qml自定义控件集成到现有的Android应用程序中？ 相关问题: 1. 如何在Qt中使用C++编写自定义控件？ 2. 如何在qml中处理用户输入事件？ 3. 如何将qml自定义控件与

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值