Center item into StackView : StackView has detected conflicting anchors.

[qnope]

Hello,

I am trying to learn Qml and for that, I would like to make a little app to manage some "shopping list".
For that, I create one stack view (that fills the window) and push the different views on it.

I come with this code :
main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import Action 1.0

ApplicationWindow {
    id:win;
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    StackView {
        id:stackView;
        initialItem: SimpleButtonsColumn {
            model:[{name:"Manage lists", action:undefined},
                   {name:"Manage Ingredient", action:Action.OpenIngredientManagementWindow}]
            anchors.centerIn: parent;
        }
        anchors.fill: parent;
    }

    Component {
        id: ingredientManagementWindow;
        SimpleButtonsColumn {
            model:[{name:"Add Ingredient", action:undefined},
                   {name:"Show all Ingredients", action:Action.OpenIngredientShowerWindow}];
            anchors.centerIn: parent;
        }
    }

    Component {
        id: ingredientShowerWindow;
        IngredientShower {

        }
    }

    Connections {
        target: AppDispatcher;

        onDispatched: {
            if(action == Action.OpenIngredientManagementWindow)
                stackView.push(ingredientManagementWindow);

            else if(action == Action.OpenIngredientShowerWindow)
                stackView.push(ingredientShowerWindow);
        }
    }

    onClosing: {
        if(stackView.depth > 1) {
            close.accepted = false;
            stackView.pop();
        }
    }
}

and SimpleButtonsColumn.qml

import QtQuick 2.0
import QtQuick.Controls 2.0
import Action 1.0

Column {
    property alias model: repeater.model;
    width: childrenRect.width;
    height: childrenRect.height;
    spacing: 20;

    Repeater {
        id:repeater;

        Button {
            id:buttonDoShopping;
            text:modelData.name;
            anchors.horizontalCenter: parent.horizontalCenter;

            onClicked: ActionCreator.createAction(modelData.action);
        }
    }
}

However, I got these errors :

qrc:/main.qml:15:22: QML SimpleButtonsColumn: Binding loop detected for property "width"
qrc:/main.qml:15:22: QML SimpleButtonsColumn: Binding loop detected for property "width"
qrc:/main.qml:25:9: QML SimpleButtonsColumn: Binding loop detected for property "width"
qrc:/main.qml:25:9: QML SimpleButtonsColumn: Binding loop detected for property "width"
qrc:/main.qml:25:9: QML SimpleButtonsColumn: StackView has detected conflicting anchors. Transitions may not execute properly.
qrc:/main.qml:15:22: QML SimpleButtonsColumn: StackView has detected conflicting anchors. Transitions may not execute properly.
qrc:/main.qml:25:9: QML SimpleButtonsColumn: StackView has detected conflicting anchors. Transitions may not execute properly.
qrc:/main.qml:15:22: QML SimpleButtonsColumn: StackView has detected conflicting anchors. Transitions may not execute properly.

I tried to solve the binding loop, but either the code I made was unreadable, or it just did not work. If you have tips about it, please tell me.
I really worry about the second errors : StackView has detected conflicting anchors but I don't see where they come from...

Here is the full source code if you want to take a look on :
Source code

Thanks !
Antoine :).

[Roumed]

@qnope Hi.

QML SimpleButtonsColumn: Binding loop detected for property "width"

This warning is because of using
at Button:

anchors.horizontalCenter: parent.horizontalCenter;

and at Column:

width: childrenRect.width;

And one more advice about column: never ever set Columns height. Once you failed, a lot of time to debug you will spend.

The second warning about StackView is due to anchoring to parent at StackView delegates.
Just avoid it.

[qnope]

Hello.

Thanks for your answer.

1. So you advice me to do not use anchors but use something like x : parent.width/2 - width/2 or something like that?

2. If I well understand, I do not have to anchors my view pushed on the stackview, but manage it like if it is a "pure windows" and manage it using x and y as well?

It is not so clear for me how the size of the "items" are set...

Thanks :).

[qnope]

I have modified my code a bit. Everything is modified inside "SimpleButtonsColumn.qml" :

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import Action 1.0

Item {
    id:simpleButtonsColumn;
    property alias model: repeater.model;

    ColumnLayout {
        id:column;
        spacing: 20;
        anchors.centerIn: parent;
        Layout.alignment: Qt.AlignCenter;

        Repeater {
            id:repeater;

            Button {
                id:buttonDoShopping;
                text:modelData.name;

                onClicked: ActionCreator.createAction(modelData.action);
                Layout.alignment: Qt.AlignHCenter;
            }
        }
    }
}

I have to understand how layouts work exactly, but I like this solution :).

[Roumed]

So you advice me to do not use anchors but use something like x : parent.width/2 - width/2 or something like that?

No, i don't.
If you are trying to place some item in the center of the page at stack view that means that you are trying to make a layout for content of the page.
In this case you should declare something like that:

StackView {
    id:stackView;
    anchors.fill: parent;
    initialItem: Item {
        objectName: "bar"
        SimpleButtonsColumn {
            model:[{name:"Manage lists", action:undefined},
                   {name:"Manage Ingredient", action:Action.OpenIngredientManagementWindow}]
            anchors.centerIn: parent;
        }
    }

Size of the bar will be the same as stackview size due to it's internal logic.

If I well understand, I do not have to anchors my view pushed on the stackview, but manage it like if it is a "pure windows" and manage it using x and y as well?

No, i don't.
It's better not to layout your items that pushed in the stackview. Just avoid it with Item wrapper.