How to stop loading single image mutltiple times on a screen

RG90

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

RG90

@sierdzio

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

sierdzio

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 or sourceComponent 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

This post is deleted!

sierdzio

@RG90 said in How to stop loading single image mutltiple times on a screen:

source: R_URL
sourceComponent: dividerSix

You 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 and sourceComponent at the same time. Pick either one (you probably only need R_URL in your case).

RG90

This post is deleted!

RG90

@sierdzio
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. Can you help me on this.

Thanks

RG90

@sierdzio

GridView
{
signal buttonAction(int index, int action)

property int itemWidth: 195
property int itemHeight: 80

id: view
objectName: "view"

focus: true

anchors.fill: parent

cellHeight: view.height / 2
cellWidth: view.width / 3
flow: GridView.FlowTopToBottom

Component{

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

sierdzio

@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?

RG90

@sierdzio

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?.

sierdzio

@RG90 said in How to stop loading single image mutltiple times on a screen:

@sierdzio

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 { ... }
  }
}

RG90

Thanks @sierdzio for your suggestion. my issue has been solved. I just used GridView inside a Flickable, which made much easier to me.

sierdzio

OK, so you wanted a scrollable/ flickable control, not to drag items around.

Fine, I'm happy you've got it to work :-)

RG90

@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

sierdzio

Can't check the docs now, but it was something like:

flickableDirection: Flickable.flickHorizontally

RG90

@sierdzio
Yes, It worked for me.

sierdzio

Great! Happy coding :-)