QML ListView model动态切换

前言

应粉丝的请求，想做一个列表控件，点击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开发教程学习资料，点击下方链接莬费领取↓↓，先码住不迷路~】

点击这里：「链接」