QtQuick系列教程(4)-Qml开发界面介绍(Qml基础-3)

总目录传送

本博文技术等级: ★☆☆☆☆☆☆☆☆☆

文本, 输入框, 按钮, 事件都介绍了, 下面我们玩一下图片
首先我们在按钮的上方加一个Image组件 用来显示图片
再加一个按钮 用来切换图片

书写代码

    Image {
        id: image
        height: 32
        width: 128
        anchors.bottom: text.top
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Button{
        id: button1
        text: qsTr("图片2")
        height: 40
        width: 120
        anchors.top: textField.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: {

        }
    }

原来的button也修改一下

    Button{
        id: button
        text: qsTr("图片1")//标题
        height: 40//按钮的高度
        width: 120//按钮的宽度
        anchors.centerIn: parent//居中
        onClicked: {//单击事件

        }
    }

运行显示一下效果

首先我们把2张图片拷贝到工程目录里, 接着我们在工程里加入图片资源
右键点击qml.qrc 选择Open in Editor

然后在下方添加菜单选择添加文件, 并从文件选择对话框里选择拷贝好的2张图

然后可以看到两张图已经加入到里资源管理器中

然后在工程列表中右键其中一个图片, 拷贝其路径

写入以下代码

button的事件改成设置图片的源地址是资源文件中的这个文件

image.source = "qrc:/menuBack.jpg";

然后再右键选择另外一个图片, 拷贝路径, 同样的书写button1的事件

image.source = "qrc:/menuLogoBack.png";

接着编译, 运行, 点击button看看

图片显示出来了, 然后点击button1看看呢

图片变换了, 搞定.

图片也玩了, 因为我们一开始就是走的工程实例模式, 所以介绍的button text image textfield 都是非常基础的界面组件
其实还有一种更为基础的, 就是Rectangle, 方框组件, 下面我们来看看它的用法

就把这个Rectangle弄到button1下面吧
设置一下颜色, 默认是透明的 我们看不到, 弄个红色吧

    Rectangle{
        height: 40
        width: 120
        color: "red"
        anchors.top: button1.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }

运行一下

还真是我们预期的效果, 方框能干什么呢? 可以作为容器, 也可以作为一些自定义组件的基础, 比如自定义的按钮, 基础就可以用Rectangle来做.
我们来试试把这个Rectangle弄成我们全部组件的背景
我们把Rectangle写到代码的上半部分

然后修改Rectangle的宽高和定位, 毕竟要做背景

然后删除这个右大括号

在代码的靠尾部的地方 加入右大括号, 这样我们之前写的组件些都就包圆了~

运行一下

搞定, 打完收工~

#### 联系方式:

---

作者	郑天佐
QQ	278969898
主页	http://www.camelstudio.cn
邮箱	[email protected]
博客	http://blog.csdn.net/zhengtianzuo06
github	https://github.com/zhengtianzuo
QQ群	199672080

---

捐赠

觉得分享的内容还不错, 就请作者喝杯咖啡吧~~

---