How to stop loading single image mutltiple times on a screen
-
Please provide some code sample, it's hard to know what you mean just from this description.
-
Here is some code
Loader { focus: true anchors{ --------------------------- } asynchronous: true Binding { target: loader.item property: "focus" value: container.activeFocus } Image { id: img objectName: "img" asynchronous: true source: (*.png") fillMode: Image.PreserveAspectFit anchors{ horizontalCenter: parent.horizontalCenter verticalCenter: parent.verticalCenter } } }
Here I am using an Image inside a loader. the loader is trying to load image as manay has the buttons on the screen. I just want to load only one image on the screen. how can I do it
-
Here is some code
Loader { focus: true anchors{ --------------------------- } asynchronous: true Binding { target: loader.item property: "focus" value: container.activeFocus } Image { id: img objectName: "img" asynchronous: true source: (*.png") fillMode: Image.PreserveAspectFit anchors{ horizontalCenter: parent.horizontalCenter verticalCenter: parent.verticalCenter } } }
Here I am using an Image inside a loader. the loader is trying to load image as manay has the buttons on the screen. I just want to load only one image on the screen. how can I do it
-
Nothing in this snippet suggests how buttons are connected to the Image component. Actually, no buttons are shown in the snippet at all.
Is
source
orsourceComponent
set anywhere for the Loader? I don't see it. It is a big unusual to position a non-loaded component (in your case, Image) inside a Loader.source: (*.png")
what's that about? Does not look like valid code.I'm sorry but this code is not enough to determine your problem. We need to know how you instantiate your buttons, and what is the connection between the image and buttons.
-
@RG90 said in How to stop loading single image mutltiple times on a screen:
source: R_URL
sourceComponent: dividerSixYou are setting your Image (dividerSix) in each delegate. So, each time that new delegate is instantiated, a new Image will be loaded.
By the way, you should not set
source
andsourceComponent
at the same time. Pick either one (you probably only need R_URL in your case). -
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 { ... } } }
-
OK, so you wanted a scrollable/ flickable control, not to drag items around.
Fine, I'm happy you've got it to work :-)
-
Can't check the docs now, but it was something like:
flickableDirection: Flickable.flickHorizontally
-
Great! Happy coding :-)