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開發教程學習資料，點選下方連結莬費領取↓↓，先碼住不迷路~】

點選這裡：「連結」