Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Center item into StackView : StackView has detected conflicting anchors.

    QML and Qt Quick
    2
    5
    8873
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Q
      qnope last edited by

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

      R 1 Reply Last reply Reply Quote 0
      • R
        Roumed @qnope last edited by

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

        1 Reply Last reply Reply Quote 1
        • Q
          qnope last edited by

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

          R 1 Reply Last reply Reply Quote 0
          • Q
            qnope last edited by

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

            1 Reply Last reply Reply Quote 0
            • R
              Roumed @qnope last edited by

              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.

              1 Reply Last reply Reply Quote 1
              • First post
                Last post