Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Center item into StackView : StackView has detected conflicting anchors.



  • 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 :).



  • @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.



  • 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 :).



  • 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 :).



  • 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.


Log in to reply