Disposizioni dei moduli

I componenti Kirigami.FormLayout semplificano la creazione di moduli conformi alle Linee guida per l'interfaccia umana di KDE. Sono ottimali per le finestre di dialogo delle impostazioni e per grandi gruppi di controlli e campi di input correlati tra loro.

Se dispone di spazio sufficiente, i layout dei moduli occuperanno due colonne. La colonna di sinistra sarà occupata dalle etichette previste per i componenti figli del modulo, mentre quella di destra sarà occupata dai componenti figli stessi. Nelle finestre con spazi più limitati (o sui dispositivi mobili), i moduli saranno costituiti da un'unica colonna verticale con le etichette dei componenti secondari posizionate sopra il rispettivo componente.

Modulo semplice

I componenti Kirigami.FormLayout sono simili nell'uso ai componenti QtQuick Layout come ColumnLayout o RowLayout. I componenti figlio verranno automaticamente disposti in base alla dimensione disponibile per il layout del modulo.

I figli di un Kirigami.FormLayout hanno una proprietà denominata Kirigami.FormData.label. Questa proprietà consente di impostare l'etichetta che verrà fornita per il componente figlio in questione.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    pageStack.initialPage: Kirigami.Page {

        Kirigami.FormLayout {
            anchors.fill: parent

            Controls.TextField {
                Kirigami.FormData.label: "TextField 1:"
            }
            Controls.TextField {
                Kirigami.FormData.label: "TextField 2:"
            }
            Controls.TextField {
                Kirigami.FormData.label: "TextField 3:"
            }
        }
    }
}

Sezioni e separatori

I FormLayouts possono anche essere divisi in sezioni. Impostare il punto in cui inizia una sezione è facile come impostare Kirigami.FormData.isSection su true. Ciò fornirà al componente un margine extra nella parte superiore per delimitare l'inizio della nuova sezione.

I componenti Kirigami.Separator sono più adatti per iniziare nuove sezioni. I separatori vengono utilizzati per tracciare una sottile linea orizzontale, che delimita la fine di una sezione. Se preferisci non tracciare una linea tra le sezioni, puoi utilizzare una proprietà QML standard Item. In alternativa puoi utilizzare la proprietà Kirigami.FormData.isSection su qualsiasi altro componente.

Tuttavia, questo non è raccomandato. Sui componenti in cui Kirigami.FormData.isSection è impostato su "true", il testo dell'etichetta fornito per questo componente La proprietà Kirigami.FormData.label verrà visualizzata come testo dell'intestazione della sezione.

Il testo dell'intestazione è più grande del normale testo dell'etichetta e fornisce agli utenti un bel segnale visivo di cosa tratta la sezione del layout del modulo.

Kirigami.FormLayout {
    anchors.fill: parent

    Controls.TextField {
        Kirigami.FormData.label: "TextField 1:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 2:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 3:"
    }
    Kirigami.Separator {
        Kirigami.FormData.isSection: true
        Kirigami.FormData.label: "New Section!"
    }
    ColumnLayout {
        Kirigami.FormData.label: "Radio buttons"
        Controls.RadioButton {
            text: "Radio 1"
            checked: true
        }
        Controls.RadioButton {
            text: "Radio 2"
        }
        Controls.RadioButton {
            text: "Radio 3"
        }
    }
    Item {
        Kirigami.FormData.isSection: true
        Kirigami.FormData.label: "Another Section! (lineless though)"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 4:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 5:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 5:"
    }
}

Forzare una modalità desktop o mobile

Se preferisci che il layout del modulo rimanga coerente indipendentemente dall'ambiente dell'applicazione, puoi utilizzare la proprietà wideMode del componente Kirigami.FormLayout:

• Quando viene impostato a vero la disposizione del modulo sarà strutturata in uno schermo largo ottimizzato per una disposizione su un desktop (a doppia colonna)
• Quando viene impostato a falso la disposizione del modulo sarà strutturata in una disposizione per dispositivo mobile (a singola colonna)

Kirigami.FormLayout {
    anchors.fill: parent
    wideMode: false

    Controls.TextField {
        Kirigami.FormData.label: "TextField 1:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 2:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 3:"
    }
}

Allineamento delle etichette

In alcuni casi si desidera assegnare un'etichetta ai componenti che hanno più di una riga o a un elenco di componenti. Ciò può essere ottenuto inserendo Kirigami.FormData.label in ColumnLayout, come potresti aver notato in Sezioni e Separatori. Per impostazione predefinita, l'etichetta è posizionata al centro verticale del layout, il che non è sempre auspicabile. Possiamo cambiare questo con l'aiuto di Kirigami.FormData.labelAlignment.

Kirigami.FormLayout {
    anchors.fill: parent

    ColumnLayout {
        Kirigami.FormData.label: "This is a label:"
        Kirigami.FormData.labelAlignment: Qt.AlignTop

        Controls.Label {
            text: "This is some rather long text \nthat should elide to multiple lines \nto show how the label gets aligned."
            elide: Text.elideLeft
        }
    }
}

L'impostazione dell'allineamento delle etichette è particolarmente comoda per gestire componenti o liste di componenti di cui non si conosce a priori la dimensione. Elisa ne è un ottimo esempio:

Possiamo fare qualcosa di simile a questo con un operatore ternario JavaScript:

Kirigami.FormLayout {
    anchors.fill: parent

    ColumnLayout {
        Kirigami.FormData.label: "This is a label:"
        Kirigami.FormData.labelAlignment: labelText.text.lineCount > 1 ? Qt.AlignTop : Qt.AlignVCenter

        Controls.Label {
            id: labelText
            text: "This is some rather long text \nthat should elide to a new line \nso it appears below the Form Label."
            elide: Text.elideLeft
        }
    }
}