Options menu with ListView - Ideas and Help

viktorp

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:

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
    }
}

dheerendra

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

viktorp

@dheerendra Thank you for your reply!