Hi,
I would like to seek help regarding my implementation of custom select/dropdown the same in ios 8
a) I created a CustomSelect.qml and CustomSelectItems.qml
b) I used CustomSelect component in other qml pages
Page1.qml
// the parent of this page has a StackView
Item {
Component.onCompleted {
textSelect.setValue("en");
}
CustomSelect {
id: textSelect
model: ListModel {
ListElement {
item: "English"
value: "en"
icon: "flag-en.png"
}
ListElement {
item: "German"
value: "de"
icon: "flag-de.png"
}
}
}
}
// the parent of this page has a StackView
Item {
Component.onCompleted {
textSelect.setValue("en");
}
CustomSelect {
id: textSelect
model: ListModel {
ListElement {
item: "English"
value: "en"
icon: "flag-en.png"
}
ListElement {
item: "German"
value: "de"
icon: "flag-de.png"
}
}
}
}
To copy to clipboard, switch view to plain text mode
CustomSelect.qml
//displays the current selected item
Item {
id: select
property ListModel model
property int currentIndex
function setValue(value) {
for (var i=0; i<select.model.count; ++i)
{
if (model.get(i).value === value)
{
select.currentIndex = i;
break;
}
}
}
Row {
Image {
id: icon
source: select.model.get(select.currentIndex).icon
}
Text {
id: value
text: select.model.get(select.currentIndex).item
}
}
MouseArea {
anchors.fill: parent
onClicked: {
//i want to show the select items page in the entire Page1.qml
}
}
}
//displays the current selected item
Item {
id: select
property ListModel model
property int currentIndex
function setValue(value) {
for (var i=0; i<select.model.count; ++i)
{
if (model.get(i).value === value)
{
select.currentIndex = i;
break;
}
}
}
Row {
Image {
id: icon
source: select.model.get(select.currentIndex).icon
}
Text {
id: value
text: select.model.get(select.currentIndex).item
}
}
MouseArea {
anchors.fill: parent
onClicked: {
//i want to show the select items page in the entire Page1.qml
}
}
}
To copy to clipboard, switch view to plain text mode
I wanted to push the CustomSelectItems.qml into Page1's parent stack, however i'm not sure if it is possible to get the CustomSelect parent's stackview.
Determining the CustomSelect parent should be dynamic because it will be used into another pages also with different stackview.
I tried putting a stackView on CustomSelect and push the CustomSelectItems, however i'm having problem displaying it on top of Page1.
CustomSelectItems.qml
//used to display items from the model
ListView {
id: selectList
property alias listModel: selectList.model
property alias currentIndex: selectList.currentIndex
delegate: Row {
Image {
id: icon
source: model.icon
}
Text {
id: value
text: model.item
}
}
}
//used to display items from the model
ListView {
id: selectList
property alias listModel: selectList.model
property alias currentIndex: selectList.currentIndex
delegate: Row {
Image {
id: icon
source: model.icon
}
Text {
id: value
text: model.item
}
}
}
To copy to clipboard, switch view to plain text mode
Please advise. I hope my explanation is clear. Thanks.
Added after 1 32 minutes:
I tried to create a signal on CustomSelect and used it to push the CustomSelectItems page, however I'm having problem how to return the currentIndex of the list view to update the value of CustomSelect
Page1.qml
Item {
Component.onCompleted {
textSelect.setValue("en");
}
CustomSelect {
id: textSelect
model: ListModel {
ListElement {
item: "English"
value: "en"
icon: "flag-en.png"
}
ListElement {
item: "German"
value: "de"
icon: "flag-de.png"
}
}
onClicked: {
mainStack.push({item:Qt.resolvedUrl("CustomSelectItems.qml"), properties:{listModel: textSelect.model, currentIndex: textSelect.currentIndex}})
}
}
}
Item {
Component.onCompleted {
textSelect.setValue("en");
}
CustomSelect {
id: textSelect
model: ListModel {
ListElement {
item: "English"
value: "en"
icon: "flag-en.png"
}
ListElement {
item: "German"
value: "de"
icon: "flag-de.png"
}
}
onClicked: {
mainStack.push({item:Qt.resolvedUrl("CustomSelectItems.qml"), properties:{listModel: textSelect.model, currentIndex: textSelect.currentIndex}})
}
}
}
To copy to clipboard, switch view to plain text mode
Bookmarks