Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Solved qt.labs.controls - Pane in Pane problem

    QML and Qt Quick
    labs.controls 5.6.0
    1
    2
    919
    Loading More Posts
    • 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.
    • ekkescorner
      ekkescorner Qt Champions 2016 last edited by ekkescorner

      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
      mobile business apps
      Qt Quick Controls 2 (Material style) for Android / iOS

      1 Reply Last reply Reply Quote 0
      • ekkescorner
        ekkescorner Qt Champions 2016 last edited by

        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
        mobile business apps
        Qt Quick Controls 2 (Material style) for Android / iOS

        1 Reply Last reply Reply Quote 0
        • First post
          Last post