项目
一个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;
                }
       }