Qt Labs Controls 1.0 Ready for Use?

Ed Buchwalter

With Qt 5.6 released I have been trying the Qt.labs.control 1.0 on Android platform. However it appears that basic layout functions do not work... I am trying to do some simple things...for instance a RowLayout that contains a TextField and a Button. I would like the Text Field to be left aligned and the Button to be right aligned...nothing special, but this does not work. It would seem this collection is not usable. Can anyone lend any information about this component?

jpnurmi

Could you elaborate? What does not work? How does your code look like?

Ed Buchwalter

@jpnurmi
Hello - Thanks for your reply. To summarize - I am trying to use the new Qt Labs controls as they seem "simpler"! However, I am also new to the QML way, having used QWidgets before. So, I am struggling with layout issues... The screens I am trying to build are not very complicated. Right now I am trying to build a simple chat screen with a TextField, TextArea and send Button. I have used the gallery example as my starting point. The following code does do the layout, but not sure if this is how it should be done. Any help is appreciated!

import QtQuick 2.6
import Qt.labs.controls 1.0
import QtQuick.Layouts 1.3

Pane {
id: pane

Frame {
    id: frame1
    width: parent.width
    height: pane.height * 0.10

    TextField {
        id: chatText
        width: parent.width
        height: parent.height
        placeholderText: qsTr("Enter Chat Text")
        font.pixelSize: 20
    }
}

Frame {
    id: frame2
    width: parent.width
    height: pane.height * 0.75
    anchors.top: frame1.bottom

    TextArea {
        id: chatHistory
        width: parent.width
        height: parent.height
        readOnly: true
        font.pixelSize: 20
    }
}

Frame {
    id: frame3
    width: parent.width
    height: pane.height * 0.15
    anchors.top: frame2.bottom

    Button {
        id: chatButton
        width: parent.width
        height: parent.height
        text: "Send Message"
        font.pixelSize: 20
    }
}

}

jpnurmi

Did you mean something like this?

import QtQuick 2.6
import Qt.labs.controls 1.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: window
    width: 400
    height: 600
    visible: true

    Pane {
        id: pane
        anchors.fill: parent

        ColumnLayout {
            anchors.fill: parent

            Frame {
                id: frame1
                Layout.fillWidth: true

                TextField {
                    id: chatText
                    width: parent.width
                    height: parent.height
                    placeholderText: qsTr("Enter Chat Text")
                    font.pixelSize: 20
                }
            }

            Frame {
                id: frame2
                Layout.fillWidth: true
                Layout.fillHeight: true

                TextArea {
                    id: chatHistory
                    width: parent.width
                    height: parent.height
                    readOnly: true
                    font.pixelSize: 20
                }
            }

            Frame {
                id: frame3
                Layout.fillWidth: true

                Button {
                    id: chatButton
                    width: parent.width
                    height: parent.height
                    text: "Send Message"
                    font.pixelSize: 20
                }
            }
        }
    }
}