Regarding layouts



  • Hi all,

    I am using Row Layout under which i have Column Layout and Grid Layout. Problem is when i drag the window horizontally the content of the window gets adjusted, but when i drag it vertically it is not getting adjusted what may the problem here ?

    here is my code

    import QtQuick 2.7
    import QtQuick.Window 2.2
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.1
    import QtQuick.Controls.Material 2.1
    import QtGraphicalEffects 1.0
    
    import "../common"
    
    Item {
        id: dialPagewindow
        visible: true
        implicitHeight: appWindow.height
        implicitWidth: appWindow.width
    
    //    anchors.left: parent.left
    //    anchors.right: parent.right
    //    anchors.top: parent.top
    //    anchors.bottom: parent.bottom
    //    property alias texteditText: texteditcontent.text
    
        Pane{
            id:dialpadPane
            anchors.fill: parent
            RowLayout {
                id:dialPageRowLayout
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.fill: parent
                spacing: 20
                ColumnLayout {
                    id: theContent
                    spacing: parent.height/2
                     TextField {
                         id: textfieldcontent
                         width: dialPageRowLayout.width/2
                         font.weight: Font.Medium
                         color: flatButtonTextColor
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
                         focus: true
                         anchors.topMargin: 50
                         background: Rectangle {
                             implicitHeight: 40
                             implicitWidth: parent.width
                             color: primaryColor
                             radius: 2
                             opacity: textfieldcontent.pressed ? 0.75 : 1.0
                             layer.enabled: true
                             layer.effect: DropShadow {
                                 verticalOffset: 2
                                 horizontalOffset: 1
                                 color: dropShadow
                                 samples: textfieldcontent.pressed ? 20 : 10
                                 spread: 0.5
                             }
                         }
                         placeholderText: qsTr("Enter Number")
                     }
    
                    FloatingActionButton {
                        id: fab
                        property string imageName: "/settings.png"
                        anchors.margins: 16
                        anchors.horizontalCenter: parent.horizontalCenter
    //                    anchors.verticalCenter: parent.verticalCenter
                        anchors.bottom: parent.bottom
                        anchors.bottomMargin: -50
                        imageSource: "qrc:/Images/"+iconOnAccentFolder+imageName
                        backgroundColor: accentColor
                        //            onClicked: {
                        //                showSettings()
                        //            }
                    } // FAB
                }
    
                VerticleDivider {}
    
                GridLayout {
                    id: grid
                    columns: 3
                    Layout.rowSpan: 100
    
                    DialButton {
                        id: buttonOne
                        dialpadtext: qsTr("1")
                        textColor: textOnPrimaryLight
                        opacity: opacityBodySecondary
                    }
                    DialButton {
                        id: buttonTwo
                        dialpadtext: qsTr("2")
                        textColor: textOnPrimaryLight
                        opacity: opacityBodySecondary
                    }
                    DialButton {
                        id: buttonThree
                        dialpadtext: qsTr("3")
                        textColor: textOnPrimaryLight
                        opacity: opacityBodySecondary
                    }
                    DialButton {
                        id: buttonFour
                        dialpadtext: qsTr("4")
                        textColor: textOnPrimaryLight
                        opacity: opacityBodySecondary
                    }
                    DialButton {
                        id: buttonFive
                        dialpadtext: qsTr("5")
                        textColor: textOnPrimaryLight
                        opacity: opacityBodySecondary
                    }
                    DialButton {
                        id: buttonSix
                        dialpadtext: qsTr("6")
                        textColor: textOnPrimaryLight
                        opacity: opacityBodySecondary
                    }
                    DialButton {
                        id: buttonSeven
                        dialpadtext: qsTr("7")
                        textColor: textOnPrimaryLight
                        opacity: opacityBodySecondary
                    }
                    DialButton {
                        id: buttonEight
                        dialpadtext: qsTr("8")
                        textColor: textOnPrimaryLight
                        opacity: opacityBodySecondary
                    }
                    DialButton {
                        id: buttonNine
                        dialpadtext: qsTr("9")
                        textColor: textOnPrimaryLight
                        opacity: opacityBodySecondary
                    }
                    DialButton {
                        id: buttonStar
                        dialpadtext: qsTr("*")
                        textColor: textOnPrimaryLight
                        opacity: opacityBodySecondary
                    }
                    DialButton {
                        id: buttonZero
                        dialpadtext: qsTr("0")
                        textColor: textOnPrimaryLight
                        opacity: opacityBodySecondary
                    }
                    DialButton {
                        id: buttonHash
                        dialpadtext: qsTr("#")
                        textColor: textOnPrimaryLight
                        opacity: opacityBodySecondary
                    }
                }// GridLayout
            }// RowLayout
        }// Pane
    }// Item
    
    


  • Hi! Can you please make a minimal example so we can try to reproduce it?



  • @Wieland Ya sure sir.

    here is the code

    import QtQuick 2.7
    import QtQuick.Window 2.2
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.1
    import QtQuick.Controls.Material 2.1
    import QtGraphicalEffects 1.0
    
    import "../common"
    
    Item {
        id: dialPagewindow
        visible: true
    
    
        Pane{
            id:dialpadPane
            anchors.fill: parent
            RowLayout {
                id:dialPageRowLayout
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.fill: parent
                spacing: 40
                ColumnLayout {
                    id: theContent
                    spacing: parent.height/2
                     TextField {
                         id: textfieldcontent
                         width: dialPageRowLayout.width/3
                         font.weight: Font.Medium
                         color:"#FFFFFF"
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
                         focus: true
                         anchors.topMargin: 50
                         background: Rectangle {
                             implicitHeight: 40
                             implicitWidth: parent.width
                             color:"#CFD8DC"
                             radius: 2
                             opacity: textfieldcontent.pressed ? 0.75 : 1.0
                             layer.enabled: true
                             layer.effect: DropShadow {
                                 verticalOffset: 2
                                 horizontalOffset: 1
                                 color: dropShadow
                                 samples: textfieldcontent.pressed ? 20 : 10
                                 spread: 0.5
                             }
                         }
                         placeholderText: qsTr("Enter Number")
                     }
    
                }
    
                Item {
                    implicitWidth: 8
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
    
                    Rectangle {
                        id: theRectangle
                        width: 1
                        height: parent.height
                        anchors.horizontalCenter: parent.horizontalCenter
                        opacity: 0.12
                        color: "#FFFFFF"
                    }
                }
    
                GridLayout {
                    id: grid
                    columns: 3
    
                    DialButton {
                        id: buttonOne
                        dialpadtext: qsTr("1")
                        textColor: "#455A64"
                    }
                    DialButton {
                        id: buttonTwo
                        dialpadtext: qsTr("2")
                        textColor:"#455A64"
                    }
                    DialButton {
                        id: buttonThree
                        dialpadtext: qsTr("3")
                        textColor: "#455A64"
                    }
                }// GridLayout
            }// RowLayout
        }// Pane
    }// Item
    
    

    Code for DialButton

    import QtQuick 2.7
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.1
    import QtQuick.Controls.Material 2.1
    import QtGraphicalEffects 1.0
    
    // Dial Button
    Button {
        id: button
        // default: textOnPrimary
        property alias textColor: buttonText.color
        // default: primaryColor
        property alias buttonColor: buttonBackground.color
        property alias dialpadtext: buttonText.text
        focusPolicy: Qt.NoFocus
        Layout.fillWidth: true
        Layout.preferredWidth : 1
        leftPadding: 6
        rightPadding: 6
        contentItem: Text {
            id: buttonText
            text: button.text
            opacity: enabled ? 1.0 : 0.3
            color: "#FFFFFF"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
            font.capitalization: Font.AllUppercase
        }
        background:
            Rectangle {
            id: buttonBackground
            implicitHeight: 48
            color: "#CFD8DC"
            radius: 2
            opacity: button.pressed ? 0.75 : 1.0
            layer.enabled: true
            layer.effect: DropShadow {
                verticalOffset: 2
                horizontalOffset: 1
                color: dropShadow
                samples: button.pressed ? 20 : 10
                spread: 0.5
            }
        } // background
    } // button
    
    


  • "Minimal example" means that you give only the code which can reproduce the problem, nothing more, nothing less. Either start from scratch and add two components to a layout, or take off one component at a time and see if the problem can still be seen. Take off all the properties and components which are not related to the problem.

    I have one project which is just for that. I replace main.qml with some code from my actual project or design a layout with the designer from scratch, imitating the problematic structure. Either I can see the same problem in simplified form, or it works and has some difference to my actual project.

    Things like

    anchors.left: parent.left
    anchors.right: parent.right
    anchors.fill: parent
    

    are a sign of trial and error leading to code rot - there is redundancy here - and they may cause problems.

    Creating a minimal example is much more work for you but you can actually learn things better that way, plus usually you find the answer yourself before you have to ask here.



  • In your DialButton.qml file add line in line no: 16

    Layout.fillHeight: true
    

    You have set the layout property only to fill the width and not to fill height. This is the reason why only the width is changed when resizing.

    Hope this solves your issue. Happy coding :)


Log in to reply
 

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