Предметы, смешанные в одном месте - PullRequest
Новая
       13

Предметы, смешанные в одном месте

0 голосов
/ 07 октября 2018

У меня проблема с расположением элементов списка ...

У меня простая модель с 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
            }
        }
    }
}

}

Проблема в том, что мои вещи смешаны в одном месте ...

Я непонимать общие якоря, заполнение и размещение объектов ... Когда я проверял, как якоря, границы, интервалы и т. д. ... работают с каждым объектом как Компонент, Элемент или Прямоугольник, я получаю непредвиденные результаты, потому что:

in component Я не могу использовать anchors.fill: parent (ошибка - свойство не существует).

Когда я использую anchors.fill: parent в Item, это приводит к тому, что приложение полностью останавливает ответ.(Я так понимаю, это бесконечный цикл?)

Когда я использую интервалы или отступы для создания пробелов между двумя объектами (прямоугольник и текстовый элемент), приложение ничего не делает.По-прежнему отображаются все объекты без пробелов (см. Рисунок).

Что я делаю не так?

enter image description here

В идеале я могу сделать что-то подобное:

enter image description here

1 Ответ

0 голосов
/ 08 октября 2018

Нельзя назначить размер Компоненту, так как Компонент не является Item, который имеет какие-либо размеры.Он просто оборачивает прототип, например, 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) дети снова подойдут ...

...