QML图片切换

         采用的VS，需要在qml.qrc里面添加图片，目前代码里面是添加了6张。如果添加的图片数目不一致请将“if(index<1) index=6 ” “if(index>6)index=1”这两个地方进行修改。

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id:w  //指元素的唯一标识符

    /*
    "visible: true" 通常指的是元素的可见性，常用于网页或用户界面的开发中。
    当值设置为 "true" 时，意味着该元素对用户可见，即可以看到并与之交互。
    相反，如果值设置为 "false"，则表示该元素被隐藏或不可见。
    */
    visible: true

    width: 720  //宽度
    height: 480  //高度
    title: "图片切换" //标题

    /*
    这段代码是将一个项的最大宽度、最大高度、最小宽度和最小高度设置为另一个项（w）的宽度和高度。

    maximumWidth: w.width将使该项的最大宽度与w的宽度相等，即该项的宽度不能超过w的宽度。

    maximumHeight: w.height将使该项的最大高度与w的高度相等，即该项的高度不能超过w的高度。

    minimumWidth: w.width将使该项的最小宽度与w的宽度相等，即该项的宽度不能小于w的宽度。

    minimumHeight: w.height将使该项的最小高度与w的高度相等，即该项的高度不能小于w的高度。

    这些属性可以用于约束项的大小范围，确保其尺寸在一定的范围内，并保持与其他项的尺寸关联。
    */
    maximumWidth:w.width
    maximumHeight:w.height

    minimumWidth:w.width
    minimumHeight:w.height

    property int index:1  //定义了一个名为 "index" 的整数属性，并将其初始值设置为1。
    
    Image{
        id:image
        source:"qrc:/qt/qml/qml1/1.png"  //引用图像文件的路径。

        /*
        anchors.fill: parent是一种布局约束，用于将一个项的所有边缘对齐到其父项的对应边缘。这种            
        约束将使得项的大小与父项的大小相同，并且项会紧密地填充在父项内部。

    在Qt的QML中，anchors.fill: parent可以应用于任何支持布局的项，比如Rectangle、Item和Button等。它的作用是将项的left、right、top和bottom边缘都与父项对应的边缘对齐，从而实现项的充满效果。

例如，如果将anchors.fill: parent应用于一个Rectangle项，这个项将完全填充其父项，同时保持与父项的尺寸一致。

如果在QML中使用了anchors.fill: parent，通常还需要设置项的宽度和高度属性，以确保项能够填充父项的空间，或者可以使用anchors.margins属性来指定项与父项边缘之间的边距。

总而言之，anchors.fill: parent是一种用于布局的便捷方式，可以将项放置在其父项内部并使其充满整个父项的区域。
        */
        anchors.fill:parent
    }

//左边按钮
    Rectangle{
        id:left
        width:30
        height:w.height-100
        anchors.left:parent.left
        anchors.verticalCenter:parent.verticalCenter  //表明该元素的垂直中心 (verticalCenter) 与其父元素的垂直中心对齐。
        anchors.leftMargin:3  //该元素相对于其父元素左侧的边距为3个单位。
        radius:5   //元素的边角会被处理成一个半径为5的圆弧
        color:"black"  //是针对某个元素的颜色属性
        opacity:0.4     //针对某个元素的不透明度属性，将其设定为0.4。不透明度用于指定元素的透明程度，值为0到1之间，0表示完全透明，1表示完全不透明。

        //箭头
        Text{
            text:"<"
            anchors.centerIn:left
            font.bold:true      //针对某个字体的加粗属性，将其设定为 true。加粗属性用于指定字体是否应该以加粗的风格显示。
            color:"#FFFFFF"     //白色
            font.family:"微软雅黑" //针对字体的属性
            font.pointSize:20       //针对字体大小的属性
            
        }

        //点击时效果
        MouseArea{
            anchors.fill:left
            onPressed:{
                   left.color="#ffffff"
               
            }
            onClicked:{
                    index--
                    if(index<1) index=6 
                    image.source="qrc:/qt/qml/qml1/"+index+".png"
                    left.color="#000000"
            }
        }

    }
    
//右边按钮
    Rectangle{
        id:right
        width:30
        height:w.height-100
        anchors.right:parent.right
        anchors.verticalCenter:parent.verticalCenter
        anchors.leftMargin:3
        radius:5
        color:"black"
        opacity:0.4

        //箭头
        Text{
            text:">"
            anchors.centerIn:right
            font.bold:true
            color:"#FFFFFF"
            font.family:"微软雅黑"
            font.pointSize:20
            
        }
        
        //点击时效果
        MouseArea{
            anchors.fill:right
            onPressed:{
                   right.color="#ffffff"
               
            }
            onClicked:{
                    index++
                    if(index>3)index=1
                    image.source="qrc:/qt/qml/qml1/"+index+".png"
                    right.color="#000000"
            }
        }
    }



}