Qt Quick自定义样式一套

  弄了几个月的Qt,基本上以写上位机程序和工厂用的一些工具为主。老大的要求是快速、稳定、不出问题,不过他嫌.net要安装、还有升级(刚开始的时候由于这个出了些小问题),MFC开发东西又实在费劲,就让我找个轻量级又好用又方便部署的框架,找来找去实在找不到,干脆就用Qt了,至少这东西比MFC开发方便多了。在此之前花了点时间写了套UI,同时整了些能copy的代码。有了基本的代码积累,现在写起工具来也省事很多了,基本上就是copy、改改,写写逻辑。这里将UI发出来,谁要用的上尽管拿去修改,呵呵,咱也没啥时间和精力去维护了。

  下面是Demo图,在XP上边框阴影会有问题,之前花了点时间但没解决,后来老大说这个无所谓,可以要求使用win7,就不费这个力了,毕竟耗费力气、时间解决去解决得不偿失,没准儿还弄出别的问题。

下面一副是前不久写的一个上位机程序,模拟硬件收发数据帮其他开发人员开发、测试使用。

下面是Demo中的部分用法(由于Demo中包含了从服务器更新版本的代码,就不上传Demo的代码了,反正使用很简单,其中VersionDialog是在Demo项目中,我将所有的样式copy到新的项目中,这样可以针对情况随便修改),干掉了大部分控件的代码。

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.0
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0
import XA.Controls 1.0
import QtQuick.Controls.Styles 1.2

import "theme" as MyTheme

FussWindow{
    id:mainWin
    MyTheme.VersionDialog{id:versionDialog; }
    visible: true
    width: 800
    height: 600
    title: qsTr("QtQuick常用控件样式一套")
    titleMenu: Menu {
        style: MyTheme.MenuStyle{}
        __yOffset: 4
        MenuItem{
            text: "更新"
        }
        MenuItem{
            text: "关于"
            onTriggered: {
                versionDialog.show();
            }
        }
    }
    layoutComponent:Rectangle{
        id:rectangle_root
        color: "transparent"
        anchors.fill: parent

     MyTheme.HeaderItem{                title:"CheckBox"                content:Column{                spacing: 10                ExclusiveGroup { id: checkBoxGroup }                CheckBox{                        style: MyTheme.CheckBoxStyle{}                        width: 120                        text: "复选框1"                        exclusiveGroup: checkBoxGroup                        }                CheckBox{                        style: MyTheme.CheckBoxStyle{}                        width: 120                        text: "复选框2"                        exclusiveGroup: checkBoxGroup                        }                CheckBox{                        style: MyTheme.CheckBoxStyle{}                        width: 120                        text: "复选框3"                        }                }       }  }
}
import QtQuick 2.0
import QtQuick.Window 2.0
import XA.Controls 1.0
import QtQuick.Layouts 1.1

FussWindow{
    visible: false
    width: 300
    height: 180
    minimumWidth: 300
    maximumWidth: 300
    minimumHeight: 180
    maximumHeight: 180
    title: qsTr("版本信息")
    modality: Qt.WindowModal
    showMaxButton:false
    property color textColor: "#202020"
    layoutComponent:Rectangle{
       color: "transparent"
       anchors.fill: parent
       GridLayout{
           anchors.centerIn: parent
           columns:2
           rows:2
           rowSpacing: 10
           Text {
               text: qsTr("产品:")
               color: textColor
           }
           Text {
               Layout.column: 1
               text: qsTr("QtQuick样式Demo 1.0.0.0")
               color: textColor
           }
           Text {
               Layout.row: 1
               text: qsTr("版权:")
               color: textColor
           }
           Text {
               Layout.row: 1
               Layout.column: 1
               text: qsTr("(c) XAircraft. All right reserved.")
               color: textColor
           }
       }
    }
}

Demo代码结构图,注意运行时要将插件与exe程序放一起

下面是前面那个上位机程序的部署结构

qmldir中的内容为

module XA.Controls
plugin Controls

UI样式源代码:下载

时间: 2024-10-16 22:10:13

Qt Quick自定义样式一套的相关文章

Qt Quick快速入门

年前花了一个多月的时间看Qt的文档并根据自己的需要演练了一部分,之后写了一套UI,然后陆陆续续也弄了一些小工具(主要是上位机程序),由于后面工作估计会越来越忙,就能写一点是一点了,希望能对读者有帮助. 1.Qt Quick快速入门之qml布局 2.Qt Quick快速入门之qml与C++交互 3.Qt Quick快速入门之信号.槽 4.Qt Quick快速入门之线程基础 5.Qt Quick自定义样式一套 顺便打个广告,公司最近要补充一大批人(貌似要招差不多100人左右吧,研发方面主要是硬件.嵌

Qt5官方demo解析集33——Qt Quick Examples - Window and Screen

本系列所有文章可以在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873 接上文Qt5官方demo解析集32--Qt Quick Examples - Threading 来到我们Qt Quick Examples的第二个例子了,之所以挑这个demo,主要是我们使用Qt开发界面(尤其是跨平台界面)时,本地屏幕信息与窗口调用是不可避免的课题. 这个例子便向我们展示了在QML中获取本地屏幕信息的方法. 项目树如图,其中share

Qt Quick应用开发介绍 1-5

Qt Quick应用开发介绍 Introduction to Application Development with Qt Quick Release 1.0 Chapter1 Introduction 介绍 1.1 谁应该阅读这份教程 本教程解释了Qt Quick应用开发的基础以及使用示例代码帮助全面了解; 教程包含标准Qt Quick文档和基础概念, API以及详细的源码信息; 本教程是为了新接触Qt Quick的你准备的, 虽然从基础开始, 但你还是要熟悉编程的概念, 有JavaScri

QML官方系列教程——Qt Quick Controls Styles

附网址:http://qt-project.org/doc/qt-5/qtquickcontrolsstyles-index.html Qt Quick Controls Styles -- Qt Quick控件样式 Qt Quick Controls Styles子模块允许为Qt Quick Controls设置自定义的样式. 它在Qt 5.1中被引入因此需要Qt Quick 2.1. Getting Started -- 开始 使用以下声明将这些QML类型引入到你的应用程序中. import

Qt Quick 布局介绍

在 Qt Widgets 中,我们经常使用布局管理器来管理界面上的众多 widgets .在 Qt Quick 中也有这么一套与布局管理器类似的东西,叫作 Item Positioner .我还是沿用使用 Qt widgets 编程时的叫法,称它们为布局管理器. Qt Quick 提供这么几种常用的布局方式: anchors ,锚布局 Row ,行布局 Column ,列布局 Grid ,表格布局 Flow ,流式布局 咱们一个一个来看. 请给我的参赛文章<Qt Quick 事件处理之信号与槽>

Qt on Android: Qt Quick事件处理之鼠标、键盘、定时器

在<Qt on Android: Qt Quick 事件处理之信号与槽>中介绍了 QML 中如何使用内建类型的信号以及如何自定义信号,这次我们来看看如何处理鼠标.键盘.定时器等事件.这些时间在处理时,通常是通过信号来完成的. 广而告之:我正在参加 CSDN 博文大赛,请给我的参赛文章<Qt on Android: Qt Quick 事件处理之信号与槽>投票,谢谢. 鼠标事件处理 桌面开发的话,难免要处理鼠标事件-- 变色矩形示例 看一个简单的处理鼠标事件的例子,先看代码(handl

从头学Qt Quick(3)-- 用QML写一个简单的颜色选择器

先看一下效果图: 实现功能:点击不同的色块可以改变文字的颜色. 实现步骤: 一.创建一个默认的Qt Quick工程: 二.添加文件Cell.qml 这一步主要是为了实现一个自定义的组件,这个组件就是我们看到的那个色块,很明显定义成组件可以则兼UI的复用. 1 import QtQuick 2.0 2 3 Item { 4 id: container; 5 property alias cellColor: rectangle.color; 6 signal clicked(color cellC

Qt Quick实现的涂鸦程序

之前一直以为 Qt Quick 里 Canvas 才可以自绘,后来发觉不是,原来还有好几种方式都可以绘图!可以使用原始的 OpenGL(Qt Quick 使用 OpenGL 渲染),可以构造QSGNode 来绘图,还可以使用 QPainter !哇, QPainter 我很熟悉啊.于是,我用 QPainter 结合 QML 实现了一个简单的涂鸦程序: PaintedItem .它有下列功能: 设置线条宽度 设置线条颜色 设置背景颜色 清除涂鸦 无限级undo 程序很简陋,效果如下: 图1 Pai

Qt on Android: Qt Quick 事件处理之信号与槽

前面两篇文章< Qt on Android:QML 语言基础>和<Qt on Android: Qt Quick 简单教程>中我们介绍了 QML 语言的基本语法和 Qt Quick 的常见元素,亲们,通过这两篇文章,您应该已经可以完成简单的 Qt Quick 应用了.接下来呢,哈,我们要介绍 Qt Quick 中一个灰常灰常重要的主题:事件处理.这将是比较长长长长的一篇,哦,不还有后续好几篇--废话少说,还是谈正事儿吧兄弟姐妹们. 本文参加 CSDN 博文大赛,请点这里投我一票,谢