qt操作教程（Qt-简单的QML）
qt操作教程（Qt-简单的QML）以上就是新建一个新的Quick 应用 自动生成的代码 下面让我们围绕着这个窗口做一些我们自己的需求title表示窗口的标题visible设置窗口的显示还是隐藏、true表示显示 false 表示隐藏；width表示窗口的宽度；height表示窗口的高度；
首先 我们打开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 用来配置文字的外框效果
