Как выровнять элементы в ListView в QtQuick - PullRequest
Новая
       8

Как выровнять элементы в ListView в QtQuick

0 голосов
/ 01 ноября 2019

У меня есть следующий горизонтальный список:

BulletsListDelegate.qml 

import QtQuick 2.0

Rectangle {
    width: 8
    height: 8

    color: "#808080"
    radius: width * 0.5
}

main.qml 

import QtQuick 2.0

Item {
    width: 256
    height: 256

    ListModel {
        id: bulletsListModel

        ListElement {
            a: 'example'
        }
        ListElement {
            a: 'example'
        }
        ...
    }

    ListView {
        id: bulletsList

        spacing: 8
        orientation: ListView.Horizontal

        delegate: BulletsListDelegate {}
        model: bulletsListModel

        anchors.bottom: parent.bottom
        width: parent.width
    }
}

И элементы отображаются так (онисерые маркеры)

buttons

Я хочу, чтобы они отображались в горизонтальном центре черного ящика над ними (его родитель).

Есть ли какая-либо форма централизации или обоснования пунктов списка?

Ответы [ 2 ]

1 голос
/ 01 ноября 2019

Итак, если я правильно понимаю ваш вопрос, вы хотите иметь выравнивание для экземпляров ваших элементов в ListView. Используя ListView, это не так легко достичь. Если у вас неравномерное количество элементов, вы можете сделать это, используя предпочитаемый объект HighHightBegin и HighHightEnd, чтобы иметь область размером в 1 элемент в центре вашего ListView, а затем установить hightlightRangeMode в ListView.StrictlyEnforceRange. Вы можете установить currentIndex так, чтобы он указывал на индекс, чтобы средний элемент считался текущим. Это помещает его в диапазон, который вы определили, и, следовательно, в центр. Это не работает, когда у вас четное количество элементов, так что это хак с ограниченным значением.

Мой вопрос: есть ли элементы с , которые нужно позиционировать с помощью ListView? Похоже, вам вообще не нужно много функциональности ListView? Если вам не нужны другие функции из ListView (например, прокрутка), вы можете просто использовать Repeater. Это позволяет вам просто поместить элементы в позиционер строки, для которого вы можете использовать ширину count * (DelegateWidth + Spacing) -spacing и высоту, равную высоте вашего делегата. Затем вы можете использовать acnhors, чтобы расположить строку по центру к тому, что вам нравится.

0 голосов
/ 02 ноября 2019

Ответ Андре предложил мне использовать Repeater и Rows вместо ListView, и это полностью решило мою проблему. Но ... пока не нашел способа выровнять фактический ListView. 

Row {

    spacing: 8

    Repeater {
        id: bulletsRepeater

        model: 5

        BulletsDelegate { }
    }

    anchors.bottom: parent.bottom
    anchors.horizontalCenter: parent.horizontalCenter
}
...