前言
应粉丝的请求,想做一个列表控件,点击item的时候右侧列表项动态切换,效果如下:
他的设想是点击左边列表item的时候右边切换页面,这样做其实也可以,但是没必要搞这么复杂,直接就用两个列表来实现就可以了, 右边列表动态切换model就可以更新数据。
抽半小时实现了一个简单样式。
经常会收到一些粉丝的私信,我会尽量回复,有空的情况下可以帮忙一起解决问题,相互学习。
正文
废话不多说,直接上代码吧,逻辑很简单的。
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Shapes 1.13
Rectangle {
width: 640
height: 480
property var models : [model1,model2,model3,model4,model5]
Row{
anchors.centerIn: parent
spacing: 10
ListView{
id:continent
width: 150
height: 280
spacing: 10
model:ListModel{
ListElement{name:"亚洲"}
ListElement{name:"美洲"}
ListElement{name:"非洲"}
ListElement{name:"欧洲"}
ListElement{name:"大洋洲"}
}
onCurrentIndexChanged: {
nation.model = models[currentIndex]
}
delegate: Rectangle{
implicitWidth: 150
implicitHeight: 40
border.width: 2
border.color: continent.currentIndex === index ? "#FFA500" : "#D2691E"
gradient: RadialGradient {
centerX: 100; centerY: 40
centerRadius: 20
focalX: centerX; focalY: centerY
GradientStop { position: 0; color: continent.currentIndex === index ? "#4D1B01" : "black" }
GradientStop { position: 0.3; color: continent.currentIndex === index ? "#180A04" : "black" }
GradientStop { position: 0.7; color: continent.currentIndex === index ? "#180A04" : "black" }
GradientStop { position: 1; color: continent.currentIndex === index ? "#4D1B01" : "black"}
}
Text{
text: name
anchors.centerIn: parent
font.pixelSize: 20
font.bold: continent.currentIndex === index ? true : false
font.family: "微软雅黑"
color: "#D49339"
}
MouseArea{
anchors.fill: parent
onClicked: {
continent.currentIndex = index
}
}
}
}
ListView{
id:nation
width: 150
height: 280
spacing: 10
delegate: Rectangle{
implicitWidth: 150
implicitHeight: 40
border.width: 2
border.color: nation.currentIndex === index ? "#D49339" : "#643A1B"
gradient: RadialGradient {
centerX: 100; centerY: 40
centerRadius: 20
focalX: centerX; focalY: centerY
GradientStop { position: 0; color: nation.currentIndex === index ? "#4D1B01" : "black" }
GradientStop { position: 0.3; color: nation.currentIndex === index ? "#180A04" : "black" }
GradientStop { position: 0.7; color: nation.currentIndex === index ? "#180A04" : "black" }
GradientStop { position: 1; color: nation.currentIndex === index ? "#4D1B01" : "black"}
}
Text{
text: name
font.pixelSize: 20
font.bold: nation.currentIndex === index ? true : false
font.family: "微软雅黑"
color: "#D49339"
anchors.centerIn: parent
}
MouseArea{
anchors.fill: parent
onClicked: {
nation.currentIndex = index
}
}
}
}
ListModel{
id:model1
ListElement{name:"东北亚"}
ListElement{name:"南亚"}
ListElement{name:"东南亚"}
ListElement{name:"西亚"}
ListElement{name:"中亚"}
}
ListModel{
id:model2
ListElement{name:"东北美"}
ListElement{name:"南美"}
ListElement{name:"东南美"}
ListElement{name:"西美"}
ListElement{name:"中美"}
}
ListModel{
id:model3
ListElement{name:"东北非"}
ListElement{name:"南非"}
ListElement{name:"东南非"}
ListElement{name:"西非"}
ListElement{name:"中非"}
}
ListModel{
id:model4
ListElement{name:"东北欧"}
ListElement{name:"南欧"}
ListElement{name:"东南欧"}
ListElement{name:"西欧"}
ListElement{name:"中欧"}
}
ListModel{
id:model5
ListElement{name:"东北大洋"}
ListElement{name:"南大洋"}
ListElement{name:"东南大洋"}
ListElement{name:"西大洋"}
ListElement{name:"中大洋"}
}
}
}
这里用到了QML中的渐变色效果,文中使用的是RadialGradient,具体使用方法可以参考Qt帮助文档。
切换item后更新列表数据主要是这里:
onCurrentIndexChanged: {
nation.model = models[currentIndex]
}
动态切换第二个列表的model,这里定义了几个model,每一个item对应一个model,当点击左侧列表的时候进行切换即可。
还需要注意的是,当点击item的时候要设置列表的currentIndex
{
anchors.fill: parent
onClicked: {
continent.currentIndex = index
}
}
代码很简单,就不赘述了。
【领QT开发教程学习资料,点击下方链接莬费领取 ,先码住不迷路~】
点击这里:「链接」
页面更新:2024-03-04
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号