Qt案例-ApplicationExamples-Calqlatr

项目

一个Qt Quick应用程序设计的横向和纵向设备,使用自定义组件,响应式布局和JavaScript的应用程序逻辑。

项目路径: Qt\Examples\Qt-6.7.1\demos

环境:Qt6.7.1 MSVC 2019 64位

复制代码
项目目录: 
calqlatr
	--CMakeList.txt 
	--main.cpp
	--Main.qml
	--qmldir
	--calqlatr.pro
	++content 
		--NUmberPad.qml
		--Dispaly.qml
		--calculator.js
		--BackspaceButton.qml
		--CalculatorButton.qml

CMakeList.txt

复制代码
创建一个动态链接库------作为QML模块的插件------该库将包含定义自定义QML元素的C++类和其他资源。
自动创建一个qrc文件,该文件将包含指定源文件中的所有资源,例如图片、样式表和翻译文件
qt_add_qml_module(calqlatrexample
    URI demos.calqlatr
    VERSION 1.0
    QML_FILES
        "Main.qml"
        "content/Display.qml"
        "content/NumberPad.qml"
        "content/CalculatorButton.qml"
        "content/BackspaceButton.qml"
        "content/calculator.js"
    RESOURCES
        "content/images/backspace.svg"
        "content/images/backspace_fill.svg"
)

main.cpp

复制代码
//QQuickStyle类允许配置应用程序样式.
QQuickStyle::setStyle("Basic");
//从uri指定的模块加载QML类型typeName。如果类型源自位于远程url的QML文件,则该类型将被异步加载。监听objectCreated信号以确定对象树何时准备好。
 engine.loadFromModule("demos.calqlatr", "Main");

Main.qml

复制代码
LayoutItemProxy类为布局中的QQuickItems提供了一个占位符。
显示空间和键盘空间。使用列布局和行布局进行切换。
子控件: 结果显示组件,操作按钮组件。

Display.qml

复制代码
自定义显示区组件。 使用ListView显示计算结果。
 列表项: 操作符和操作数。
positionViewAtEnd()将视图定位在开头或结尾,同时考虑到任何页眉或页脚。
定义方法:显示操作符,创建一个新行,添加操作数,删除和清空。

CalCulatorButton.qml

复制代码
自定义按钮组件。内部提供:
子控件: 背景和文本。
提供方法: 获取背景颜色, 获取边框颜色,获取文本颜色。 颜色属性。
属性: 是否可模糊,是否已经模糊的。
一个颜色变化的动画。

BackspaceButton.qml

复制代码
自定义按钮组件。
定义方法: 获取图标颜色, 获取图标。

NUmberPad.qml

复制代码
使用component 定义组件: 数字按钮和操作按钮。

QML组件的构建顺序:

复制代码
子节点从左往右是按照代码的从上向下排列的,即处于代码下面的组件先被创建出来。另外,组件展示层级是由上而下的,即写在代码后面的组件被展示在顶部图层,即先创建的占据顶部图层。
win{
	Item{
		Dispaly{
		}
		NumberPad{
		}
		ColumnLayout {
		}
		RowLayout {
		}
	}
}

qml: 窗口构建完成
qml: 主界面构建完成
qml: 行布局构建完成
qml: 列布局构建完成
qml: 数字键盘构建完成
qml: 显示组件构建完成

逻辑处理使用calculator.js

复制代码
在主窗口提供调用处理操作符和操作数的方法。
		 // 操作按钮
        function operatorPressed(operator) {
            CalcEngine.operatorPressed(operator, display)
        }
        // 处理数字函数
        function digitPressed(digit) {
            CalcEngine.digitPressed(digit, display)
        }
        // 是否显示按钮
        function isButtonDisabled(op) {
            return CalcEngine.isOperationDisabled(op, display)
        }
		 Keys.onPressed: function(event) {
            switch (event.key) {
                case Qt.Key_0: digitPressed("0"); break;
                case Qt.Key_Plus: operatorPressed("+"); break;
                }
       }
相关推荐
机器视觉知识推荐、就业指导3 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
꧁坚持很酷꧂6 小时前
Linux Ubuntu18.04下安装Qt Craeator 5.12.9(图文详解)
linux·运维·qt
ChoSeitaku7 小时前
17.QT-Qt窗口-工具栏|状态栏|浮动窗口|设置停靠位置|设置浮动属性|设置移动属性|拉伸系数|添加控件(C++)
c++·qt·命令模式
OpenC++10 小时前
【C++QT】Buttons 按钮控件详解
c++·经验分享·qt·leetcode·microsoft
我真的不会C10 小时前
QT窗口相关控件及其属性
开发语言·qt
云小逸11 小时前
【QQMusic项目界面开发复习笔记】第二章
c++·qt
꧁坚持很酷꧂12 小时前
配置Ubuntu18.04中的Qt Creator为中文(图文详解)
开发语言·qt·ubuntu
快乐飒男13 小时前
Qt基础009(HTTP编程和QJSON)
qt
此刻我在家里喂猪呢15 小时前
Qt指ModbusTcp协议的使用
qt
爱上解放晚晚15 小时前
QT 的.pro 转 vsproject 工程
开发语言·qt