Karty

Karta służy jako przegląd i punkt wejściowy do bardziej szczegółowych danych i może dać bezpośredni dostęp do najważniejszych działań danej rzeczy.

Rodzaje Kirigami Kirigami.AbstractCard oraz Kirigami.Card są używane, aby zaimplementować powszechne składniki kart używane na wielu platformach sieciowych i przenośnych. Kart można używać do wyświetlania zbiorów informacji lub działań w ładny i wyraźny sposób.

Kirigami daje także 3 rodzaje widoków i rzeczy umieszczających, aby pomóc w przedstawianiu kart przy użyciu pięknych i łatwo obsługiwalnych układów.

Abstrakcyjna karta

Kirigami.AbstractCard jest najprostszym rodzajem karty. Jest to tylko prostokąt z cieniem, który może w sobie zawierać dowolną Item. Może także mieć przypisane rzeczy do swoich właściwości header lub footer. W tym przypadku Kirigami.Heading jest jego nagłówkiem a Controls.Label z wrapMode ustawionym na Text.WordWrap jest contentItem karty.

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

Karta

Kirigami.Card dziedziczy z Kirigami.AbstractCard i domyślnie daje więcej możliwości. Karta ma nagłówek składający się z banner oraz nagłówka składającego się z obiektu Kirigami.Action obok swojego głównego składnika.

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"
        // Tytuł można umieścić na banerze
        titleAlignment: Qt.AlignLeft | Qt.AlignBottom
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "My Text"
    }
}

CardsLayout

Kirigami.CardsLayout jest najbardziej użyteczny, gdy przedstawiane karty nie są tworzone przez model lub przez model, który zawsze zawiera niewiele rzeczy. Są przedstawiane jako siatka dwóch kolumn, które pozostaną wyśrodkowane, jeśli aplikacja jest na prawdę szeroka, lub staną się pojedynczą kolumną, jeśli nie ma miejsca na dwie kolumny, tak jak w przypadku ekranów telefonów.

CardsLayout powinien zawsze znajdować się w ColumnLayout.

Jeśli chcesz, to kartę możesz także ustawić w poziomie. W tym przypadku będzie ona szersza niż wyższa i lepiej będzie ją umieścić w ColumnLayout. Jeśli musisz ją umieścić w CardsLayout, to domyślnie będzie miała ustawione columnSpan na 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"
            }
        }
    }
}
Zrzut ekranu CardsLayout

CardsListView

Kirigami.CardsListView jest widokiem listy, który może być użyty ze składnikami Kirigami.AbstractCard .

Kirigami.CardsListView rozciągnie karty podrzędne do swojej własnej szerokości. Składnika tego powinno się zatem używać tylko z kartami, które będą wyglądać dobrze przy każdym rozmiarze szerokości. Nie zalecamy używania Kirigami.CardsListView składnika Kirigami.Card, chyba, że zawiera Qt.Horizontal w swojej właściwości headerOrientation.

W wyborze pomiędzy używaniem tego widoku ze składnikiem Kirigami.AbstractCard lub zwykłym widokiem ListView ze składnikami AbstractListItem / BasicListItem rozchodzi się tylko o wygląd.

Kirigami.CardsListView {
    id: view
    model: 100

    delegate: Kirigami.AbstractCard {
        //NOTE: never put a Layout as contentItem as it will cause binding loops
        contentItem: Item {
            implicitWidth: delegateLayout.implicitWidth
            implicitHeight: delegateLayout.implicitHeight
            GridLayout {
                id: delegateLayout
                anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
                    //IMPORTANT: never put the bottom margin
                }
                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")
                }
            }
        }
    }
}
Zrzut ekranu CardsListView

CardsGridView

Użyj Kirigami.CardsGridView , aby wyświetlić karty w siatce.

Jego zachowanie jest takie same jak Kirigami.CardsLayout i umożliwia umieszczenie kart w jednej lub dwóch kolumnach w zależności od dostępnej szerokości.

CardsGridView ma to ograniczenie, że każda karta musi mieć dokładnie tę samą wysokość, więc cellHeight trzeba ustawić ręcznie na wartość, dla której treść musi zmieścić się dla każdej karty podrzędnej.

Jeśli to możliwe, to używaj tylko Kirigami.CardsGridView, gdy potrzebujesz stworzyć wiele kart. Jeśli potrzebujesz tylko kilku kart, to użyj Kirigami.CardsLayout ze składnikiem Repeater.

Kirigami.CardsGridView {
    id: view
    model: ListModel {
        id: mainModel
        // Model o następujących rolach: text, actions oraz image
    }
    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
            }
        ]
    }
}

Zrzut ekranu CardsGridView