dropdown list in qml

[vinayaka]

hai

My goal is to create a dropdown list in qml. There are some drop downs which are aligned vertically(like

News
Sports
Entertainment
)
when we click the arrow button on the right side of each of these, TV channel lists corresponding to each category will enlist.can i do it using list element and ListView

i coded like this

main.qml
import QtQuick 1.1
 
 
Rectangle {
    width: 400;height: 300
    Component {
        id: highlight
        Rectangle {
            id:backImage
            width: 400; height: 30
            color: "#b5b8b7"; radius: 25
        Rectangle {
            anchors.centerIn:backImage
            width: 375; height: 25
            color: "#cfd5d4"; radius: 20
            y: list.currentItem.y
            Behavior on y {
                SpringAnimation {
                    spring: 3
                    damping: 0.2
                }
            }
        }
    }
    }
 
    ListView {
        id: list
        width: 180; height: 200
 
        model: List{}
        delegate: Text { text: name }
 
        highlight: highlight
        highlightFollowsCurrentItem: false
        focus: true
 
}
}
 
List.qml
 
 
import QtQuick 1.1
 
 
ListModel {
    id: feeds
    ListElement { name: "news";}
}

main.qml
import QtQuick 1.1


Rectangle {
    width: 400;height: 300
    Component {
        id: highlight
        Rectangle {
            id:backImage
            width: 400; height: 30
            color: "#b5b8b7"; radius: 25
        Rectangle {
            anchors.centerIn:backImage
            width: 375; height: 25
            color: "#cfd5d4"; radius: 20
            y: list.currentItem.y
            Behavior on y {
                SpringAnimation {
                    spring: 3
                    damping: 0.2
                }
            }
        }
    }
    }

    ListView {
        id: list
        width: 180; height: 200
        
        model: List{}
        delegate: Text { text: name }

        highlight: highlight
        highlightFollowsCurrentItem: false
        focus: true

}
}

List.qml


import QtQuick 1.1


ListModel {
    id: feeds
    ListElement { name: "news";}
}

To copy to clipboard, switch view to plain text mode