Roson的Qt之旅#106 QML在图片上方放置按钮并实现点击按钮切换图片

QML完整代码如下：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQml.Models 2.2
import QtQuick.Controls 2.2


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


    Image {
       id: myImg1
        width: parent.width
        height: parent.height
        source: "resouces/VN1.jpeg"
    }

    Image {
       id: myImg2
        width: parent.width
        height: parent.height
        source: "resouces/VN2.jpeg"
        visible: false
    }

    Image {
       id: myImg3
        width: parent.width
        height: parent.height
        source: "resouces/VN3.jpeg"
        visible: false
    }

    Button{
        id: myBtn1
        text: qsTr("皮肤1")
        width: 50
        height: 20
        x: myImg1.width/2 - 95
        y: myImg1.y + myImg1.height - 40

        onClicked: {
            myImg1.visible = true;
            myImg2.visible = false;
            myImg3.visible = false;

        }
    }

    Button{
        id: myBtn2
        text: qsTr("皮肤2")
        width: 50
        height: 20
        x: myImg1.width/2 - 25
        y: myImg1.y + myImg1.height - 40
        onClicked: {
            myImg1.visible = false;
            myImg2.visible = true;
            myImg3.visible = false;
        }
    }

    Button{
        id: myBtn3;
        text: qsTr("皮肤3")
        width: 50
        height: 20
        x: myImg1.width/2 + 45
        y: myImg1.y + myImg1.height - 40
        onClicked: {
            myImg1.visible = false;
            myImg2.visible = false;
            myImg3.visible = true;
        }
    }
}

运行效果如下： 

 

记得要先将图片添加到资源文件中：