Solved How to stop loading single image mutltiple times on a screen
-
GridView
{
signal buttonAction(int index, int action)property int itemWidth: 195
property int itemHeight: 80id: view
objectName: "view"focus: true
anchors.fill: parent
cellHeight: view.height / 2
cellWidth: view.width / 3
flow: GridView.FlowTopToBottomComponent{
id: dividerSix
Image { id: img objectName: "img" asynchronous: true source: (T.skin + "/menu/divider_six.png") fillMode: Image.PreserveAspectFit anchors{ horizontalCenter: parent.horizontalCenter verticalCenter: parent.verticalCenter } }
}
delegate:Component {
FocusScope { id: container property bool current: GridView.isCurrentItem width: view.cellWidth height: view.cellHeight Loader { id: loader focus: true width: itemWidth height: itemHeight anchors{ horizontalCenter: parent.horizontalCenter verticalCenter: parent.verticalCenter } asynchronous: true source: R_URL sourceComponent: dividerSix Binding { target: loader.item property: "focus" value: container.activeFocus } Connections { target: loader.item onButtonAction: { switch (action) { case ButtonActions.PRESSED: view.highlightMoveDuration = 0; container.GridView.view.currentIndex = index; loader.item.forceActiveFocus(); view.highlightMoveDuration = -1; break; } } } } }
}
}Here is my whole code. When I am adding sourceComponent to loader it is loading the img multiple times depending on buttons. How Can I stop it by loading it and just load only one image
-
@RG90 said in How to stop loading single image mutltiple times on a screen:
ok, I would like to make even dividerSix as a dynamic as of buttons. how could I go it. Is their is a possibility of making both the components move dynamically
Sorry but I don't understand what you mean at all.
What do you want to achieve, exactly? A button with an image inside it? How should it look like? Then such simple construct should work:
GridView { Repeater { // put here how many items should be generated Button { text: "something " + index Image { anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: 5 source: "my image source" } } } }
But I'm shooting blind here. I don't know what you are trying to achieve, and why you use Loaders so much. Are components loaded from the Internet?
-
I want to make button to be dragged along with Image. I just want it has one component so that when a user tries to drag a button, even Image also get dragged by delegate behavior. Can we use two components in one delegate so that we can get this behavior?.
-
@RG90 said in How to stop loading single image mutltiple times on a screen:
I want to make button to be dragged along with Image. I just want it has one component so that when a user tries to drag a button, even Image also get dragged by delegate behavior. Can we use two components in one delegate so that we can get this behavior?.
Yes, of course. QML supports nesting, and that is what I already provided you in my previous comment.
A different solution (with dragging. Pseudo code, I have no time to test it), maybe it will suit you better:
Item { width: 100 height: 100 Drag.active: true RowLayout { anchors.fill: parent Button { ... } Image { ... } } }
-
Thanks @sierdzio for your suggestion. my issue has been solved. I just used GridView inside a Flickable, which made much easier to me.
-
OK, so you wanted a scrollable/ flickable control, not to drag items around.
Fine, I'm happy you've got it to work :-)
-
@sierdzio
I have one more question, how can I stop flickable/scrollable vertically. I just need it be scrollable only on X-axis(horizontally). How can I use flickableHorizontally propertty -
Can't check the docs now, but it was something like:
flickableDirection: Flickable.flickHorizontally
-
@sierdzio
Yes, It worked for me. -
Great! Happy coding :-)