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. qt.labs.controls - Pane in Pane problem

qt.labs.controls - Pane in Pane problem

Scheduled Pinned Locked Moved Solved QML and Qt Quick
labs.controls5.6.0
2 Posts 1 Posters 1.1k Views
  • 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.
  • E Offline
    E Offline
    ekkescorner
    Qt Champions 2016
    wrote on 14 Apr 2016, 21:04 last edited by ekkescorner
    #1

    Qt 5.6.0 - labs.controls - Material style - Android / iOS

    while preparing a sample app for my blog http://j.mp/qt-x
    I run into a problem / question

    my page has this structure:

    ApplicationWindow
        Pane
            ColumnLayout
                controls
                Switch
                Pane
                    ColumnLayout
                        controls
                more controls
    

    ColumnLayouts needed because controls must resize (portrait-landscape)

    inner Pane only visible if switch checked
    because I don't want to set visble on all controls, I want to place them inside a Container

    qt.labs.controls provides some Container and I tried using a Pane which is a labs.controls Container
    it works well, but there's not all space available - some pixels at left and right are missing:
    https://app.box.com/s/3wehxjir525j0cmbhmwlft8emhqtju0d

    using a Column instead of Pane all is ok:
    https://app.box.com/s/27yvi9dibzxgkp20pi68wb1p928e5exo

    So I have a workable solution, but don't understand why Pane in Pane doesn't work
    Am I doing anything wrong with my nested Panes ?
    Want to explain the structure and want to use as much as possible from labs.controls

    here's some simplified code:

    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    
    int main(int argc, char *argv[])
    {
        QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
        qputenv("QT_LABS_CONTROLS_STYLE", "material");
        QGuiApplication app(argc, argv);
        QQmlApplicationEngine engine;
        engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
        return app.exec();
    }
    

    and qml:

    import QtQuick 2.6
    import QtQuick.Layouts 1.3
    import Qt.labs.controls 1.0
    import Qt.labs.controls.material 1.0
    
    ApplicationWindow {
        id: appWindow
        title: "Snippets"
        visible: true
        Material.theme: Material.Light
        Material.primary: Material.BlueGray
        Material.accent: Material.Teal
    
        Pane {
            anchors.fill: parent
            ColumnLayout {
                anchors.right: parent.right
                anchors.left: parent.left
                Label {
                    text: "first Labeltext"
                }
                Switch {
                    id: theSwitch
                }
    
                Pane {
                    visible: theSwitch.checked
                    anchors.left: parent.left
                    anchors.right: parent.right
                    ColumnLayout {
                        anchors.right: parent.right
                        anchors.left: parent.left
                        Label {
                            text: "another Labeltext"
                        }
                    }
                }
    
                Label {
                    text: "last Labeltext"
                }
            }
        }
    }
    
    

    ekke ... Qt Champion 2016 | 2024 ... mobile business apps
    5.15 --> 6.8 https://t1p.de/ekkeChecklist
    QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

    1 Reply Last reply
    0
    • E Offline
      E Offline
      ekkescorner
      Qt Champions 2016
      wrote on 16 Apr 2016, 10:18 last edited by
      #2

      found it

      for the inner Pane I had to set

      Pane {
                          leftPadding: 0
                          rightPadding: 0
      

      now all content from inner Pane is justified to content from outer Pane :)

      found out that by default the Pane has a padding of 6

      ekke ... Qt Champion 2016 | 2024 ... mobile business apps
      5.15 --> 6.8 https://t1p.de/ekkeChecklist
      QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

      1 Reply Last reply
      0

      1/2

      14 Apr 2016, 21:04

      • Login

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