Options menu with ListView - Ideas and Help



  • Hello I am making an options menu with submenus with an ListView. The ListView does function and I can navigate in the view with buttons but I don't know how to realize submenus, so when I click on a ListElement it opens a submenu with other ListElements. I am pretty new to QML and not really a experienced programmer in general :) Does anyone have an idea how I could realize that? I thought perhaps you could do it with a SwipeView, when you click on a ListElement it swipes to the second page and displays there another ListView.
    I don't think the code is necessary but it may help and I hope my text is understandable since my native language isn't english. Thank you!

    ListView:
    0_1547129525767_screen.png

    mainView.qml:

    import QtQuick 2.11
    import QtQuick.Layouts 1.3
    import QtQuick.Extras 1.4
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    
    Item {
        id: rootItm
        anchors.fill: parent
        property int index: 0
        property int indexCount: settingsModel.count
    
      SettingsList {
        id: settingsModel
      }
    
      ListView {
        id: sampleListView
        anchors.fill: parent
        model: settingsModel
        delegate: ListViewDelegate { }
        spacing: 4
        focus: true
        currentIndex: index
        displayMarginBeginning: -20
        displayMarginEnd: -20
      }
    }
    
    

    SettingsList.qml:

    import QtQuick 2.12
    
    ListModel {
      ListElement { optionTitle:"Setting 1" }
      ListElement { optionTitle:"Setting 2" }
      ListElement { optionTitle:"Setting 3" }
      ListElement { optionTitle:"Setting 4" }
      ListElement { optionTitle:"Setting 5" }
      ListElement { optionTitle:"Setting 6" }
      ListElement { optionTitle:"Setting 7" }
      ListElement { optionTitle:"Setting 8" }
      ListElement { optionTitle:"Setting 9" }
      ListElement { optionTitle:"Setting 10" }
      ListElement { optionTitle:"Setting 11" }
      ListElement { optionTitle:"Setting 12" }
      ListElement { optionTitle:"Setting 13" }
    }
    

    ListViewDelegate.qml:

    import QtQuick 2.12
    
    Rectangle {
        id: itemDelegate
        width: parent.width
        height: 30
        color: "#1b1b1b"
        radius: 2
        clip: true
    
        Rectangle {
          width: parent.width
          height: parent.height
          anchors.left: parent.left
          color: "#f22613"
          visible: itemDelegate.ListView.isCurrentItem ? true : false
          opacity: 0.1
          radius: 3
        }
    
        Text {
            id: itexItem
            anchors.left: parent.left
            anchors.leftMargin: 5
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 15
            text: optionTitle
            color: "white"
            opacity: 1
        }
    
        Rectangle {
          width: 2
          height: parent.height
          anchors.left: parent.left
          color: "#f22613"
          visible: itemDelegate.ListView.isCurrentItem ? true : false
        }
    }
    

  • Qt Champions 2017

    You did you check the example called Expandable delegate in Qt Example. It may help you.



  • @dheerendra Thank you for your reply!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.