Regarding layouts

Naveen_D

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

? Offline

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

Naveen_D

@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

Eeli K

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

Mammamia

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 :)