Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. State control Drawer or SplitView
Forum Updated to NodeBB v4.3 + New Features

State control Drawer or SplitView

Scheduled Pinned Locked Moved Solved QML and Qt Quick
drawersplitviewqmlqtquick
2 Posts 1 Posters 463 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    Mr MinimalEffort
    wrote on last edited by
    #1

    Hi I am still transitioning from QtWidgets to QtQuick so I apologize if this has been asked before.
    I am developing a desktop ticketing app where I would like to toggle an item between being in a SplitView or a Drawer.
    My reasoning is if the window is not wide enough, I want to slide the details panel out in front of the ticket list, but if it is wider I would like to have the details panel as an item in a SplitView (As shown here)

    What is the preferred way of doing this?

    92fc8ac9-29b0-44bf-adf1-d89f0fb44ee5-image.png
    (Excuse the unstyled UI)

    Kind Regards
    -Mr MinimalEffort

    (Windows 10, Qt-6.2, QtCreator-5.x)

    1 Reply Last reply
    0
    • M Offline
      M Offline
      Mr MinimalEffort
      wrote on last edited by
      #2

      I have figured this out, by using states and setting the parent. It's not particularly fluid but it works

      StateGroup {
          id: stateGroup
          states: [
              State {
                  name: "landscape"
                  when: root.width >= 400
                  PropertyChanges {
                      target: issueDetails
                      parent: issueDetailsSplitViewContainer
                  }
                  PropertyChanges {
                      target: issueDetailsSplitViewContainer
                      visible: true
                  }
                  PropertyChanges {
                      target: issueDetailsDrawer
                      visible: false
                      position: 0
                  }
              },
              State {
                  name: "portrait"
                  when: root.width < 400
                  PropertyChanges {
                      target: issueDetails
                      parent: issueDetailsDrawerContainer
                  }
                  PropertyChanges {
                      target: issueDetailsSplitViewContainer
                      visible: false
                  }
              }
      
          ]
      }
      

      Kind Regards
      -Mr MinimalEffort

      (Windows 10, Qt-6.2, QtCreator-5.x)

      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved