Карти

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

About Kirigami API documentation: use https://api-staging.kde.org/kirigami-index.html for now

Click here to read more

We are aware of issues involving broken links to Kirigami API documentation. We are currently working on a better website to address these issues, porting the API docs where possible.

In its current state, the staging API website under development for Kirigami can be used to access all relevant Kirigami API pages, and it should already work better than the previous API website. You can access the staging API website through https://api-staging.kde.org/kirigami-index.html.

If you'd like to assist us in our efforts to port the API documentation, take a look at our Port API documentation to QDoc metatask.

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

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

AbstractCard

Kirigami.AbstractCard є найпростішим типом картки. Це лише прямокутник з тінню, який може містити у собі будь-який Item. На ній також можуть міститися пункти, які пов'язано із його властивостями header або footer. У цьому випадку Kirigami.Heading є його шапкою, а Controls.Label, є 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 і від початку надає більше можливостей. Картки успадковують заголовок і підвал від абстрактної картки, але вам варто замість них скористатися банером і набором Kirigami.Action у групі actions.

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

Знімок повноцінної Card із банером-тлом під її заголовком, білим тлом під її текстом та двома кнопками дій із піктограмами та меню-гамбургером внизу

CardsLayout

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

Нотатка

CardsListView краще пасує для більших моделей.

Важливе

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

Якщо потрібно, картку може бути зорієнтовано горизонтально. У цьому випадку вікно буде ширшим, ніж вищим — його краще пристосовано до розташування у ColumnLayout. Якщо вам потрібно вписати його у CardsLayout, його типовим значенням maximumColumns буде 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 є панеллю перегляду списком, якою можна скористатися за допомогою компонентів AbstractCard.

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

Вибір щодо використання цієї панелі перегляду з компонентами 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, який є простим вертикальним списком карток у режимі альбому

Сторінки і панелі списків із гортанням

Висувні панелі