I think you are confusing the data you want to display with how you want to display it. Most developers would not hard-code the data into lists the way you are doing, they would define a data structure that could be stored in a disk file and updated independently of the GUI. The contents of the disk file are read in at run time and used to build the lists displayed on screen.
Something that would work well for a simple thing like a recipe file would be XML, something like this:
<?xml version="1.0" ?>
<RecipeList>
<Recipe name="Beef Risotto" serves="4" difficulty="moderate">
<IngredientsList>
<Ingredient name="Arborio rice" quantity="200" unit="gm" />
<Ingredient name="Onion" quantity="1" unit="each" />
<Ingredient name="Beef" quantity="300" unit="gm" />
etc.
</IngredientList>
<Directions>
Dice onion.
Slice beef into 1cm cubes.
Put beef broth into a saucepan and heat to simmer over medium-low heat.
Melt butter in a large frying pan.
Add the beef cubes and stir until browned.
Remove the beef cubes.
Add onions and fry until slightly browned.
Add rice and stir to coat with butter.
After 1 - 2 minutes, add the white wine and stir continuously until it is absorbed.
Add the broth in 250 ml portions, stirring continuously after each addition until completely absorbed.
When the rice is nearly cooked (it will be mostly translucent), return the beef to the pan and continue stirring until all the broth is absorbed.
Stir in the cheese, adjust the seasonings, and serve immediately.
</Directions>
</Recipe>
<Recipe name="Southwestern Alfredo" serves="6" difficulty="easy">
etc.
</Recipe>
</RecipeList>
<?xml version="1.0" ?>
<RecipeList>
<Recipe name="Beef Risotto" serves="4" difficulty="moderate">
<IngredientsList>
<Ingredient name="Arborio rice" quantity="200" unit="gm" />
<Ingredient name="Onion" quantity="1" unit="each" />
<Ingredient name="Beef" quantity="300" unit="gm" />
etc.
</IngredientList>
<Directions>
Dice onion.
Slice beef into 1cm cubes.
Put beef broth into a saucepan and heat to simmer over medium-low heat.
Melt butter in a large frying pan.
Add the beef cubes and stir until browned.
Remove the beef cubes.
Add onions and fry until slightly browned.
Add rice and stir to coat with butter.
After 1 - 2 minutes, add the white wine and stir continuously until it is absorbed.
Add the broth in 250 ml portions, stirring continuously after each addition until completely absorbed.
When the rice is nearly cooked (it will be mostly translucent), return the beef to the pan and continue stirring until all the broth is absorbed.
Stir in the cheese, adjust the seasonings, and serve immediately.
</Directions>
</Recipe>
<Recipe name="Southwestern Alfredo" serves="6" difficulty="easy">
etc.
</Recipe>
</RecipeList>
To copy to clipboard, switch view to plain text mode
You can use the Qt Quick XmlListModel to read this from the disk and hold it in memory.
After you read in this document, you can retrieve the names of recipes to display in your first list. Say you've named your XmlListModel with the id: recipeModel:
import QtQuick 2.0
import QtQuick.XmlListModel 2.0
XmlListModel {
id: recipeModel
source: "file://recipeList.xml"
query: "/RecipeList/Recipe"
XmlRole { name: "recipeName"; query: "@name/string()" }
XmlRole { name: "feeds"; query: "@serves/string()" }
XmlRole { name: "easeOfPrep"; query: "@difficulty/string()" }
}
ListView {
id: recipesView
width: 180; height: 300
model: recipeModel
delegate: Text { text: recipeName }
}
import QtQuick 2.0
import QtQuick.XmlListModel 2.0
XmlListModel {
id: recipeModel
source: "file://recipeList.xml"
query: "/RecipeList/Recipe"
XmlRole { name: "recipeName"; query: "@name/string()" }
XmlRole { name: "feeds"; query: "@serves/string()" }
XmlRole { name: "easeOfPrep"; query: "@difficulty/string()" }
}
ListView {
id: recipesView
width: 180; height: 300
model: recipeModel
delegate: Text { text: recipeName }
}
To copy to clipboard, switch view to plain text mode
In a second list view, you will use the index of the currently-selected item in the first list view to pull the names of the ingredients from the selected recipe:
XmlListModel {
id: ingredientsModel
source: "file://recipeList.xml"
query: "/RecipeList/Recipe[" + recipesView.currentIndex + "]/IngredientsList/Ingredient"
XmlRole { name: "ingredientName"; query: "@name/string()" }
}
ListView {
id: ingredientsView
width: 180; height: 300
model: ingredientsModel
delegate: Text { text: ingredientName }
}
XmlListModel {
id: ingredientsModel
source: "file://recipeList.xml"
query: "/RecipeList/Recipe[" + recipesView.currentIndex + "]/IngredientsList/Ingredient"
XmlRole { name: "ingredientName"; query: "@name/string()" }
}
ListView {
id: ingredientsView
width: 180; height: 300
model: ingredientsModel
delegate: Text { text: ingredientName }
}
To copy to clipboard, switch view to plain text mode
I haven't tested this; you will probably have to play with it to make it work in your own GUI. I am not sure if you must specify the file name again for the second XmlListModel, or whether you can set its "source:" to be recipesModel. I can't find details in the QML documentation, which is pretty poor on this topic, as usual. You'll just have to try it.
The important things are:
1 - There is a separation between the data you want to display and the code you use to implement the GUI
2 - The second list view is synchronized to the first using the "currentIndex" of the selected item from the first view
Have fun.
Getting a specific list element
arent.height/2.5 ; color: "black";anchors.bottom
Reply With Quote
Bookmarks