Карточки

Карточка служит обзором и точкой входа к более подробным сведениям, а также предоставляет прямой доступ к важнейшим действиям элемента.

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

Kirigami также предлагает три вида представлений и позиционеров, помогающих создавать красивые и адаптивные компоновки для показа карточек.

Абстрактная карточка

Kirigami.AbstractCard — простейший тип карточки. Это просто прямоугольник с тенью, в который можно поместить любой Item. Кроме того, свойствам header и footer можно назначить элементы. В этом случае в роли header выступает Kirigami.Heading, а в роли contentItem карточки — Controls.Label.

Kirigami.AbstractCard {
    Layout.fillHeight: true
    header: Kirigami.Heading {
        text: qsTr("AbstractCard")
        level: 2
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "..."
    }
}

Снимок экрана Abstract Card — простой прямоугольной кнопки с текстом, выровненным по левому краю

Карточка

Kirigami.Card наследуется от AbstractCard и предоставляет больше возможностей без дополнительной настройки. Карточки наследуют те же header и footer от Abstract Card, но вместо них рекомендуется использовать banner и набор объектов 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"
    }
}

Снимок экрана полноценной карточки с фоновым баннером за заголовком, белым фоном за текстом и двумя действиями со значками и меню-гамбургером внизу

Компоновка карточек

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 не рекомендуется, если только его свойство headerOrientation не имеет значения Qt.Horizontal.

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 — простого вертикального списка карточек в альбомном режиме

Прокручиваемые страницы и списки

Выдвижные панели