Qt Labs Controls 1.0 Ready for Use?



  • 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?



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



  • @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
        }
    }
    

    }



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

Log in to reply
 

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