layout di flusso con il contenuto centrata

Question

Ho una fila di componenti che devono impilare quando la larghezza della finestra diventa troppo piccolo per la visualizzazione di tutti gli elementi in una riga, come mostrato nel disegno seguente:

Il Flow componente impila gli articoli, ma non sono centrati ma in linea sul lato sinistro o destro:

Flow { 
    Item {} 
    Item {} 
    Item {} 
    Item {} 
    Item {} 
} 

esiste un modo integrato in QML per rendere il flusso centrato?

Answer 1

Beh, non esiste un modo integrato ma ho trovato una soluzione alternativa per farlo.

L'idea è semplice, dal momento che Flow è già un Item ha anchors.leftMargin e anchors.rightMargin. Quindi, se possiamo calcolare quanti elementi ci sono nella riga di Flow, allora siamo in grado di calcolare i margini sinistro e destro. Così possiamo Center a.

Qui si tratta di un semplice codice,

 Flow { 
     property int rowCount: parent.width/(elements.itemAt(0).width + spacing) 
     property int rowWidth: rowCount * elements.itemAt(0).width + (rowCount - 1) * spacing 
     property int mar: (parent.width - rowWidth)/2 

     anchors { 
      fill: parent 
      leftMargin: mar 
      rightMargin: mar 
     } 

     spacing: 6 
     Repeater { 
      id: elements 
      model: 5 
      Rectangle { 
       color: "#aa6666" 
       width: 100; height: 100 
      } 
     } 

Answer 2

Esiste un modo integrato in Qml per centrare il flusso?

No.

Si può fare la matematica per verificare se l'ultima "riga" in Flow non è pieno, e quindi aggiungere alcuni elementi distanziatori a sinistra ea destra delle voci in quella riga. Dovresti usare un po 'di C++, probabilmente; ovvero QQuickItem::stackBefore() e QQuickItem::stackAfter() per riposizionare gli elementi spaziatori nell'elenco dei figli di Flow. La larghezza di ciascun elemento spaziatore sarebbe la metà dello spazio rimanente all'interno di quella riga. Non è carino, ma dovrebbe funzionare.

Answer 3

Non penso ci sia alcun modo integrato per farlo. Devi creare il tuo elemento.