QML Listview espaço de itens para preencher a largura

0

Pergunta

Eu tenho um ListView (orientação horizontal) na minha qml contendo algumas de tamanho fixo de elementos. Eu quero itens para ser espaçadas para preencher o entiew largura de ListView elemento. Então, se há menos elementos eu quero que eles sejam mais espaçadas. Basicamente o que eu preciso é exatamente como Layout.fillWidth = true propriedade de RowLayout mas para ListView.

Eu posso contar quantos itens eu tenho, em seguida, subtraia o total de itens de largura de ListView largura, dividir por contagem de itens e atribuir o espaçamento mas parece muito bobo para fazer. Existe uma maneira de fazer isso automaticamente, como em RowLayout?

enter image description here

Ou talvez eu precise usar algo diferente do ListView para isso? Algo como RowLayout mas que eu possa atribuir a minha lista de dados de modelo?

listview qml qt spacing
2021-11-16 13:34:02
1

Melhor resposta

1

Você pode realizar o que você deseja, com uma ListView, você só precisa ajustar o espaçamento dinamicamente com base no número de delegados que você tem. Este exemplo vai quebrar se os seus representantes são de tamanho diferente (como este é somente com base na largura da primeira delegado), ou se os delegados, cumulativamente, ultrapassem a largura do 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
    }
}

6 delegates 4 delegates

ListView pode não ser o mais recipiente apropriado para esta tarefa. Eu digo isso porque ele foi construído em ScrollView e outros comportamentos que parece que você não precisa. Se tudo o que você precisa é de uma simples linha de alguns idêntico tamanho delegados, concordo com scopchanov e acreditar que um Repeater dentro de um RowLayout seria a melhor opção. Aqui está um exemplo simples:

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
        }
    }
}

6 delegates 4 delegates

Você pode perceber que este apresenta lacunas para a esquerda e para a direita, se estas falhas são inaceitáveis, você pode precisar configurar o spacing no RowLayout da mesma forma como o ListView exemplo, em vez disso.

2021-11-16 18:17:48

Em outros idiomas

Esta página está em outros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................