qml之ui控件

news2024/11/14 15:07:52

文章目录

  • ui控件
  • 移动版风格
  • 嵌套页面
  • 并排界面

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
    }
}

完整代码链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1144475.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

STM32 CAN使用

STM32 CAN使用 简介各种通讯接口对比报文总线上的报文信息表示为几种固定的赖类型数据帧列表模式掩码模式配置CAN配置参数位时序 简介 控制器局域网CAN(Controller Area Network)是由德国博世公司为汽车应用而开发的多主机局部网络,用于汽车的监测和控制…

React 生成传递给无障碍属性的唯一 ID

useId() 在组件的顶层调用 useId 生成唯一 ID: import { useId } from react; function PasswordField() { const passwordHintId useId(); // ...参数 useId 不带任何参数。 返回值 useId 返回一个唯一的字符串 ID,与此特定组件中的 useI…

【CSS】包含块

CSS规范中的包含块 包含块的内容: 元素的尺寸和位置,会受它的包含块所影响。 对于一些属性,例如 width, height, padding, margin,绝对定位元素的偏移值(比如 position 被设置为 absolute 或 fixed)&…

『第十章』仪态万千的雨燕:UIKit 和 SwiftUI

在本篇博文中,您将学到如下内容: 1. 老骥伏枥:AppKit 和 UIKit2. 雨燕的新装:SwiftUI3. SwiftUI 原生视图4. SwiftUI 容器4.1 ViewThatFits4.2 自定义布局(Custom Layout)6. SwiftUI 修改器(Modifiers)6.1 修改器修饰作用域6.1 自定义修改器5. SwiftUI 状态:真相之源(S…

在spring boot+vue项目中@CrossOrigin 配置了允许跨域但是依然报错跨域,解决跨域请求的一次残酷经历

首先,说一下我们的项目情况,我们项目中后端有一个过滤器,如果必须要登录的接口路径会被拦下来检查,前端要传一个token,然后后端根据这个token来判断redis中这个用户是否已经登录。 if (request.getMethod().equals(&qu…

20、Python -- 变量作用域、局部函数

目录 变量作用域变量?字典?获取变量字典变量遮蔽解决方法:方法1:使用globals访问全局变量方法2:在函数中声明全局变量 局部函数封闭函数返回局部函数代码演示另一种写法 局部函数的遮蔽问题如图:解决方法&a…

深入理解Java中的转义字符

最近在学习《两周自制脚本语言》这本书,在词法分析的一些复杂的正则中用到了大量的转义字符’\,比如正则字符串中包含了这个部分\\\\\"你知道它是匹配什么的么? 反斜杠在字符串和正则表达式中都有特殊作用。今天让我们来深入理解一下Ja…

如何使用drawio画流程图以及导入导出

画一个基本的流程图 你可以在线使用drawio, 或者drawon创建很多不同类型的图表。 如何使用编辑器,让我们以一个最基本的流程图开始。 流程图,就是让你可视化的描述一个过程或者系统。 图形和很少部分的文字表达就可以让读者很快的理解他们需要什么。 创…

文心大模型走进高校!百度携手吉林大学计算机学院成功举办AI师资培训

随着人工智能技术的快速发展,大模型已经成为了人工智能的主流发展方向,同时也对新时代AI人才的培养带来了新的思考与挑战。为了推动大模型及人工智能相关专业人员的培养,10月20日-22日,百度飞桨携手中国电子学会,吉林大…

@TableLogic 这个注解的作用

TableLogic 是 MyBatis-Plus(一个 MyBatis 的增强工具)提供的一个注解,用于实现逻辑删除功能。 逻辑删除并不是真正从数据库中删除记录,而是通过在数据库表中设置一个标记字段(通常是一个状态字段,如 is_d…

【Linux】部署及发布单机项目及前后端分离的项目

目录 一、讲述 1. 为什么 2. 要求 二、单机项目 1. 本机测试 2. 部署 三、前后端 1. 准备 2. 部署 一、讲述 1. 为什么 实施部署和发布项目的目的是将软件开发的成果转化为可用的产品或服务,以满足用户的需求。以下是实施部署和发布项目的一些重要原因&am…

Proteus仿真--闪烁的LED灯

本文介绍一种基于51单片机实现的LED灯闪烁仿真(完整仿真源文件及代码见文末链接) 本文主要介绍51单片机的LED闪烁仿真设计,仿真文件截图如下: 仿真视频如下: Proteus仿真--闪烁的LED灯 附完整Proteus仿真资料代码资…

NlogPrismWPF

文章目录 Nlog&Prism&WPF日志模块实现原理添加配置注入服务应用测试其他模块怎么调用? Nlog&Prism&WPF 日志模块 介绍了为WPF框架Prism注册Nlog日志服务的方法 实现原理 无论是在WPF或者ASP.NET Core当中, 都可以使用ServiceCollection来做到着…

【软考】10.1 算法特性/时间复杂度/递归/分治/动态规划

《算法》 《时间复杂度》 n 的最高次项 渐进符号 算法复杂度 线性级 O(n):顺序查找对数级 O(logn):对半查找、快速查找、归并算法 《递归》 时间复杂度 《分治法》 《动态规划法》 适用于求全局最优解构建…

MySQL总结 (思维导图,常用)

一、常见的增删改查 二、约束(五种) 三、聚合查询 1、聚合函数 2、group by 和 having 3、联合查询 案例表: drop table if exists classes; create table classes (id int primary key auto_increment,name varchar(20) ); insert into …

CAD2024最新中文版安装教程分享

wx供重浩:创享日记 对话框发送:cad24 获取 AutoCAD是目前计算机辅助设计领域最流行的CAD软件,此软件功能强大、使用方便,在国内外广泛应用于机械、建筑、家居、纺织等诸多行业。CAD制图软件具有良好的用户界面,通过交互…

开发直播商城APP:技术要点和最佳实践

在当今数字时代,直播商城APP正变得越来越受欢迎,成为了吸引消费者和促进销售的强大工具。这篇文章将探讨开发直播商城APP的技术要点和最佳实践,为开发者提供有价值的指导。 第一部分:项目准备 1.1定义项目目标 在开始开发直播商…

中国黑客群体的收入,与国外的黑客调查问卷相比!竟然还有女黑客!

从圈外认知来说,黑客一直被认为是高收入群体,黑客有白帽和黑帽处于黑白两道的黑客会的技术都有些相似,但是却是对立的,白帽做网络安全,修补漏洞。黑帽各种破坏,挖数据,攻击漏洞。 如果你对网络…

网络编程 - IP协议

目录 一,IP协议格式 1.1 拆包组包 1.2 8位生存空间 二,地址管理 2.1 动态分配 IP 2.2 NAT 机制(网络地址转换) 2.3 IPv6 2.4 网段划分 三,路由选择 一,IP协议格式 4位版本:IPv44位首部长…

数据结构和算法(15):排序

快速排序 分治 快速排序与归并排序的分治之间的不同: 归并排序的计算量主要消耗于有序子向量的归并操作,而子向量的划分却几乎不费时间; 快速排序恰好相反,它可以在O(1)时间内,由子问题的解直接得到原问题的解&#…