Drseče strani in pogledi seznama
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.ScrollablePage
Kirigami.ScrollablePage je stran, ki ima drsno vsebino, na primer ListView. Kazalniki za drsenje se samodejno upravljajo.
Kirigami.ScrollablePage {
id: root
//Po pravokotniku se bo samodejno dalo drseti
Rectangle {
width: root.width
height: 99999
}
}Na skoraj vsak drug način je stran, po kateri je mogoče drseti, enaka običajni strani.
Opozorilo
Ne postavljajte ScrollView v Kirigami.ScrollablePage; potomci 'Kirigami.ScrollablePage' so že znotraj 'ScrollView'.Pregled seznama v strani, po kateri se da drseti
Ko se neposredni potomci Kirigami.ScrollablePage razširijo navpično preko velikosti strani, se na desni strani prikaže drsnik in po strani se da drseti.
Dve strani, po katerih se da drseti in obe vsebujeta pogled seznama z vsebino po meri (posnetek zaslona NeoChat)
Pogosto imate več kot enega potomca v Kirigami.ScrollablePage in pozicioniranje elementov je lahko zapleteno - še posebej v kombinaciji z ListView.
- Nevizualne komponente v elementu ListView ne bodo spremenile videz strani. Lahko jih premaknemo v seznam pogledov. Enako velja za elemente, ki so zasidrani na sredino strani, kot so lokacije za sporočila o praznih seznamih pogledov.
- Za druge elemente je morda bolj smiselno, da jih premaknete v glavo ali nogo strani [Kirigami.ScrollablePage](docs:kirigami2;ScrollablePage. To pogosto velja za iskalne vrstice.
PlaceholderMessage
Možno je dodati 'Kirigami.PlaceholderMessage' z nekaj navodili, če je seznam pogledov prazen.
Kirigami.ScrollablePage {
ListView {
id: listView
Kirigami.PlaceholderMessage {
anchors.centerIn: parent
width: parent.width - (Kirigami.Units.largeSpacing * 4)
visible: listView.count === 0
text: i18n("No data found")
helpfulAction: Kirigami.Action {
text: i18n("Load data")
// Več kode...
}
}
model: // Model kode...
}
}Iskanje v pogledu seznama
Iskalno polje se pogosto doda Kirigami.ScrollablePage za filtriranje seznama pogledov ListView. To lahko storite tako, da spremenite privzeti titleDelegate za uporabo Kirigami.SearchField namesto tega.
Kirigami.ScrollablePage {
titleDelegate: Kirigami.SearchField {
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
Layout.fillHeight: true
Layout.fillWidth: true
onTextChanged: mySortFilterModel.filterText = text
KeyNavigation.tab: listView
}
ListView {
id: listView
// Preostala koda listview...
}
}Namig
Uporabite lahko KSortFilterProxyModel iz KItemModel za enostavno dodajanje zmogljivosti filtriranja neposredno v QML brez potrebe po kodi C++.Povlecite za osvežitev
Druga funkcija, ki jo zagotavlja ta komponenta, je dejanje "Povlecite za osvežitev". Če želite to uporabiti, jo aktivirajte na naslednji način:
Kirigami.ScrollablePage {
id: view
supportsRefreshing: true
onRefreshingChanged: {
if (refreshing) {
myModel.refresh();
}
}
ListView {
// OPOMBA: MyModel ne prihaja iz komponent, to je zgolj primer, kako se lahko uporablja
// skupaj nekaj logike aplikacije, ki lahko posodobi model seznama in signalizira, ko je to
// končano.
model: MyModel {
onRefreshDone: view.refreshing = false;
}
delegate: BasicListItem {}
}
}Z vlečenjem navzdol lahko aktivirate tudi poseben način z večjim zgornjim robom, ki še lažje omogoča enoročno uporabo aplikacije.