qt.labs.controls - Pane in Pane problem


  • Qt Champions 2016

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

  • Qt Champions 2016

    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


Log in to reply
 

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