Rectangle width is ignored, only works anchors.fill: parent

Question

In my QML/Qt app, I have following Rectangle:

import QtQuick 2.5
import QtQuick.Layouts 1.1

Rectangle
{
    id: uePlaceSelector

    signal ueSignalPlaceSelected
    signal ueSignalPlaceSelectionAborted

    property string ueSelectedPlaceName: ""

    radius: 16
    border.color: "#4682b4"
    border.width: 1
    antialiasing: true

    //FIXME how to set width same as UePlaceSwitcher's width?
    anchors.fill: parent

    gradient: Gradient
    {
        GradientStop
        {
            position: 0
            color: "#636363"
        }   // GradientStop

        GradientStop
        {
            position: 1
            color: "#303030"
        }   // GradientStop
    }   // Gradient

    ColumnLayout
    {
        antialiasing: true

        layoutDirection: Qt.LeftToRight

        spacing: 8

        anchors.fill: parent

        RowLayout
        {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.margins: 8

            Rectangle
            {
                id: uePlaceSelectorNavigatorBack

                Layout.preferredWidth: 32
                Layout.preferredHeight: 32

                color: "transparent"

                SequentialAnimation
                {
                    id: uePlaceSelectorNavigatorBackPressAnimation

                    loops: 1

                    running: false

                    NumberAnimation
                    {
                        target: uePlaceSelectorNavigatorBack

                        property: "opacity"

                        to: 0

                        duration: 150
                    }   // NumberAnimation

                    NumberAnimation
                    {
                        target: uePlaceSelectorNavigatorBack

                        property: "opacity"

                        to: 1

                        duration: 150
                    }   // NumberAnimation
                }   // SequentialAnimation

                Image
                {
                    anchors.fill: parent

                    asynchronous: true
                    horizontalAlignment: Image.AlignHCenter
                    verticalAlignment: Image.AlignVCenter

                    fillMode: Image.PreserveAspectFit

                    smooth: true

                    source: "qrc:///ueIcons/icons/ueArrowLeft.png"
                }   // Image

                MouseArea
                {
                    anchors.fill: parent

                    onClicked:
                    {
                        uePlaceSelectorNavigatorBackPressAnimation.running=true;
                        ueSignalPlaceSelectionAborted()
                    }   // onClicked
                }   // MouseAres
            }   // Rectangle
        }   // RowLayout

        GridView
        {
            id: uePlacesGridView

            antialiasing: true

            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.margins: 8
            Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom
            flow: GridView.FlowLeftToRight

            layoutDirection: Qt.LeftToRight

            clip: true

            cellWidth: parent.width
            cellHeight: 128

            highlightFollowsCurrentItem: true
            highlightRangeMode: GridView.StrictlyEnforceRange

            snapMode: GridView.SnapToRow

            Component.onCompleted:
            {
                model=uePlacesModel
            }

            delegate: UeButton
            {
                id: uePlacesModelDelegate

                width: uePlacesGridView.cellWidth-16
                height: uePlacesGridView.cellHeight-16

                ueText: model.ueRoleName
                ueSoundOn: false

                onUeSignalButtonClicked:
                {
                    ueSelectedPlaceName=uePlacesGridView.model.get(index).ueRoleName;
                    ueSignalPlaceSelected()
                }   // onUeSignalButtonClicked:
            }   // delegate
        }   // GridView
    }   // ColumnLayout
}   // Rectangle

Now, this Rectangle is at startup hidden and disabled. But in my ApplicationWindow I have Toolbar with customs Buttons and when the user presses one of them, this Rectangle pops up via OpacityAnimator. However its size is full screen because of anchors.fill: parent. Its parent is ApplicationWindow, becuase it is declared inside it. But, how do I assign its width, because

Component.onCompleted:
{
    ueLoggedUserPlaceSelector.width=uePlaceSwitcher.width
}   // Component.onCompleted

inside main.qml does not work. Why?

Answer 1

Replace

anchors.fill: parent

with

width: uePlaceSwitcher.width
height: uePlaceSwitcher.height

You should provide height with width or the rectangle will not be visible.