Компоновки форм

Компоненты Kirigami.FormLayout упрощают создание форм, соответствующих Рекомендациям по человеко-машинному интерфейсу KDE. Они оптимальны для диалогов параметров и больших групп связанных между собой элементов управления и полей ввода.

Если места достаточно, компоновки форм занимают два столбца. Левый столбец занимают надписи, заданные для дочерних компонентов формы, а правый — сами дочерние компоненты. В окнах с ограниченным пространством (или на мобильных устройствах) формы состоят из одного вертикального столбца, в котором надписи дочерних компонентов размещаются над соответствующими компонентами.

Простая форма

Компоненты Kirigami.FormLayout по своему использованию аналогичны компонентам QtQuick Layout, таким как ColumnLayout или RowLayout. Дочерние компоненты автоматически упорядочиваются в соответствии с размером, доступным компоновке формы.

У дочерних компонентов Kirigami.FormLayout есть свойство Kirigami.FormData.label. Это свойство позволяет задать надпись, которая будет показываться для соответствующего дочернего компонента.

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

Разделы и разделители

Компоновки форм также можно разделять на разделы. Указать, где начинается раздел, так же просто, как установить для дочернего компонента свойство Kirigami.FormData.isSection в значение true. Это добавит компоненту дополнительный отступ сверху, обозначающий начало нового раздела.

Компоненты Kirigami.Separator лучше всего подходят для начала новых разделов. Разделители служат для рисования тонкой горизонтальной линии, обозначающей конец раздела. Если линия между разделами не нужна, можно использовать свойство стандартного элемента QML Item. Либо можно использовать свойство Kirigami.FormData.isSection любого другого компонента.

Однако это не рекомендуется. В компонентах, у которых для Kirigami.FormData.isSection задано значение true, текст надписи, указанный в свойстве Kirigami.FormData.label этого компонента, показывается как текст заголовка раздела.

Этот текст заголовка крупнее обычного текста надписи и служит наглядным ориентиром, поясняющим назначение раздела компоновки формы.

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

Принудительное применение компоновки рабочего стола или мобильного устройства

Если требуется, чтобы компоновка формы оставалась неизменной независимо от окружения приложения, можно использовать свойство wideMode компонента Kirigami.FormLayout:

• Если задано значение true, компоновка формы будет построена как широкоэкранная (двухколоночная), оптимизированная для рабочего стола
• Если задано значение false, компоновка формы будет построена как мобильная (в один столбец)

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

Выравнивание меток

Иногда требуется назначить надпись компонентам, занимающим более одной строки, или списку компонентов. Это можно сделать, поместив Kirigami.FormData.label в ColumnLayout, как можно было заметить в разделе Разделы и разделители. По умолчанию надпись располагается по вертикальному центру компоновки, что не всегда желательно. Это можно изменить с помощью 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
        }
    }
}

Настройка выравнивания меток особенно удобна для управления компонентами или списками компонентов, размер которых заранее неизвестен. Отличный пример этого — Elisa:

Нечто подобное можно сделать с помощью тернарного оператора 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
        }
    }
}