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