Results 1 to 12 of 12

Thread: interaction StackView / ListView

  1. #1
    Join Date
    Dec 2015
    Posts
    35
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default interaction StackView / ListView

    Hi EveryBody,

    I created a listView that contains a custom menu, and StackView that contains the pages to load from the custom menu. next image 1.jpg

    I want when I click in 1st element in the SubMenu load the first page, 2nd element load the second page ... etc

    My image :
    1st element=Naissance --- load ----> Page1
    2nd element=Deces --- load ----> Page2
    3rd element --- load ----> Page3
    etc

    Qt Code:
    1. MouseArea {
    2. anchors.fill: parent
    3. hoverEnabled: true
    4.  
    5.  
    6. onClicked: stack.push(view2)
    To copy to clipboard, switch view to plain text mode 

    The probleme is : All elements of SubMenu load view2, and I want each element loads a specific page

    How Can I specify in MouseArea each element of submenu ???

    Cheers,

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: interaction StackView / ListView

    Inside a list view delegate you have access to the model data for that index and the numerical index of the entry.

    Cheers,
    _

  3. #3
    Join Date
    Dec 2015
    Posts
    35
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Wink Re: interaction StackView / ListView

    Thanks,

    I have 2 delegates:
    1 for main menu
    2 for subMenu

    here is my code:
    Qt Code:
    1. ListView {
    2. width: 250
    3. height: root.height
    4. anchors.right: parent.right
    5.  
    6. model: menuModel
    7. delegate: categoryDelegate
    8. boundsBehavior: Flickable.StopAtBounds
    9. }
    10.  
    11. ListModel {
    12. id: menuModel
    13. ListElement {
    14. categoryName: "Acceuil"
    15. collapsed: true
    16.  
    17. // A ListElement can't contain child elements, but it can contain
    18. // a list of elements. A list of ListElements can be used as a model
    19. // just like any other model type.
    20. subItems: [
    21. ListElement { itemName: "1" },
    22. ListElement { itemName: "2" },
    23. ListElement { itemName: "3" },
    24. ListElement { itemName: "4" }
    25. ]
    26. }
    27.  
    28. ListElement {
    29. categoryName: "Compte"
    30. collapsed: true
    31. subItems: [
    32. ListElement { itemName: "1" },
    33. ListElement { itemName: "2" }
    34. ]
    35. }
    36.  
    37. ListElement {
    38. categoryName: "Outils"
    39. collapsed: true
    40. subItems: [
    41. ListElement { itemName: "1" },
    42. ListElement { itemName: "2" },
    43. ListElement { itemName: "3" }
    44. ]
    45. }
    46.  
    47. ListElement {
    48. categoryName: "Statistiques"
    49. collapsed: true
    50. subItems: [
    51. ListElement { itemName: "Naissances" },
    52. ListElement { itemName: "Deces" }
    53. ]
    54. }
    55. ListElement {
    56. categoryName: "Parametres"
    57. collapsed: true
    58. subItems: [
    59. ListElement { itemName: "1" },
    60. ListElement { itemName: "2" }
    61. ]
    62. }
    63. }
    64.  
    65. Component {
    66. id: categoryDelegate
    67. Column {
    68. Rectangle {
    69. id: categoryItem
    70. color: base
    71. border.color: Qt.lighter(color, 1.5)
    72. height: 50
    73. width: 250
    74. Text {
    75. anchors.centerIn: parent
    76. color: "#f2f2f2"
    77. font.pixelSize: 25
    78. text: categoryName
    79. font.family: "MS Reference Sans Serif"
    80. }
    81. Image {
    82. id: fleche
    83. source: "img/fleche.png"
    84. sourceSize.width: 25
    85. sourceSize.height: 25
    86. anchors.left: parent.left
    87. anchors.leftMargin: 6
    88. anchors.verticalCenter: parent.verticalCenter
    89. }
    90. MouseArea {
    91. anchors.fill: parent
    92. hoverEnabled: true
    93.  
    94. // Toggle the 'collapsed' property
    95. onClicked: {
    96. console.log(menuModel.get(1).categoryName)
    97. fleche.rotation+=180
    98. menuModel.setProperty(index, "collapsed", !collapsed)
    99. }
    100. onEntered: categoryItem.color = "#0d0d0d"
    101. onExited: categoryItem.color = base
    102. }
    103. }
    104. Loader {
    105. id: subItemLoader
    106.  
    107. // This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null
    108. // the Loader element retains the same height it had when sourceComponent was set. Setting visible
    109. // to false makes the parent Column treat it as if it's height was 0.
    110. visible: !collapsed
    111. property variant subItemModel : subItems
    112. sourceComponent: collapsed ? null : subItemColumnDelegate
    113. onStatusChanged: if (status == Loader.Ready) item.model = subItemModel
    114. }
    115. }
    116. }
    117. Component {
    118. id: subItemColumnDelegate
    119. Column {
    120. property alias model : subItemRepeater.model
    121. Repeater {
    122. id: subItemRepeater
    123. delegate: Rectangle {
    124. id: rectangle1
    125.  
    126. height: 40
    127. width: 250
    128. color: "#8c8c8c"
    129. border.color: Qt.lighter(color)
    130. //border.width: 2
    131.  
    132. Text {
    133. id: subItemText
    134. //anchors.centerIn: parent
    135. font.pixelSize: 16
    136. text: itemName
    137. anchors.left: parent.left
    138. anchors.leftMargin: 20
    139. anchors.verticalCenter: parent.verticalCenter
    140. }
    141. MouseArea {
    142. anchors.fill: parent
    143. hoverEnabled: true
    144.  
    145. // Toggle the 'collapsed' property
    146. onClicked:{
    147. console.log(menuModel.get(0).categoryName)
    148. stack.push(view2)}
    149.  
    150. onEntered: {
    151. rectangle1.color= "#999999"
    152. subItemText.color = "white"
    153. }
    154. onExited: {
    155. rectangle1.color= "#8c8c8c"
    156. subItemText.color = "black"
    157. }
    158. }
    159. }
    160. }
    161. }
    162. }
    163. StackView{
    To copy to clipboard, switch view to plain text mode 

    Can you add the modifications in the code above to solve the problem

    Cheers,
    Last edited by RegMe; 14th January 2016 at 11:50.

  4. #4
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: interaction StackView / ListView

    I am afraid I don't understand what you mean with "add the modification", you are the only one who knows what a click on such a sub item should do.

    If you want different views to be push onto the stack, make the different delegates call push with different objects.

    Cheers,
    _

  5. #5
    Join Date
    Dec 2015
    Posts
    35
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: interaction StackView / ListView

    Hi anda_skoa,

    I have a mainMenu (Acceuil, Compte, Statistiques, ... ) that does nothing just contain the subMenu
    A subMenu that contains some elements for example : Statistiques contains : Naissances & Deces 1.jpg

    I created a ListView than contains mainMenu and subMenu :
    Qt Code:
    1. ListView {
    2. ...
    3. model: menuModel
    4. delegate: categoryDelegate
    5. }
    6.  
    7. ListModel {
    8. id: menuModel
    9. ListElement {
    10. categoryName: "Acceuil"
    11. collapsed: true
    12.  
    13. // A ListElement can't contain child elements, but it can contain
    14. // a list of elements. A list of ListElements can be used as a model
    15. // just like any other model type.
    16.  
    17. // SubMenu :
    18. subItems: [
    19. ListElement { itemName: "1" },
    20. ListElement { itemName: "2" },
    21. ListElement { itemName: "3" },
    22. ListElement { itemName: "4" }
    23. ]
    24. }
    25.  
    26. ListElement {
    27. categoryName: "Statistiques"
    28. collapsed: true
    29.  
    30. // SubMenu :
    31. subItems: [
    32. ListElement { itemName: "Naissances" },
    33. ListElement { itemName: "Deces" }
    34. ]
    35. }
    36. }
    37. Component {
    38. id: categoryDelegate
    39. Column {
    40. Rectangle {
    41. id: categoryItem
    42. ...
    43. Text {
    44. text: categoryName
    45. }
    46.  
    47. MouseArea {
    48. // Toggle the 'collapsed' property
    49. onClicked: {
    50. menuModel.setProperty(index, "collapsed", !collapsed)
    51. }
    52. }
    53. }
    54. Loader {
    55. id: subItemLoader
    56.  
    57. // This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null
    58. // the Loader element retains the same height it had when sourceComponent was set. Setting visible
    59. // to false makes the parent Column treat it as if it's height was 0.
    60. visible: !collapsed
    61. property variant subItemModel : subItems
    62. sourceComponent: collapsed ? null : subItemColumnDelegate
    63. onStatusChanged: if (status == Loader.Ready) item.model = subItemModel
    64. }
    65. }
    66. }
    67. Component {
    68. id: subItemColumnDelegate
    69. Column {
    70. property alias model : subItemRepeater.model
    71. Repeater {
    72. id: subItemRepeater
    73. delegate: Rectangle {
    74. ...
    75. Text {
    76. text: itemName
    77. }
    78. MouseArea {
    79. // Toggle the 'collapsed' property
    80. onClicked:{
    81. stack.push(view2)}
    82. }
    83. }
    84. }
    85. }
    86. }
    To copy to clipboard, switch view to plain text mode 

    When I click in any subMenu element = load view2 (exp click : Naissances -> load view2 , Deces -> load view2) = normal
    Qt Code:
    1. MouseArea {
    2. // Toggle the 'collapsed' property
    3. onClicked:{
    4. //
    5. stack.push(view2)}
    6. }
    To copy to clipboard, switch view to plain text mode 

    I want that each element of subMenu loads a specific view (exp click : Naissances -> load view1 , Deces -> load view2) ???

    I have one MouseArea that controls all subMenu elements

    How can I do to : onClicked(on Naissance -> view1)
    How can I do to : onClicked(on Deces -> view2)
    Qt Code:
    1. MouseArea {
    2. // Toggle the 'collapsed' property
    3. onClicked:{
    4. // Naissance->stack.push(view1)
    5. // Deces->stack.push(view2)}
    6. }
    To copy to clipboard, switch view to plain text mode 

    It's simple by using buttons (each button -> load a specific view)
    but with ListView

    Cheers

  6. #6
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: interaction StackView / ListView

    As I said before: each instance of the delegate has access to the model data for its index and the index number.

    You could either use an array of views and use model.index to get the one you want or have the correct view as property in your model data or you do switch or if/elseif on model.index

    Cheers,
    _

  7. #7
    Join Date
    Dec 2015
    Posts
    35
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: interaction StackView / ListView

    Hi,

    I solved the problem in mainMenu by using :
    Qt Code:
    1. MouseArea {
    2. ...
    3. onClicked:{
    4. switch(index) {
    5. case 0:
    6. stack.push(view11)
    7. break;
    8. case 1:
    9. stack.push(view12)
    10. break;
    11. case 2:
    12. stack.push(view13)
    13. break;
    14. case 3:
    15. stack.push(view14)
    16. break;
    17. case 4:
    18. stack.push(view15)
    19. break;
    20. }
    21. }
    To copy to clipboard, switch view to plain text mode 

    I have some problems in subMenu :
    Qt Code:
    1. MouseArea {
    2. ...
    3. onClicked:{
    4. // The first element of mainMenu contains 4 elements of subMenu
    5. if(menuModel.get(0)){
    6. switch(index) {
    7. case 0:
    8. stack.push(view1)
    9. break;
    10. case 1:
    11. stack.push(view2)
    12. break;
    13. case 2:
    14. stack.push(view3)
    15. break;
    16. case 3:
    17. stack.push(view4)
    18. break;
    19. }
    20. }
    21.  
    22. // The 2nd element of mainMenu contains 2 elements of subMenu
    23. if(menuModel.get(1)){
    24. console.log(index)
    25. switch(index) {
    26. case 0:
    27. stack.push(view5)
    28. break;
    29. case 1:
    30. stack.push(view6)
    31. break;
    32. }
    33. }
    To copy to clipboard, switch view to plain text mode 
    When I clicked in 1st element [subMenu] of 1st element [mainMenu], next image 2.jpg --> load Page 5 however you should load Page 1, the same for 2nd element [subMenu] of 1st element [mainMenu] --> load Page 6 however you should load Page 2, because of expression in code above (e.g):
    Qt Code:
    1. // The 2nd element of mainMenu contains 2 elements of subMenu
    2. if(menuModel.get(1)){
    3. console.log(index)
    4. switch(index) {
    5. case 0:
    6. stack.push(view5)
    7. break;
    8. case 1:
    9. stack.push(view6)
    10. break;
    To copy to clipboard, switch view to plain text mode 

    I think that I did some thing wrong in if condition, any idea to solve this ???

    Cheers,

  8. #8
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: interaction StackView / ListView

    You are calling get() on the model, which returns a reference to the object in the model, which is always true.

    What you want is to let the sub menu delegates know to which main menu item they belong.
    E.g. you could store the current main menu delegete index in the sub item delegetes as part of the initialization in the loader, like you currently do for the model.

    Cheers,
    _

  9. #9
    Join Date
    Dec 2015
    Posts
    35
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: interaction StackView / ListView

    Hii,
    Quote Originally Posted by anda_skoa View Post
    you could store the current main menu delegete index in the sub item delegetes as part of the initialization in the loader
    _
    How can I do it, Could you give me an example ??

    Qt Code:
    1. Component {
    2. // main menu delegete
    3. id: categoryDelegate
    4. Column {
    5. Rectangle {
    6. ...
    7. MouseArea {
    8.  
    9. onClicked: {
    10. console.log(menuModel.get(index))
    11. }
    12. }
    13. }
    14. Loader {
    15. id: subItemLoader
    16.  
    17. // This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null
    18. // the Loader element retains the same height it had when sourceComponent was set. Setting visible
    19. // to false makes the parent Column treat it as if it's height was 0.
    20. visible: !collapsed
    21. property variant subItemModel : subItems
    22. sourceComponent: collapsed ? null : subItemColumnDelegate
    23. onStatusChanged: if (status == Loader.Ready) item.model = subItemModel
    24. }
    25. }
    26. }
    27. Component {
    28. // sub menu delegete
    29. id: subItemColumnDelegate
    30. Column {
    31. property alias model : subItemRepeater.model
    32. Repeater {
    33. id: subItemRepeater
    34. delegate: Rectangle {
    35. ...
    36. MouseArea {
    37. onClicked:{
    38. if(menuModel.get(index)){
    39. switch(index) {
    40. case 0:
    41. stack.push(view1)
    42. break;
    43. case 1:
    44. stack.push(view2)
    45. break;
    46. }
    47. }
    48. }
    49. }
    50. }
    To copy to clipboard, switch view to plain text mode 

    Cheers,

  10. #10
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: interaction StackView / ListView

    Quote Originally Posted by RegMe View Post
    How can I do it, Could you give me an example ??
    Your code already has an example of a property in the delegate that is set from the loader, no?
    Just that in this case it won't be an alias to a property of a delegate child, but a normal custom property of type int.

    Cheers,
    _

  11. #11
    Join Date
    Dec 2015
    Posts
    35
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: interaction StackView / ListView

    Hello,

    I have an other question :
    When I 'open' an element of main menu --> I get list of elements of sub menu
    I want when I 'open' an other element of main menu the, 1st must 'close' automatically . see the image : 4.jpg

    Main menu MouseArea:
    Qt Code:
    1. MouseArea {
    2. anchors.fill: parent
    3. hoverEnabled: true
    4.  
    5. // Toggle the 'collapsed' property
    6. onClicked: {
    7. fleche.rotation+=180
    8. menuModel.setProperty(index, "collapsed", !collapsed)
    9. }
    10. onEntered: categoryItem.color = "#0d0d0d"
    11. onExited: categoryItem.color = base
    12. }
    To copy to clipboard, switch view to plain text mode 

    Cheers,

  12. #12
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: interaction StackView / ListView

    Iterate over the number of main menu items, casll setProperty with value "false" for all but the one that is "index".

    Cheers,
    _

Similar Threads

  1. ListView - ListView communication
    By MarkoSan in forum Qt Quick
    Replies: 1
    Last Post: 30th October 2015, 11:18
  2. StackView get index or views page
    By KeineAhnung in forum Newbie
    Replies: 2
    Last Post: 18th November 2014, 23:03
  3. Any example of StackView?
    By stereoMatching in forum Qt Quick
    Replies: 1
    Last Post: 16th December 2013, 09:07
  4. QML and C++ interaction
    By cueMan in forum Qt Programming
    Replies: 3
    Last Post: 11th November 2010, 08:30
  5. Qt interaction with X11
    By qwakaw in forum Qt Programming
    Replies: 1
    Last Post: 28th December 2008, 21:17

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.