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.

So you advice me to do not use anchors but use something like x : parent.width/2 - width/2 or something like that?
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.