如何在委托中對齊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_area root 。
其次，如果不錨定到同級，則不要使用要錨定的對象的id ，而應使用parent 。

這樣可以防止發生錯誤，因為-您要嘗試做的-不是錨定到Label的parent ，而是錨定到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
            }
        }
   }
}