Custom Select implementation

[joko]

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 

[joko]

Hi Qt Masters,

Please help me resolve this issue.

Is there a way to capture the signal coming from popped qml item in a StackView?

Thanks.