Resizing isues with items getting out of window

[nikosbeskos]

Hi all,
I am new to Qt, qml, and all this stuf, so hopefully there will be an obvious solution from someone more experienced.

Situation: I am designing a GUI for my diploma thesis. But being inexperianced I get a lot of problems. So, on designing a "welcome screen", containing several components like a logo image and text and buttons. Qt Design Stutio IDE is used.

Problem: I need to make them behave as normally, when the user resizes the window, and testing this using live preview. Initial size is 1920x1080 but resizing to a low enough size, components position even goes beyond the visible area of the preview window, and as you can imagine this is a problem. I have tried everything I could think of, anchoring, binding the components's width and height, using different states. the problem remains. Also, I find it curious that anchoring a component to its parent top and left, sides, still results in the item being translated beyound those boundaries.

Any suggestions to solve this, or anything else like using another way to avhieve this, would be much appreciated.

I will give the entire code, if any other thing is needed, ask and I will provide. The problem is that the 'container' Item inside the 'left_area' Item does not comply its restrictions and gets wierdly positioned when resizing at a low enoguh size

QML:

import QtQuick 2.15
import QtQuick.Controls 2.15
import FlowView 6.0
import QtQuick.Studio.LogicHelper 1.0

Item {
    id: welcome_screen
    width: 1920
    height: 1080

    Row {
        id: row
        anchors.fill: parent

        Item {
            id: right_area
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.leftMargin: parent.width / 2
            anchors.rightMargin: 0
            anchors.topMargin: 0
            anchors.bottomMargin: 0
            smooth: false

            Image {
                id: icon_img
                width: parent.width / 1.875
                height: parent.height / 2
                visible: true
                anchors.verticalCenter: parent.verticalCenter
                source: "images/window_icon.svg"
                anchors.horizontalCenter: parent.horizontalCenter
                sourceSize.width: 1024
                fillMode: Image.PreserveAspectFit
                sourceSize.height: 1024
            }
        }

        Item {
            id: left_area
            width: parent.width / 2
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.leftMargin: 0
            anchors.bottomMargin: 0
            anchors.topMargin: 0
            Item {
                id: container
                width: 550
                height: 700
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                Text {
                    id: header_txt
                    text: "SOME TITLE TEXT"
                    anchors.left: parent.left
                    anchors.top: parent.top
                    font.pixelSize: 12
                    verticalAlignment: Text.AlignTop
                    anchors.leftMargin: 0
                    anchors.topMargin: 0
                    textFormat: Text.RichText
                    font.styleName: "Έντονα"
                }

                Custom_btn_1 {
                    id: new_project_btn
                    height: 50
                    text: "New Project"
                    anchors.left: parent.left
                    anchors.top: header_txt.bottom
                    anchors.leftMargin: 0
                    anchors.topMargin: 70
                    display: AbstractButton.IconOnly
                }

                Custom_btn_1 {
                    id: open_project_btn
                    width: 150
                    visible: true
                    text: "Open Project"
                    anchors.left: parent.left
                    anchors.top: new_project_btn.bottom
                    anchors.leftMargin: 0
                    anchors.topMargin: 20
                }

                Text {
                    id: recent_txt
                    y: 363
                    width: 110
                    height: 50
                    visible: true
                    text: "Recent Projects"
                    anchors.left: parent.left
                    anchors.top: open_project_btn.bottom
                    font.pixelSize: 12
                    anchors.leftMargin: 0
                    textFormat: Text.RichText
                    anchors.topMargin: 70
                }

                Item {
                    id: list_conatiner
                    x: 0
                    y: 750
                    width: 200
                    height: 160
                    visible: true
                    anchors.top: recent_txt.bottom
                    anchors.topMargin: 20

                    List_custom {
                        id: list_custom
                        anchors.fill: parent
                    }
                }
            }
        }
    }
    states: [
        State {
            name: "low size"
            when: welcome_screen.width < 1180

            PropertyChanges {
                target: right_area
                visible: false
            }

            PropertyChanges {
                target: container
                width: 550
                height: 700
                anchors.leftMargin: (parent.width / 2) - (container.width / 2)
                anchors.topMargin: (parent.height / 2) - (container.height / 2)
            }

            PropertyChanges {
                target: icon_img
                visible: true
            }
        },
        State {
            name: "low size1"
            when: welcome_screen.height < 900
            PropertyChanges {
                target: right_area
                visible: false
            }

            PropertyChanges {
                target: left_area
                anchors.rightMargin: 0
            }

            PropertyChanges {
                target: header_txt
                visible: false
            }

            PropertyChanges {
                target: new_project_btn
                anchors.topMargin: -120
                anchors.leftMargin: 0
            }

            PropertyChanges {
                target: container
                anchors.leftMargin: (parent.width / 2) - container.width
                anchors.topMargin: (parent.height / 2) - container.height
            }

            PropertyChanges {
                target: icon_img
                visible: true
            }
        }
    ]
    transitions: [
        Transition {
            id: to_low_size
            ParallelAnimation {
                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: left_area
                        property: "anchors.rightMargin"
                        duration: 10
                    }
                }
            }
            to: "*"
            from: ""
        }
    ]
}

[nikosbeskos]

Marking it solved. The issue resolved on changing the Row component with a RowLayout component.