Important: Please read the Qt Code of Conduct -

Updating a background image

  • Hello,

    I'm working on a project in which a part of it is allowing the user to select a background image.

    my main.qml is:
    @import QtQuick 2.0

    Rectangle {
    id: main
    Component.onCompleted: SetUpScript.createSpriteObjects();

    SetUpScript.createSpriteObjects() makes the other components of my project which in turn run other qml files

    my StartScreen.qml is:
    @import QtQuick 2.0
    import "SetUp.js" as Logic

    Image {
    id: bgImage
    source: Logic.bgSource
    anchors.centerIn: parent
    anchors.fill: parent

    where Logic.bgSource is a var that holds the url of the default image to be used.
    The default image loads up fine when I run main.
    I then make a list of images from which the user can pick one
    I would've thought that in the MouseArea portion of the code, where Logic.bgSource is changed, the StartScreen{} would also update to the new source?

    The following is in another qml file: SetUpQ2.qml

    @ListView {
    id: listModel
    spacing: 2
    snapMode: ListView.SnapToItem
    boundsBehavior: Flickable.StopAtBounds instructions.bottom
    clip: true
    x: parent.width0.08; y: parent.height0.27
    width: parent.width0.5; height: parent.height0.75
    FolderListModel {
    folder: "../../layout/backgrounds"
    id: folderModel
    nameFilters: [".jpg"]
    sortField: "Name"
    Component {
    id: fileDelegate
    Rectangle {
    id: imgSelect
    width: listModel.width
    0.4; height: listModel.height*0.35

                Image {
                    id: imgName
                    width: parent.width*0.9; height: parent.height*0.9
                    anchors.centerIn: parent
                    fillMode: Image.Stretch
                    source: folderModel.folder + "/" + fileName
                    onSourceChanged: imageModel.append({name: imgName.source})
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            Logic.bgSource = imgName.source
        model: folderModel
        delegate: fileDelegate
        ListModel {
            id: imageModel
        Rectangle {
            id: scrollbar
            x: listModel.width*0.385
            y: listModel.visibleArea.yPosition * listModel.height
            radius: 7
            width: 10
            height: listModel.visibleArea.heightRatio * listModel.height
            opacity: 0.7
            color: "black"

    Any help or clarifications would be awesome!

Log in to reply