qml-1 初识

新建项目

选择：

之后一路默认+下一步 至工程创建成功！便可以运行

帮助文档

 创建快捷方式可以方便使用

 编辑->首选项 可以调整字体

 qmlscene

        qmlscene 是 随着 Qt 5 发布 的 一个 工具， 用来 加载 QML 文档， 它 使得 你 可以 在 应用 开发 过程中 随时 查看 QML 代码 的 效果。

它 支持 下列 特性：

● 在最 大化 窗口 中 查看 QML 文档。 ● 以 全屏 模式 查看 QML 文档。

● 窗口 透明 处理。 ● 禁用 反 锯齿。 ● 不 检测 QML 文件 的 版本。

● 用 慢镜头 方式 运行 所有 的 动画。 ● 调整 窗口 大小 来 适配 根 Item 的 尺寸。

● 添加 导入 路径。 ● 添加 命名 bundle。

● 使用 翻译 文件。

        qmlscene 是 用来 测试 QML 应用 的， 请勿 用于 生产 环境。 如果 你想 知道 qmlscene 工具 的 详细 用法， 请 输入 qmlscene --help 命令

        使用 cd 命令 切换 到 你 存放 QML 文档 的 目录 下， 就可以 验证 QML 的 效果 了。 只需 要 执行 这样 的 命令： qmlscene yourapp. qml。  如果 你 直接 输入 qmlscene 命令 来 执行， 那么 它 会 打开 一个 文件 选择 对话框， 让你 选择 一个 QML 文档， 选择 之后， 该文 档 对应 的 界面 就会 显示 出来

如：

双击后打开，选择刚刚项目创建的qml文件可以看到效果

 了解qml

打开main.qml 

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
}

Window 

qt助手中搜索Window

        在Qt Quick的世界里，Window对象用于创建一个与操作系统相关的顶层窗口，包含了如 Text, Rectangle, Image等元素。Window还有一个派生类，即大名鼎鼎的ApplicationWindow，也可以作为QML文档的根对象。上一篇文章，我 们提到的使用QQuickView加载QML的方式，顶层窗口是由QQuickView创建的。
        要使用Window对象， 需要使用下面这行代码来导入Window模块:
                import QtQuick.Window 2.2
         1） Window对象可以创建一个新的顶层窗口来作为Qt Quick的活动场景，它会自动设置好 窗口的基本属性，如图标、标题、系统按钮。当然也可以撰写QML代码来设定窗口 的属性。下面来谈谈这些属性。
        Window在桌面上的位置，由x, y属性决定，其大小由width，height属性决定。除此之 外，你还可以使用minimumWidth ,  minimumHeight来限制窗口的最小尺寸，使用 maximumWidth, maximumHeight来限制窗口的最大尺。 作为受窗口管理系统控制的一个窗口，其显示状态有:正常、最小化、最大化、全屏、 隐藏。PC操作系统的窗口管理系统多数都支持鼠标拖动改变窗口的大小和位置。
        Window对 象的visibility属性用来设置这个窗口的显示状态，可以取下列值:
                Window. Windowed,窗口占屏幕的一部分，窗口管理系统支持同时显示多窗口时才有效。
         Window.Minimized，最小化到任务栏上的一个图标。
         Window.Maximized，最大化，占用任务栏之外的所有屏幕空间，标题栏依然显示。
         Window.FullScreen，全屏显示，占用整个屏幕，标题栏隐藏。
         Window.AutomaticVisibility，给Window一个默认的显示状态，它的实际值与平台实   现有关。
         Window.Hidden, 隐藏，窗口不可见，与visible属性的效果一样。
        窗口的隐藏、显示由布尔类型的visible属性控制，设置其为true则显示窗口，为false 隐藏窗口。
        color属性用来设置窗口的背景颜色，可以用“blue",“#RRGGBB ", Qt.rgba()等形式为其 赋值;
        opacity属性用来设置窗口透明度，取值范围是0一1.0; 
        title属性用来设置窗口的标题， 字符串类型;
        activeFocusItem属性类型是Item，保存窗口中拥有活动焦点的Item，可能为null。
        contentOrientation属性用来设置窗口的内容布局方向，可以取下列值:
                     Qt.PrimaryOrientation，使用显示设备的首选方向。
             Qt.LandscapeOrientation，横屏。
             Qt.PortraitOrientation，竖屏。
             Qt.InvertedLandscapeOrientation，相对于横屏模式，旋转了180°。
             Qt.InvertedPortraitOrientation，相对于竖屏模式，旋转了180°。      
        一个Qt Quick应用可能会有多个窗口，窗口之间的关系由modality(模态)属性决定， 一个模态的窗口会阻止其他窗口获取输入事件。modality可以取下列值:
        a) Qt.NonModal，非模态。
        b) Qt. WindowModal ,窗口级别的模态，设置此属性的窗口只针对某一个窗口是模态的， 如子窗口相对父窗口是模态的，相对同一应用中的其他非父窗口则没有模态效果。
        c) Qt.ApplicationModal，应用级别的模态，设置此属性的窗口会阻止同一应用的其他窗 口获取输入事件。
       Window的flags属性就是用来设置窗口标志位的，取值与Qt C++一样， 不过要通过Qt.Widget, Qt.Popup这种形式来使用。
       Window的data属性为默认属性，类型是list<Object>。
       2） ApplicationWindow是Window的派生类，使用它需要使用下面的语句来引入Controls模块:
         import QtQuick .Controls 1.2
        ApplicationWindow有点儿像QMainWindow，有menuBar, toolBar, statusBar属性，分 别用来设置菜单、工具栏、状态栏，还有contentltem,可以用来设置内容元素的尺寸属性。   

Qt Quick Controls

        顾名思义，这个模块提供了大量类似 Qt Widgets 模块那样可重用的组件。这个模块与 Qt 组件非常类似。

在这里可以查看所有类型

Column

        Column 是一种将其子项沿单个列定位的类型。 它可以用作在不使用锚点的情况下垂直定位一系列项目的便捷方式。

        如果 Column 中的项目不可见，或者它的宽度或高度为 0，则该项目将不会被布置并且在列中将不可见。 此外，由于 Column 自动垂直定位其子项，因此 Column 中的子项不应设置其 y 位置或使用 top、bottom、anchors.verticalCenter、fill 或 centerIn 锚点垂直锚定自身。 如果您需要执行这些操作，请考虑在不使用 Column 的情况下定位项目。
        请注意，列中的项目可以使用定位器附加属性来访问有关其在列中的位置的更多信息。 

 Button

        Button控件可以说是最常用的控件之一了，用户点击按钮可能会触发pressed,released,clicked信号，我们可以在qml文档中可以为其指定相应的信号处理器来响应用户操作。

        

        从文档可以看出 Button 继承 AbstractButton,Contents可以看出它有属性，没有自定义的信号，那么看一下 AbstractButton中的内容

写一个简单的demo:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Button{
            width: 160
            height: 32
            x:150
            y:150
            background: Rectangle{

                color: "#FF228FFF"
                radius: 2
                //border.width: 1
                //border.color:Qt.rgba(0,0,0,0.09)
                Text{
                    id:text1

                    text: qsTr("下一步")
                    anchors.centerIn: parent
                    font.pixelSize: 14
                    font.family: "Microsoft YaHei"
                    color: "#FFFFFFFF"

                    onTextChanged: {
                        console.log("onTextChanged")
                    }
                }
            }
            onClicked: {
                console.log("onClicked")
                text1.text = qsTr("确定")
            }
        }
}

 其中：onClicked 是点击事件的槽函数，点击时候修改文本的内容为：确定；同时在Text 中定义了onTextChanged 槽函数，当文本内容发生变化时输出

 加载js文件，定义方法

 新建 test.js

添加现有文件：

 test.js内容：

/*
    这是一个js文件，执行js代码 它的引擎应该是Qv4.它只能支持的标准 es5
*/

//类的构造函数

function OperatorNumber(num){
    this.number = num

    this.add = function(num){
        return this.number + num
    }

    this.sub = function(num){
        return this.number - num
    }
}

 使用js

调用