Почему добавление MouseArea с помощью anchors.fill: parent приводит к тому, что строки накладываются друг на друга?

Учитывая, что этот ListView работает нормально:

ListView {
    id: myListView
    model: myListModel
    anchors.fill: parent

    delegate: Row {
        id: row
        spacing: 5
        Text {
            text: id
            width: 25
            horizontalAlignment: Text.AlignHCenter
        }

        Text {
            text: description
        }
    }
}

Почему добавление MouseArea к anchors.fill: parent приводит к тому, что строки накладываются друг на друга? Как вернуть автоматический интервал по вертикали, который был у меня до добавления MouseArea? Я уже пытался поместить Row в Rectangle, а также в Component.

ListView {
    id: myListView
    model: myListModel
    anchors.fill: parent

    delegate: Row {
        MouseArea {
            anchors.fill: parent
            onClicked: myListView.currentIndex = index
        }
        id: row
        spacing: 5

        Text {
            text: id
            width: 25
            horizontalAlignment: Text.AlignHCenter
        }

        Text {
            text: description
        }
    }
}

qml
person Nathaniel Johnson    schedule 13.02.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Элементы складываются по простой причине: их высота не задана. У делегата всегда должна быть задана высота. Поскольку вы не указали его, высота делегата равна нулю, а окружающий текст отображается над одним и тем же y (нулем), складываясь.

Однако проблема здесь не только в этом. Вы определили MouseArea для привязки. Rows, а также Columns задают определенное расположение предметов внутри себя. Добавление якорей может помешать этому автоматическому механизму. Также об этом ясно говорится в документах. Вы можете прочитать это...

Row — это тип, который размещает свои дочерние элементы в одной строке. Его можно использовать как удобный способ горизонтально расположить ряд элементов без использования якорей.

...и еще что...

[...]поскольку строка автоматически размещает своих дочерних элементов горизонтально, дочерний элемент внутри строки не должен устанавливать свой x< /strong> положение или горизонтально привязать себя, используя левый, правый, привязки. horizontalCenter, fill или привязки centerIn.

Возможно, ошибка привязки создает несогласованное состояние, из-за которого Row не наследует высоту от окружающего текста, как это было без привязки элементов. Это, в свою очередь, приводит к нулевой высоте и укладке.

В этом конкретном случае вы можете включить Row внутрь Item и применить заполнение MouseArea к последнему. Результирующий код, с правильно установленными высотой и шириной делегата, будет выглядеть примерно так, как показано ниже (имейте в виду, я удалил роли и модель в вашем коде, поскольку последняя не была доступна в предоставленном фрагмент кода):

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2

ApplicationWindow {
    visible:  true
    width: 200
    height: 300
    
    ListView {
        id: myListView
        model: 20
        anchors.fill: parent
        
        delegate: Item {
            width: myListView.width
            height: text1.height            // set the height!
            Row {
                id: row
                anchors.fill: parent
                spacing: 5
                
                Text {
                    id: text1
                    text: "id"
                    width: 25
                    horizontalAlignment: Text.AlignHCenter
                }
                
                Text {
                    text: "description"
                }
                
            }
            MouseArea {                     // fills the delegate Item, not the Row!
                anchors.fill: parent
                onClicked: {
                    myListView.currentIndex = index
                    console.info("Area clicked! Index: " + index)
                }
            }
        }
    }
}
person BaCaRoZzo    schedule 13.02.2015