Multiple Kirigami CardListViews in a Single ScrollablePage?

[antman]

I’m trying to display multiple Kirigami CardListViews in a single scrollable page. They work fine when they’re the only CardListView on the page, but when I place both one or sometimes both don’t work. The code:

Kirigami.ScrollablePage {
	ListModel {
		id: foodModel
	}

	ListModel {
		id: activityModel
	}

    // ...

	Kirigami.CardsListView {
		id: foodView
		model: foodModel
		delegate: FoodEntryDelegate {}
	}

	Kirigami.CardsListView {
		id: activityView
		model: activityModel
		delegate: ActivityEntryDelegate {}
	}

    // ...
}

Here the foodView is working but not the activityView. I can add/edit as many food items as I want but any added activity items don’t show up.

I’ve tried wrapping them in column layout, it doesn’t help. I’m a little suspicious about the following code in FoodEntryDelegate.qml:

Kirigami.AbstractCard {
	contentItem: Item {
		implicitWidth: foodEntryDelegateLayout.implicitWidth
		implicitHeight: foodEntryDelegateLayout.implicitHeight

		GridLayout {
			id: foodEntryDelegateLayout
			anchors {
				left: parent.left
				top: parent.top
				right: parent.right
			}

Here I guess anchors means taking up all the space?

FYI I’m following the tutorial in “Getting Started with Kiragami” which is the first (only?) resource you find online. I’ve altered the code to make my own app.

Does anyone have any ideas about this? I am finding a distinct lack of documentation/resources on Kirigami but I would like to learn.

[antman]

I think I found a way around this. From what I understand now (which could be wrong), there should be a single CardListView per ScrollablePage. But I can put multiple ScrollablePage elements inside a top-level ScrollablePage wrapped in a ColumnLayout. Here is the code:

Kirigami.ScrollablePage {

    // ...

    ColumnLayout {
		Kirigami.ScrollablePage {
			Kirigami.CardsListView {
				id: foodView
				model: foodModel
				delegate: FoodEntryDelegate {}
			}
		}

		Kirigami.ScrollablePage {
			Kirigami.CardsListView {
				id: activityView
				model: activityModel
				delegate: ActivityEntryDelegate {}
			}
		}
	}

I don’t think this is ideal but it gives me an okay-looking workaround.

[dphaldes]

you probably want to use ScrollView directly instead of using a inner ScrollablePage