Układy formularzy

Składniki Kirigami.FormLayout ułatwiają ci tworzenie formularzy, które są zgodne z Przewodnikiem po Interfejsach Ludzkich KDE. Są optymalne do okien ustawień i dużych grup rzeczy obsługujących i pól wprowadzania z nimi związanych.

Układy formularzy zajmą dwie kolumny, gdy będą miały na to wystarczająco miejsca. Kolumna po lewej będzie zawierać etykiety dane elementom podrzędnym formularza, podczas gdy ta po prawej będzie zawierać same elementy. W bardziej ograniczonych powierzchniowo oknach (lub na urządzeniach przenośnych) formularze będą składać się z pojedynczej pionowej kolumny z etykietami elementów, znajdującymi się ponad nimi.

Prosty formularz

Składniki Kirigami.FormLayout są podobne do składników układu QtQuick takich jak ColumnLayout czy RowLayout. Składniki podrzędne zostaną samoczynnie ułożone na podstawie dostępnego rozmiaru w układzie formularza.

Rzeczy należące do Kirigami.FormLayout mają właściwość o nazwie Kirigami.FormData.label. Ta właściwość umożliwia ci ustawienie etykiety, która zostanie przekazana rzeczom podrzędnym.

import QtQuick 2.6
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.4 as Kirigami

Kirigami.Page {

    Kirigami.FormLayout {
        id: layout
        Layout.fillWidth: true

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

}

Wydzielone obszary i ich odgraniczniki

FormLayouts także mogą być podzielone na obszary. Określenie początku obszaru jest takie proste jak ustawienie właściwości w podrzędnym składniku Kirigami.FormData.isSection na true. Zapewni to składnikowi dodatkowy margines na górze, aby zaznaczyć początek nowego obszaru.

Do rozpoczynania nowych obszarów, najbardziej nadają się składniki Kirigami.Separator. Kirigami.Separator narysuje cienką linię w poziomie, znacząc koniec obszaru. Jeśli nie chcesz, aby taka linia była rysowana pomiędzy obszarami, to możesz użyć standardowej własności QML Item. Zamiennie możesz użyć własności Kirigami.FormData.isSection na innym składniku.

Jednakże, nie jest to zalecane. W składnikach, w których Kirigami.FormData.isSection jest ustawione na prawdę, tekst etykiety wpisanej we własności Kirigami.FormData.label zostanie wyświetlony jako tekst nagłówka obszaru. Nie jest tak z każdym składnikiem, stąd zalecamy używanie składników Kirigami.Separator lub Item w miejscach, w których chciałbyś używać tekstu nagłówkowego. Ten tekst nagłówkowy jest większy niż tekst zwyczajnej etykiety i powiadamia użytkownika o tym, o czym jest dany obszar.

Kirigami.FormLayout {
    id: layout
    Layout.fillWidth: true

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

Zaznaczalne rzeczy podrzędne

Przydatną cechą Kirigami.FormLayout jest to, że możesz dodawać pola zaznaczane do jego rzeczy podrzędnych. Przydaje się to na stronach ustawień, gdzie chcesz dać użytkownikowi możliwość włączania lub wyłączania ustawień, a także gdy chcesz od użytkownika dodatkowych szczegółów w składnikach takich jak pola tekstowe.

Kirigami.FormLayout {
    id: layout
    Layout.fillWidth: true

    Controls.TextField {
        Kirigami.FormData.label: "First name:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "Middle name:"
        Kirigami.FormData.checkable: true
        enabled: Kirigami.FormData.checked
    }
    Controls.TextField {
        Kirigami.FormData.label: "Last name:"
    }
}

Wymuszanie układu z urządzenia biurkowego lub przenośnego

Jeśli chciałbyś, aby twój układ formularza pozostawał spójny, niezależnie od otoczenia aplikacji, to możesz użyć właściwości wideMode składnika Kirigami.FormLayout. wideMode jest własnością logiczną:

• Gdy ustawione na true, to układ formularza zostanie ułożony do szerokiego ekranu przystosowanego do komputerów biurkowych (podwójna kolumna)
• Po ustawieniu na false, układ formularza zostanie ułożony w układ jak na urządzenia przenośne (pojedyncza kolumna)

Kirigami.FormLayout {
    id: layout
    Layout.fillWidth: true
    wideMode: false

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