Карти

Картка слугує як панель огляду та вхідна позиція для отримання докладніших відомостей і може пропонувати безпосередній доступ до найважливіших дій над пунктом.

Типи Kirigami Kirigami.AbstractCard і Kirigami.Card використовують для реалізації популярного компонента картки, який використовується на багатьох мобільних платформах та інтернет-платформах. Картками можна скористатися для показу збірки відомостей або пунктів дій у привабливий та виразний спосіб.

Крім того, Kirigami пропонує 3 типи панелей перегляду і засобів розташування, які допоможуть вам у представленні ваших карток з використанням красивих і чутливих до дій користувача компонувань.

AbstractCard

Kirigami.AbstractCard є найпростішим типом картки. Це лише прямокутник з тінню, який може містити у собі будь-який Item. На ній також можуть міститися пункти, які пов’язано із його властивостями header або footer. У цьому випадку Kirigami.Heading є його шапкою, а Controls.Label із wrapMode, встановленим у значення Text.WordWrap, є contentItem картки.

Kirigami.AbstractCard {
    Layout.fillHeight: true
    header: Kirigami.Heading {
        text: qsTr("AbstractCard")
        level: 2
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "..."
    }
}
Знімок абстрактної картки

Картка

Kirigami.Card є нащадком Kirigami.AbstractCard і від початку надає більше можливостей. Картка має заголовок, що складається із банера (banner) і підвалу, складеного з об’єктів Kirigami.Action , разом із своїм основним вмістом.

Kirigami.Card {
    actions: [
        Kirigami.Action {
            text: qsTr("Action1")
            icon.name: "add-placemark"
        },
        Kirigami.Action {
            text: qsTr("Action2")
            icon.name: "address-book-new-symbolic"
        },
        // ...
    ]
    banner {
        source: "../banner.jpg"
        title: "Title Alignment"
        // Заголовок може бути розташовано банері
        titleAlignment: Qt.AlignLeft | Qt.AlignBottom
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "My Text"
    }
}

CardsLayout

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

CardsLayout має завжди міститися у ColumnLayout.

Якщо потрібно, картку може бути зорієнтовано горизонтально. У цьому випадку вікно буде ширшим, ніж вищим — його краще пристосовано до розташування у ColumnLayout. Якщо вам потрібно вписати його у CardsLayout, його типовим значенням columnSpan буде 2.

ColumnLayout {
    Kirigami.CardsLayout {
        Kirigami.Card {
            contentItem: Controls.Label {
                wrapMode: Text.WordWrap
                text: "My Text2"
            }
        }
        Kirigami.AbstractCard { 
            contentItem: Controls.Label {
                wrapMode: Text.WordWrap
                text: "My Text"
            }
        }
        Kirigami.Card {
            headerOrientation: Qt.Horizontal
            contentItem: Controls.Label {
                wrapMode: Text.WordWrap
                text: "My Text2"
            }
        }
    }
}
Знімок CardsLayout

CardsListView

Kirigami.CardsListView є панеллю перегляду списком, якою можна скористатися за допомогою компонентів Kirigami.AbstractCard .

Kirigami.CardsListView розтягуватиме дочірні картки до власної ширини. Тому цей компонент слід використовувати із картками, які виглядатимуть добре за будь-якого горизонтального розміру. Не варто використовувати Kirigami.CardsListView у компоненті Kirigami.Card, якщо не встановлено значення Qt.Horizontal для його властивості headerOrientation.

Вибір щодо використання цієї панелі перегляду з компонентами Kirigami.AbstractCard або типовим ListView з компонентами AbstractListItem / BasicListItem є суто справою естетичних смаків.

Kirigami.CardsListView {
    id: view
    model: 100

    delegate: Kirigami.AbstractCard {
        // УВАГА! Ніколи не робіть Layout contentItem, оскільки це призведе до циклічної прив'язки
        contentItem: Item {
            implicitWidth: delegateLayout.implicitWidth
            implicitHeight: delegateLayout.implicitHeight
            GridLayout {
                id: delegateLayout
                anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
                    // ВАЖЛИВО! Ніколи не встановлюйте нижнє поле
                }
                rowSpacing: Kirigami.Units.largeSpacing
                columnSpacing: Kirigami.Units.largeSpacing
                columns: width > Kirigami.Units.gridUnit * 20 ? 4 : 2
                Kirigami.Icon {
                    source: "applications-graphics"
                    Layout.fillHeight: true
                    Layout.maximumHeight: Kirigami.Units.iconSizes.huge
                    Layout.preferredWidth: height
                }
                Kirigami.Heading {
                    level: 2
                    text: qsTr("Product ")+ modelData
                }
                Controls.Button {
                    Layout.alignment: Qt.AlignRight
                    Layout.columnSpan: 2 
                    text: qsTr("Install")
                }
            }
        }
    }
}
Знімок CardsListView

CardsGridView

Скористайтеся Kirigami.CardsGridView для показу карток у таблиці.

Його поведінка є такою самою, що і Kirigami.CardsLayout, і уможливлює розташування карток у один або два стовпчики, залежно від доступної ширини.

CardsGridView має обмеження: усі картки повинні мати однакову висоту, тому для cellHeight слід вручну встановити значення, для якого вміст має бути відповідним для усіх дочірніх карток.

Якщо можна, користуйтеся Kirigami.CardsGridView, лише якщо вам потрібно створити екземпляри багатьох карток. Якщо ви збираєтеся створити екземпляри лише декількох карток, скористайтеся замість нього Kirigami.CardsLayout із Repeater.

Kirigami.CardsGridView {
    id: view
    model: ListModel {
        id: mainModel
        // Модель з такими ролями: текст, дії і зображення
    }
    delegate:Kirigami.Card {
        id: card
        banner {
            title: model.title
            source: model.image
        }
        contentItem: Controls.Label {
            wrapMode: Text.WordWrap
            text: model.text
        }
        actions: [
            Kirigami.Action {
                text: model.actions.get(0).text
                icon.name: model.actions.get(0).icon
            },
            Kirigami.Action {
                text: model.actions.get(1).text
                icon.name: model.actions.get(1).icon
            }
        ]
    }
}
Знімок CardsGridView