Элементы пространства списка QML для заполнения ширины

Question 1

У меня есть представление списка (горизонтальная ориентация) в моем qml, содержащее некоторые элементы фиксированного размера. Я хочу, чтобы элементы располагались через равные промежутки, чтобы заполнить всю ширину элемента ListView. Поэтому, если элементов меньше, я хочу, чтобы они были распределены больше. В принципе, то, что мне нужно, - это именно то, что Layout.fillWidth = true свойство RowLayout, но для ListView.

Я могу посчитать, сколько у меня элементов, затем вычесть общую ширину элементов из ширины списка, разделить на количество элементов и назначить интервал, но это кажется слишком глупым. Есть ли способ сделать это автоматически, как в RowLayout?

Или, может быть, мне нужно использовать для этого что-то отличное от ListView? Что-то вроде RowLayout, но которому я могу назначить свою модель данных списка?

Question 2

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

ListView {
    width: 500
    orientation: Qt.Horizontal
    model: 6
    spacing: {
        if (count > 0) {
            return (width - (itemAtIndex(0).width * count))/(count - 1)
        } else {
            return 0
        }
    }

    delegate: Rectangle {
        implicitHeight: 50
        implicitWidth: 50
        color: "red"
        border.width: 1
    }
}

ListView возможно, это не самый подходящий контейнер для этой задачи. Я говорю это, потому что в нем есть встроенный ScrollView и другие формы поведения, которые, похоже, вам не нужны. Если все, что вам нужно,-это простой ряд из нескольких делегатов одинакового размера, я согласен со скопчановым и считаю, что Repeater внутри а RowLayout было бы лучшим вариантом. Вот простой пример:

RowLayout {
    width: 500

    Repeater {
        model: 6
        delegate: Rectangle {
            implicitHeight: 50
            implicitWidth: 50
            color: "tomato"
            border.width: 1
            Layout.alignment: Qt.AlignHCenter // must be set to align the rectangles within their empty space
        }
    }
}

Вы можете заметить, что это приводит к появлению пробелов слева и справа, если эти пробелы неприемлемы, вам, возможно, потребуется установить spacing на RowLayout таким же образом, как и ListView вместо этого пример.

fallerd · Answer 1 · 2021-11-16T18:17:48

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

ListView {
    width: 500
    orientation: Qt.Horizontal
    model: 6
    spacing: {
        if (count > 0) {
            return (width - (itemAtIndex(0).width * count))/(count - 1)
        } else {
            return 0
        }
    }

    delegate: Rectangle {
        implicitHeight: 50
        implicitWidth: 50
        color: "red"
        border.width: 1
    }
}

ListView возможно, это не самый подходящий контейнер для этой задачи. Я говорю это, потому что в нем есть встроенный ScrollView и другие формы поведения, которые, похоже, вам не нужны. Если все, что вам нужно,-это простой ряд из нескольких делегатов одинакового размера, я согласен со скопчановым и считаю, что Repeater внутри а RowLayout было бы лучшим вариантом. Вот простой пример:

RowLayout {
    width: 500

    Repeater {
        model: 6
        delegate: Rectangle {
            implicitHeight: 50
            implicitWidth: 50
            color: "tomato"
            border.width: 1
            Layout.alignment: Qt.AlignHCenter // must be set to align the rectangles within their empty space
        }
    }
}

Вы можете заметить, что это приводит к появлению пробелов слева и справа, если эти пробелы неприемлемы, вам, возможно, потребуется установить spacing на RowLayout таким же образом, как и ListView вместо этого пример.

Элементы пространства списка QML для заполнения ширины

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории