Cascades Development

[bbdevguy]

I am trying to place two ListView components on the same page/container. I would like the first ListView to occupy as much vertical space as necessary to display its itmes and the rest to be allocated to the second ListView below. The number of items in both can vary an can be anything including 0.

However no matter how I lay the two ListView's and no matter what combination of StackLayout or DockLayout I use, the result is a page/container that is equally devided between the two ListView.

Here is some of the (unsuccessful) code that I use. I also tried using DockLayout but the outcome was identical.

content:Container {
   id:root
   layout : StackLayout {
      orientation: LayoutOrientation.TopToBottom            
   }

   ListView {
      id: listView1
      objectName: "eventListView"
      horizontalAlignment: HorizontalAlignment.Fill
   }
	
   ListView{
      id: listView2
      horizontalAlignment: HorizontalAlignment.Fill
   }
}

Does anyone know how to essentially tell a ListView to 'wrap' its items and only take up exactly as much vertical space as is necessary to display its items and no more?

[Zmey]

ListView is similar to ScrollView, it won't wrap it's items I think. If you don't need the first ListView to scroll then using a Container instead of ListView and populating it with custom components in a loop could be a better idea.

You can create a standalone component in another QML file and reuse it for populating the first container (by creating it directly) and for creating contents of ListItemComponents in second ListView.

Another thing to try:
If you know the height of a list item, try setting preferredHeight: numberOfItems * itemHeight to ListView and use spaceQuota: 1 for second ListView. This might not work, just an idea to try.

[bbdevguy]

Thanks for the ideas and explanation, Zmey. Calculating the height based on the individual item's height would make sense but I fear things like font size or text overflow messing up the logic and things looking bad as a consequence.

The approach that I ended up using was to load both sets of items from each ListViews in one ListView. I then had to re-write the Javascript in the QML to behave differently based on the item type. Not the most elegant approach but so far it is working.