Компонування форми

Компоненти Kirigami.FormLayout спрощують для вас створення форм, які відповідають настановам зі створення зручних інтерфейсів KDE. Вони є оптимальними для вікон параметрів роботи програми або великих груп елементів керування та полів введення, які пов'язано між собою.

Якщо місця достатньо, компонування форм виконуватиметься у два стовпчики. Лівий стовпчик буде заповнено мітками, які надано для дочірніх компонентів форми, а правий — самими дочірніми компонентами. У вікнах із обмеженим простором (або на мобільних пристроях) форми складатимуться з одного вертикального стовпчика із мітками дочірніх компонентів, які розташовано над відповідними компонентами.

Проста форма

Компоненти Kirigami.FormLayout подібні у використанні до компонентів компонування QtQuick, зокрема ColumnLayout або RowLayout. Дочірні компоненти буде автоматично упорядковано відповідно до розміру, який доступний до компонування форми.

Дочірні компоненти Kirigami.FormLayout мають властивість із назвою Kirigami.FormData.label. Ця властивість надає вам змогу встановити мітку, яку буде надано для відповідного дочірнього компонента.

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

}

Розділи і роздільники

Крім того, компонування форм може бути поділено на розділи. Встановлення місця, де починається розділ, зводиться до встановлення значення властивості Kirigami.FormData.isSection компонента true. Це надасть компоненту додаткове поле згори для позначення початку нового розділу.

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

Втім, не рекомендуємо це робити. Для компонентів, для яких для властивості Kirigami.FormData.isSection встановлено значення true, текст мітки властивості компонента Kirigami.FormData.label буде показано як текст заголовка розділу. Це стосується не кожного компонента, отже рекомендуємо використовувати Kirigami.Separator або Item там, де вам потрібно скористатися текстом заголовка. Цей текст заголовка є більшим за розміром за звичайний текст мітки і надає користувачеві чудову візуальну підказку щодо того, для чого призначено розділ компонування форми.

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

Дочірній елемент — пункт для позначення

Зручною можливістю Kirigami.FormLayout є можливість додавання пунктів позначок до його дочірніх елементів. Нею можна скористатися на сторінках параметрів, де у вас може виникнути потреба у наданні користувачу можливості увімкнути або вимкнути щось, а також наданні користувачу додаткової інформації у компонентах, подібних до поля для введення тексту.

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

Примусове визначення компонування — комп'ютер чи мобільний пристрій

Якщо ви надаєте перевагу збереженню однорідності вигляду компонування форми, незалежно від середовища програми, ви можете скористатися властивістю wideMode компонента Kirigami.FormLayout. wideMode є булевою властивістю:

• Якщо встановлено значення true, компонування форми буде структуровано для широкоекранного представлення на комп'ютері (у два стовпчики)
• Якщо встановлено значення false, компонування форми буде структуровано для мобільного пристрою (в один стовпчик)

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