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
StartScreen{}
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
anchors.top: instructions.bottom
clip: true
x: parent.width*0.08; y: parent.height*0.27
width: parent.width*0.5; height: parent.height*0.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
console.log(Logic.bgSource)
}
}
}
}
}
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!
Thanks
↧