Qt-简单的QML

首先 我们打开QtCreator 选择Application 选择Qt Quick Application - Empty 建立一个新的Quick 应用

建立完成之后 会默认帮我们创建一个Quick 应用

import QtQuick 2.12
import QtQuick.Window 2.12

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

这个的意思是创建一个顶级窗口window；

visible设置窗口的显示还是隐藏、true表示显示 false 表示隐藏；

width表示窗口的宽度；

height表示窗口的高度；

title表示窗口的标题

以上就是新建一个新的Quick 应用 自动生成的代码 下面让我们围绕着这个窗口做一些我们自己的需求

1、改变窗口的位置

我们可以通过X Y 来改变窗口的位置 具体代码如下

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

X表示窗口左上角横坐标的位置

Y表示窗口左上角纵坐标的位置

2、改变窗口的背景颜色

我可以通过color来改变窗口的背景颜色

Window {
    visible: true
    x: 500
    y: 100
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: '#FF00FF'
}

color 后面加上单引号 在填写你需要的颜色

3、给界面设置id 主要是方便访问

Window {
    id: root
    visible: true
    x: 500
    y: 100
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: '#FF00FF'
}

我们可以通过id来访问其他界面或者父界面 也可以通过parent访问父对象

4、贴一张背景图片：首先将将要添加的图片加入到资源文件里面，然后可以通过Image来添加一张图片

Window {
    id: root
    visible: true
    x: 500
    y: 100
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: '#FF00FF'
    Image{
        id:mBackgound
        x: (parent.width - width)/2
        y:40
        source: '/image/image/1.jpg'
    }
}

image 这个表示一张图片 x y 属性设置图片的位置 parent.width表示父类窗口的宽度 source设置图片的位置、

5、在窗口里面添加文字 使用text添加文字

Window {
    id: root
    visible: true
    x: 500
    y: 100
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: '#FF00FF'
    Image{
        id:mBackgound
        x: (parent.width - width)/2
        y:40
        source: '/image/image/1.jpg'
    }
    Text {
        id: mText
        x:root.width-100
        y:root.height-100
        width: 100
        height: 100
        horizontalAlignment: Text.AlignHCenter
        color: '#FFFFFF'
        text: qsTr("hello world")
    }
}

Text 这个 可以为我们在制定位置写一段文字 X Y 属性表示位置设置的位置 width height表示文字的宽高 horizontalAlignment表示对齐方式 color 设置文字的颜色 text 表示设置的文字内容

6 设置文字的字体 和大小 参考如下代码

 Text
    {
        id: mText
        x:0
        y:0
        width: 100//parent.width
        height: 100//parent.height
        horizontalAlignment: Text.AlignHCenter
        color: '#000000'
        text: qsTr("hello world")
        font.family: "Times"
        font.pixelSize: 28
    }

font.family: "Times"

font.pixelSize: 28

这两个可以分别设置他们的字体和大小

7、假设有一个很长的字符串 Text宽度放不下怎么办了 我们可以自己设置 长字符

显示、参考如下代码

Text
    {
        id: mText
        x:100
        y:100
        width: 100//parent.width
        height: 100//parent.height
        horizontalAlignment: Text.AlignHCenter
        color: '#000000'
        text: qsTr("hello world  hello world  hello world")
        font.family: "Times"
        font.pixelSize: 15
        //elide: Text.ElideMiddle  //设置省略号
        style: Text.Sunken
        styleColor: '#ff0000'
        wrapMode: Text.WordWrap  //设置换行显示
    }

如果要设置长字符串 对于字符以省略号形式出现 就设置 elide属性 如果要换行显示 就设置wrapMode属性 两个只能生效其中一个 style和styleColor 用来配置文字的外框效果