Åtgärdsbaserade komponenter
Åtgärder
En Kirigami.Action inkapslar en åtgärd i ett användargränssnitt. Vi kan använda dem för att tillhandahålla åtgärder i våra program som är enkla att nå och är grundläggande för deras funktion.
Anmärkning
Kirigami-åtgärder ärver från QtQuick Controls Action och kan tilldelas genvägar.Liksom QtQuick Controls Actions , kan de tilldelas till menyalternativet och knappar i verktygsrader, men också till flera andra komponenter i Kirigami.
import org.kde.kirigami 2.20 as Kirigami
Kirigami.Action {
id: copyAction
text: i18n("&Copy")
icon.name: "edit-copy"
shortcut: StandardKey.Copy
onTriggered: { ... }
}
Anmärkning
Egenskapen icon.name accepterar namn för systemomfattande ikoner enligt FreeDesktop-specifikationen. Ikonerna och ikonnamnen kan visas med KDE:s program CuttleFish, som levereras med plasma-sdk, eller genom att besöka [FreeDesktop's icon naming specification](https: //specifications.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html).En funktion som åtgärder i Kirigami erbjuder över [QtQuick Actions (docs:qtquickcontrols;QtQuick.Controls.Action) är möjligheten att nästla åtgärder.
import org.kde.kirigami 2.20 as Kirigami
Kirigami.Action {
text: "View"
icon.name: "view-list-icons"
Kirigami.Action {
text: "action 1"
}
Kirigami.Action {
text: "action 2"
}
Kirigami.Action {
text: "action 3"
}
}
En annan funktion för åtgärder i Kirigami är att tillhandahålla olika tips för objekt som använder åtgärder om hur de ska visa åtgärden. De hanteras i huvudsak av egenskaperna displayHint och displayComponent .
Egenskaperna respekteras av objektet om möjligt. Exempelvis visas följande åtgärd som ett textfält och objektet gör sitt bästa för att hålla objektet synligt så länge som möjligt.
import org.kde.kirigami 2.20 as Kirigami
Kirigami.Action {
text: "Search"
icon.name: "search"
displayComponent: TextField { }
displayHint: Kirigami.DisplayHints.KeepVisible
}
Använda åtgärder i andra komponenter
Sida
En av funktionerna hos Kirigami.Page är att åtgärder kan läggas till i dem.
Du kan lägga till en actions.main
åtgärd, en actions.left
och actions.right
åtgärd och ytterligare sammanhangsberoende åtgärder som visas i verktygsraden om det finns tillräckligt med plats eller in en hamburgermeny på mindre skärmar.
|
|

Sidoåtgärder på skrivbordet

Sidoåtgärder på en mobil
Varning
För att få sammanhangsåtgärder att fungera på en mobil, måste du lägga till en ContextDrawer i Kirigami.ApplicationWindow .
Kirigami.ApplicationWindow {
...
contextDrawer: Kirigami.ContextDrawer {
id: contextDrawer
}
...
}
Global låda
Den globala lådan tillhandahåller en åtgärdsbaserad navigering i programmet. Det är där nästlade åtgärder är användbara eftersom det är möjligt att skapa nästlad navigering:
Kirigami.ApplicationWindow {
title: i18n("Demo")
globalDrawer: Kirigami.GlobalDrawer {
title: i18n("Demo")
titleIcon: "applications-graphics"
actions: [
Kirigami.Action {
text: i18n("View")
icon.name: "view-list-icons"
Kirigami.Action {
text: i18n("View Action 1")
onTriggered: showPassiveNotification(i18n("View Action 1 clicked"))
}
Kirigami.Action {
text: i18n("View Action 2")
onTriggered: showPassiveNotification(i18n("View Action 2 clicked"))
}
},
Kirigami.Action {
text: i18n("Action 1")
onTriggered: showPassiveNotification(i18n("Action 1 clicked"))
},
Kirigami.Action {
text: i18n("Action 2")
onTriggered: showPassiveNotification(i18n("Action 2 clicked"))
}
]
}
...
}

Åtgärder i global låda på skrivbordet

Åtgärder i global låda på en mobil
Du kan läsa mer om globala lådor på dokumentationssidan för lådor.
ActionTextFields
Ett Kirigami.ActionTextField används för att lägga till några sammanhangsberoende åtgärder i ett textfält, exempelvis för att rensa texten eller söka efter texten.
Kirigami.ActionTextField {
id: searchField
rightActions: [
Kirigami.Action {
icon.name: "edit-clear"
visible: searchField.text !== ""
onTriggered: {
searchField.text = ""
searchField.accepted()
}
}
]
}
I det här exemplet skapar vi en "rensningsknapp" för ett sökfält som bara är synligt när text matas in.
Anmärkning
Du måste sällan använda ActionTextField direkt. SearchField och PasswordField ärver båda frånActionTextField
och täcker troligen önskat användarfall.SwipeListItem
En Kirigami.SwipeListItem är en delegat avsedd att stödja extra åtgärder. När en mus används, visas dess åtgärder alltid. På en pekskärm kan de visas genom att dra objektet med greppet. På följande bilder är det ikonerna till höger.
ListView {
model: myModel
delegate: SwipeListItem {
Controls.Label {
text: model.text
}
actions: [
Action {
icon.name: "document-decrypt"
onTriggered: print("Action 1 clicked")
},
Action {
icon.name: model.action2Icon
onTriggered: //gör någonting
}
]
}
}

SwipeListItem på en dator

SwipeListItem på en mobil
ActionToolBar
En Kirigami.ActionToolBar är en verktygsrad byggd av en lista över åtgärder. Normalt representeras varje åtgärd som får plats på verktygsraden med en verktygsknapp , medan de som inte får plats flyttas till en meny i slutat på verktygsraden.
Liksom ActionTextField , behöver du nog inte använda ActionToolBar direkt, eftersom den används av sidhuvuden och kort för att tillhandahålla deras egen åtgärdsvisning.
Kirigami.ActionToolBar {
actions: [
Kirigami.Action {
text: i18n("View Action 1")
onTriggered: showPassiveNotification(i18n("View Action 1 clicked"))
},
Kirigami.Action {
text: i18n("View Action 2")
onTriggered: showPassiveNotification(i18n("View Action 2 clicked"))
},
Kirigami.Action {
text: i18n("Action 1")
onTriggered: showPassiveNotification(i18n("Action 1 clicked"))
},
Kirigami.Action {
text: i18n("Action 2")
onTriggered: showPassiveNotification(i18n("Action 2 clicked"))
}
]
}

En horisontell verktygsrad visas överst i programmet
Du kan läsa mer om komponenter i ActionToolBar på deras dedicerade dokumentationssida.
Kort
En
Kirigami.Card
används för att visa en samling av information eller åtgärder tillsammans. Åtgärderna kan läggas till i gruppen actions
, på liknande sätt som för tidigare komponenter.
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"
}
}

För mer information se komponentsidan för Cards.