如何對齊委託中的QML組件

Question

我想使我的電話號碼列表與左側的一個字段（「名稱」）和右側的另一個字段（「電話」）對齊。但是，當試圖綁定委託內部的錨定屬性時，它說委託對象不是ListView組件的父項。我如何從代表接觸其他組件？

這是我的QML代碼：

import QtQuick 2.7 
import QtQuick.Controls 2.0 

Item { 
    id: enclosing_area 
    width: 500 
    height: 300 
    ListModel { 
     id: dataModel 
     ListElement { 
      name: "John Smith" 
      phone: "1111-1111" 
     } 
     ListElement { 
      name: "Peter Poter" 
      phone: "2222-2222" 
     } 
     ListElement { 
      name: "Anna Lasalle" 
      phone: "3333-3333" 
     } 
    } 

    ListView { 
     id: list 
     width: enclosing_area.width 
     height: enclosing_area.height 
     model: dataModel 
     delegate: Rectangle { 
      width: enclosing_area.width 
      border.color: "red" 
      Label { 
       text: name 
       anchors.left: list.left 
      } 
      Label { 
       text: phone 
       anchors.right: list.right 
      } 
     } 
    } 
} 

qmlscene產生以下錯誤：

file:///LViewTest.qml:36:13: QML Label: Cannot anchor to an item that isn't a parent or sibling. 
file:///LViewTest.qml:32:13: QML Label: Cannot anchor to an item that isn't a parent or sibling. 
file:///LViewTest.qml:36:13: QML Label: Cannot anchor to an item that isn't a parent or sibling. 
file:///LViewTest.qml:32:13: QML Label: Cannot anchor to an item that isn't a parent or sibling. 
file:///LViewTest.qml:36:13: QML Label: Cannot anchor to an item that isn't a parent or sibling. 
file:///LViewTest.qml:32:13: QML Label: Cannot anchor to an item that isn't a parent or sibling. 

線32和32是 「anchors.left」 和 「anchors.right」 語句。 如何在我的情況下綁定到來自委託的另一個對象中的屬性？

Answer 1

起初：

這將是約定打電話給你enclosing_arearoot代替。其次，如果您沒有定位到兄弟，請不要使用要定位的對象的id，而是使用parent。

這樣可以防止出現錯誤，因爲 - 您正在嘗試執行的操作 - 不是錨定到Label的父項，而是錨定到它們的parent的parent的父項。
Label的parent將是您的delegate中的Rectangle。

ListView { 
    id: list // <- This is not the parent of the Labels, but of the delegateRectangle 
    width: enclosing_area.width  // works 
    height: enclosing_area.height // works 
    // anchors.fill: parent   <- would do the same, more flexible, and only one line. 
    model: dataModel 
    delegate: Rectangle { 
     id: delegateRectangle // <--- This is the parent of the two Labels 
     width: enclosing_area.width 
     height: 30 // <- a heightis necessary. 
        // As the objects are repositioned you need to set it explicitely 
        // and can't use anchoring. You could use the 
        // implicit height of it's children, to make it nice 
     border.color: "red" 
     Label { 
      text: name 
      anchors.left: delegateRectangle.left // this would work instead. 
               // list.left woudl try to anchor to the 'grandparent' 
     } 
     Label { 
      text: phone 
      anchors.right: parent.right // this would be the reccomended way. 
             // Would also anchor to delegateRectangle 
     } 
    } 
} 

爲什麼你應該更喜歡錨定到parent，而不是你的parent小號id？
對象將（幾乎）總是有一個可視的父對象，但是這個可視父對象可能會改變。要麼是因爲您稍後在代碼中添加了額外的圖層，要麼是在運行時重新添加圖層。所以你總是需要更新錨點。
因此，錨定到parent可以解決一個簡單的錯誤。

Answer 2

利用錨而不是嘗試硬編碼子元素的大小以匹配其父元素。這將使您可以一路使用錨點。 （同樣，使用錨點邊界代替硬編碼的x，y值）。您可以通過錨點獲得許多其他好處。

ListView { 
     id: list 
     anchors.fill: parent 
     model: dataModel 
     delegate: Rectangle { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      height: 50  // you need a height otherwise all rows are on the same line 
      border.color: "red" 
      Label { 
       text: name 
       anchors.left: parent.left 
      } 
      Label { 
       text: phone 
       anchors.right: parent.right 
      } 
     } 
    } 
}