Question

我对列表视图项的布局有疑问...

我有3个项目的简单模型。

代码在这里：

import QtQuick 2.10
import QtQuick.Controls 2.2


Page
{
    anchors.fill: parent
    background:Rectangle
    {
        anchors.fill: parent
        color: "transparent"
    }

    ListModel
    {
    id: diaryModel
    ListElement
    {
        diaryName: "Bill Smith"
        diaryNumber: "555 3264"
    }
    ListElement
    {
        diaryName: "John Brown"
        diaryNumber: "555 8426"
    }
    ListElement
    {
        diaryName: "Sam Wise"
        diaryNumber: "555 0473"
    }
}

ListView
{
    id: diaryListView
    model: diaryModel
    currentIndex: 0
    anchors.fill: parent
    focus: true
    clip: true

    highlightResizeDuration: 0.0
    highlight: Rectangle
    {
        color: "#2e6377"
        gradient:Gradient
        {
            GradientStop {position: 0.000;color: "#0c0e0f";}
            GradientStop {position: 0.500;color: "#15171a";}
            GradientStop {position: 1.000;color: "#0c0e0f";}

        }
    }
    delegate: hDelegate
}

Component
{
    id: hDelegate
    Item
    {
        Row
        {
            Rectangle
            {
                color: "green"
                width: 60
                height: 60
            }
            Text
            {
                text: diaryName
                color: "lightsteelblue"
                horizontalAlignment: Text.AlignRight
                wrapMode: Text.WordWrap
                font {pointSize: 14; letterSpacing: 1; wordSpacing: 1}
            }
            Text
            {
                text: diaryNumber
                color: "lightsteelblue"
                wrapMode: Text.WordWrap
                font {pointSize: 14; letterSpacing: 1; wordSpacing: 1}
            }
        }
        MouseArea
        {
            anchors.fill: parent
            hoverEnabled: true
            onClicked:
            {
                diaryListView.currentIndex = index
            }
        }
    }
}

}

问题是，我的物品混在一个地方...

我一般不了解锚点，填充和放置对象... 当我测试锚，边界，间距等如何在每个对象上以Component，Item或Rectangle进行工作时，我得到了无与伦比的结果，因为：

在component中，我无法使用anchors.fill: parent（错误-属性不存在）。

当我在anchors.fill: parent中使用Item时，它将导致该应用程序完全停止响应。（我想这是一个无休止的循环吗？）

当我使用间隔或填充在两个对象（矩形和文本项）应用程序之间创建空间时，什么也不做。仍显示所有没有空格的对象（参见图片）。

我做错了什么？

理想情况下，我可以这样做：

Answer 1

您无法为组件指定尺寸，因为该组件不是具有任何尺寸的Item。它只是包装了例如一个项目。

因此，不必调整Component的大小，而应为该组件中的Item设置一个大小。

Component {
    id: hDelegate
    Item {
        width: parent.width // You can access the parent this Item will have uppon creation
        height: hRow.implicitHeight // You can also resize it according to the content.
        Row {
            id: hRow
            Rectangle {
                color: "green"
                width: 60
                height: 60
            }
            Text {
                text: diaryName
                color: "lightsteelblue"
                horizontalAlignment: Text.AlignRight
                wrapMode: Text.WordWrap
                font { pointSize: 14; letterSpacing: 1; wordSpacing: 1 }
            }
            Text {
                text: diaryNumber
                color: "lightsteelblue"
                wrapMode: Text.WordWrap
                font { pointSize: 14; letterSpacing: 1; wordSpacing: 1 }
            }
        }
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onClicked: {
                diaryListView.currentIndex = index
            }
        }
    }
}

Item的父级将不是Component。在您的情况下为ListView，在其他情况下可能为Repeater的父项，如果您在未指定父项的情况下调用null，则为createObject()。

您不应该将Item设置为anchors.fill: parent的原因仅仅是因为父母会调整其contentItem的大小以适合所有孩子。如果所有孩子然后将自己调整大小以填充contentItem，这将迫使ListView调整contentItem的大小，以便所有（3）个孩子再次适合...

物品混合在一处

1 个答案: