采用的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"
}
}
}
}