Results 1 to 7 of 7

Thread: qml listView key navigation not working setting focus: true

  1. #1
    Join Date
    Jun 2016
    Posts
    99
    Thanks
    18
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default qml listView key navigation not working setting focus: true

    not able to navigate through list view using up/down arrows.... as far as I can tell setting focus: true should enable keyboard navigation?

    Qt Code:
    1. Component {
    2. id: msgDelegate
    3. Item {
    4. id: active_eventMsg
    5. anchors.left: parent.left
    6. anchors.leftMargin: 5
    7. anchors.right: parent.right
    8. anchors.rightMargin:5
    9. height: 30
    10. Keys.onUpPressed: listView.incrementCurrentIndex()
    11. Keys.onDownPressed: listView.decrementCurrentIndex()
    12. MouseArea {
    13. anchors.fill: parent
    14. onClicked: listView.currentIndex = index
    15. }
    16. Rectangle{
    17. id: id_rect
    18. anchors.top: parent.top
    19. anchors.left: parent.left
    20. anchors.leftMargin: 2
    21. width: id_col.width
    22. height: parent.height
    23. color: "#00000000"
    24. Text {
    25. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    26. anchors.fill: parent
    27. verticalAlignment: Text.AlignVCenter
    28. horizontalAlignment: Text.AlignLeft
    29. text: id;
    30. font.pixelSize: 18
    31. }
    32. }
    33. Rectangle{
    34. id: userName_rect
    35. anchors.top: parent.top
    36. anchors.left: id_rect.right
    37. anchors.leftMargin: 2
    38. width: userName_col.width
    39. height: parent.height
    40. color: "#00000000"
    41. Text {
    42. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    43. anchors.fill: parent
    44. anchors.leftMargin: 2
    45. verticalAlignment: Text.AlignVCenter
    46. horizontalAlignment: Text.AlignLeft
    47. text: userName;
    48. font.pixelSize: 18
    49. }
    50. }
    51. Rectangle{
    52. id: eventMsg_rect
    53. anchors.top: parent.top
    54. anchors.left: userName_rect.right
    55. anchors.leftMargin: 2
    56. width: eventMsg_col.width
    57. height: parent.height
    58. color: "#00000000"
    59. Text {
    60. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    61. anchors.fill: parent
    62. anchors.leftMargin: 2
    63. verticalAlignment: Text.AlignVCenter
    64. horizontalAlignment: Text.AlignLeft
    65. text: eventMessage;
    66. font.pixelSize: 18
    67. }
    68. }
    69. Rectangle{
    70. id: dateTime_rect
    71. anchors.top: parent.top
    72. anchors.left: eventMsg_rect.right
    73. anchors.leftMargin: 2
    74. width: dateTime_col.width
    75. anchors.right: parent.right
    76. height: parent.height
    77. color: "#00000000"
    78. Text {
    79. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    80. anchors.fill: parent
    81. anchors.leftMargin: 2
    82. verticalAlignment: Text.AlignVCenter
    83. horizontalAlignment: Text.AlignLeft
    84. text: dateTime;
    85. font.pixelSize: 18
    86. }
    87. }
    88. }
    89. }
    90. Rectangle {
    91. id: listView_rect
    92. radius: 8
    93. anchors.top: eventMsg_panel.bottom
    94. anchors.topMargin: 2
    95. anchors.bottom: parent.bottom
    96. anchors.bottomMargin: 65
    97. anchors.left:parent.left
    98. anchors.leftMargin: 5
    99. anchors.right:parent.right
    100. anchors.rightMargin: 6
    101. border{
    102. color: "black"
    103. width: 3
    104. }
    105. ScrollView{
    106. id: userEvent_scrollView
    107. anchors.fill: parent
    108. anchors.bottomMargin: 2
    109. anchors.topMargin: 2.5
    110. anchors.rightMargin: 2
    111. anchors.leftMargin: 2.5
    112. flickableItem.interactive: true
    113. ListView {
    114. id: listView
    115. anchors.fill: parent
    116. model: UserEventLog
    117. delegate: msgDelegate
    118. keyNavigationWraps: true
    119. //KeyNavigation: true
    120.  
    121. //Keys.onUpPressed: listView.incrementCurrentIndex()
    122. //Keys.onDownPressed: listView.decrementCurrentIndex()
    123.  
    124. highlight: Rectangle{
    125. width: parent.width
    126. radius: 7;
    127. color: "red"
    128. }
    129. focus: true
    130. orientation : "Vertical"
    131. snapMode: ListView.SnapToItem
    132. boundsBehavior: Flickable.StopAtBounds
    133. clip: true;
    134. }
    135. }
    136. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by jfinn88; 27th September 2016 at 20:15.

  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: qml listView key navigation not working setting focus: true

    Yes, that should work.

    But maybe something else has the active focus.
    Try forceActiveFocus() on the list view, e.g. in Component.onCompleted

    Cheers,
    _

  3. #3
    Join Date
    Jun 2016
    Posts
    99
    Thanks
    18
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default Re: qml listView key navigation not working setting focus: true

    okay I was wondering what was going on...

    I'm confused where to call this in my code... listView loads the component so would you call it in list view?

    Qt Code:
    1. Component.onCompleted: {
    2. listView.forceActiveFocus()
    3. }
    To copy to clipboard, switch view to plain text mode 

    update: not sure where to place onCompleted signal

    Qt Code:
    1. Component {
    2. id: msgDelegate
    3. Item {
    4. id: active_eventMsg
    5. anchors.left: parent.left
    6. anchors.leftMargin: 5
    7. anchors.right: parent.right
    8. anchors.rightMargin:5
    9. height: 30
    10. Component.onCompleted:{
    11. listView.forceActiveFocus()
    12. }
    13. MouseArea {
    14. anchors.fill: parent
    15. onClicked: {
    16. listView.currentIndex = index
    17. //listView.forceActiveFocus()
    18. console.log("active focus: "+activeFocus);
    19. }
    20. }
    21. Rectangle{
    22. id: id_rect
    23. anchors.top: parent.top
    24. anchors.left: parent.left
    25. anchors.leftMargin: 2
    26. width: id_col.width
    27. height: parent.height
    28. color: "#00000000"
    29. Text {
    30. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    31. anchors.fill: parent
    32. verticalAlignment: Text.AlignVCenter
    33. horizontalAlignment: Text.AlignLeft
    34. text: id;
    35. font.pixelSize: 18
    36. }
    37. }
    38. Rectangle{
    39. id: userName_rect
    40. anchors.top: parent.top
    41. anchors.left: id_rect.right
    42. anchors.leftMargin: 2
    43. width: userName_col.width
    44. height: parent.height
    45. color: "#00000000"
    46. Text {
    47. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    48. anchors.fill: parent
    49. anchors.leftMargin: 2
    50. verticalAlignment: Text.AlignVCenter
    51. horizontalAlignment: Text.AlignLeft
    52. text: userName;
    53. font.pixelSize: 18
    54. }
    55. }
    56. Rectangle{
    57. id: eventMsg_rect
    58. anchors.top: parent.top
    59. anchors.left: userName_rect.right
    60. anchors.leftMargin: 2
    61. width: eventMsg_col.width
    62. height: parent.height
    63. color: "#00000000"
    64. Text {
    65. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    66. anchors.fill: parent
    67. anchors.leftMargin: 2
    68. verticalAlignment: Text.AlignVCenter
    69. horizontalAlignment: Text.AlignLeft
    70. text: eventMessage;
    71. font.pixelSize: 18
    72. }
    73. }
    74. Rectangle{
    75. id: dateTime_rect
    76. anchors.top: parent.top
    77. anchors.left: eventMsg_rect.right
    78. anchors.leftMargin: 2
    79. width: dateTime_col.width
    80. anchors.right: parent.right
    81. height: parent.height
    82. color: "#00000000"
    83. Text {
    84. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    85. anchors.fill: parent
    86. anchors.leftMargin: 2
    87. verticalAlignment: Text.AlignVCenter
    88. horizontalAlignment: Text.AlignLeft
    89. text: dateTime;
    90. font.pixelSize: 18
    91. }
    92. }
    93. }
    94. }
    95. Rectangle {
    96. id: listView_rect
    97. radius: 8
    98. anchors.top: eventMsg_panel.bottom
    99. anchors.topMargin: 2
    100. anchors.bottom: parent.bottom
    101. anchors.bottomMargin: 65
    102. anchors.left:parent.left
    103. anchors.leftMargin: 5
    104. anchors.right:parent.right
    105. anchors.rightMargin: 6
    106. border{
    107. color: "black"
    108. width: 3
    109. }
    110. ScrollView{
    111. id: userEvent_scrollView
    112. anchors.fill: parent
    113. anchors.bottomMargin: 2
    114. anchors.topMargin: 2.5
    115. anchors.rightMargin: 2
    116. anchors.leftMargin: 2.5
    117. flickableItem.interactive: true
    118. ListView {
    119. id: listView
    120. anchors.fill: parent
    121. model: UserEventLog
    122. delegate: msgDelegate
    123. keyNavigationWraps: true
    124. highlight: Rectangle{
    125. width: parent.width
    126. radius: 7;
    127. color: "red"
    128. }
    129. focus: true
    130. orientation : "Vertical"
    131. snapMode: ListView.SnapToItem
    132. boundsBehavior: Flickable.StopAtBounds
    133. clip: true;
    134. }
    135. // Component.onCompleted:{
    136. // listView.forceActiveFocus()
    137. // }
    138. }
    139. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by jfinn88; 27th September 2016 at 23:02.

  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: qml listView key navigation not working setting focus: true

    I would put it either in the outermost item, as you have, or into the ListView itself.

    Cheers,
    _

  5. #5
    Join Date
    Jun 2016
    Posts
    99
    Thanks
    18
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default Re: qml listView key navigation not working setting focus: true

    I tried both those... still doesn't seem to get focus... I did find a slight work around by placing the key navigation above the listView item.... in my Component (delegate).

    I check to see if the listView has active focus it returns true but when I comment out my key calls I can't navigate in list view. Documentation claims that focus just needs to be active to use key navigation...

    below you see some commented out code that’s some of the different ways I have tired to get key navigation for the listView enabled

    updated code:

    Qt Code:
    1. //---User Event log Component---//
    2. Item {
    3. visible: true
    4. id:userevent_item
    5. enabled: true
    6. // Component.onCompleted: {
    7. // listView.forceActiveFocus();
    8. // console.log("Outer Item onCompleted activeFocus: "+activeFocus)
    9. // }
    10. Rectangle {
    11. id: view_rect
    12. anchors.centerIn: parent
    13. width: 1100
    14. height: 600
    15. radius: 10
    16. border.width:4
    17. border.color: "black"
    18. layer.enabled: true
    19. enabled: true
    20. focus:true
    21.  
    22. Component.onCompleted: {
    23. UserEventLog.init();
    24. // listView.forceActiveFocus();
    25. // console.log("viewRect onCompleted activeFocus: "+activeFocus)
    26. }
    27.  
    28.  
    29. FocusScope{
    30. anchors.fill:parent
    31. focus: true
    32. Label {
    33. id: userEventTitle_label
    34. color: "#000000"
    35. text: qsTr("User Event Log")
    36. anchors.top: parent.top
    37. anchors.topMargin: 5
    38. anchors.horizontalCenter: parent.horizontalCenter
    39. anchors.verticalCenter: parent.verticalCenter
    40. horizontalAlignment: Text.AlignLeft
    41. font.pointSize: 22
    42. font.bold: true
    43. }
    44.  
    45. Component {
    46. id: msgDelegate
    47. Item {
    48. id: active_eventMsg
    49. focus: true
    50. anchors.left: parent.left
    51. anchors.leftMargin: 5
    52. anchors.right: parent.right
    53. anchors.rightMargin:5
    54. height: 30
    55. Keys.onDownPressed: listView.incrementCurrentIndex()
    56. Keys.onUpPressed: listView.decrementCurrentIndex()
    57. KeyNavigation.tab: userNameTextField
    58. Component.onCompleted: {
    59. listView.forceActiveFocus();
    60. console.log("msgDelegate onCompleted activeFocus: "+listView.activeFocus)
    61. }
    62. Rectangle{
    63. id: id_rect
    64. anchors.top: parent.top
    65. anchors.left: parent.left
    66. anchors.leftMargin: 2
    67. width: id_col.width
    68. height: parent.height
    69. color: "#00000000"
    70. Text {
    71. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    72. anchors.fill: parent
    73. verticalAlignment: Text.AlignVCenter
    74. horizontalAlignment: Text.AlignLeft
    75. text: id;
    76. font.pixelSize: 18
    77. }
    78. }
    79. Rectangle{
    80. id: userName_rect
    81. anchors.top: parent.top
    82. anchors.left: id_rect.right
    83. anchors.leftMargin: 2
    84. width: userName_col.width
    85. height: parent.height
    86. color: "#00000000"
    87. Text {
    88. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    89. anchors.fill: parent
    90. anchors.leftMargin: 2
    91. verticalAlignment: Text.AlignVCenter
    92. horizontalAlignment: Text.AlignLeft
    93. text: userName;
    94. font.pixelSize: 18
    95. }
    96. }
    97. Rectangle{
    98. id: eventMsg_rect
    99. anchors.top: parent.top
    100. anchors.left: userName_rect.right
    101. anchors.leftMargin: 2
    102. width: eventMsg_col.width
    103. height: parent.height
    104. color: "#00000000"
    105. Text {
    106. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    107. anchors.fill: parent
    108. anchors.leftMargin: 2
    109. verticalAlignment: Text.AlignVCenter
    110. horizontalAlignment: Text.AlignLeft
    111. text: eventMessage;
    112. font.pixelSize: 18
    113. }
    114. }
    115. Rectangle{
    116. id: dateTime_rect
    117. anchors.top: parent.top
    118. anchors.left: eventMsg_rect.right
    119. anchors.leftMargin: 2
    120. width: dateTime_col.width
    121. anchors.right: parent.right
    122. height: parent.height
    123. color: "#00000000"
    124. Text {
    125. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    126. anchors.fill: parent
    127. anchors.leftMargin: 2
    128. verticalAlignment: Text.AlignVCenter
    129. horizontalAlignment: Text.AlignLeft
    130. text: dateTime;
    131. font.pixelSize: 18
    132. }
    133. }
    134. }
    135. }
    136.  
    137. Rectangle {
    138. id: listView_rect
    139. focus: true
    140. radius: 8
    141. anchors.top: eventMsg_panel.bottom
    142. anchors.topMargin: 2
    143. anchors.bottom: parent.bottom
    144. anchors.bottomMargin: 65
    145. anchors.left:parent.left
    146. anchors.leftMargin: 5
    147. anchors.right:parent.right
    148. anchors.rightMargin: 6
    149. //Keys.onPressed: console.log("key pressed activeFocus: ", activeFocus)
    150. //Keys.onDownPressed: listView.incrementCurrentIndex()
    151. //Keys.onUpPressed: listView.decrementCurrentIndex()
    152. border{
    153. color: "black"
    154. width: 3
    155. }
    156. ScrollView{
    157. id: userEvent_scrollView
    158. anchors.fill: parent
    159. anchors.bottomMargin: 2
    160. anchors.topMargin: 2.5
    161. anchors.rightMargin: 2
    162. anchors.leftMargin: 2.5
    163. flickableItem.interactive: true
    164. //Keys.onPressed: console.log("scrollView key pressed activeFocus: ", activeFocus)
    165. //Keys.onDownPressed: listView.incrementCurrentIndex()
    166. //Keys.onUpPressed: listView.decrementCurrentIndex()
    167. ListView {
    168. id: listView
    169. focus: true
    170. anchors.fill: parent
    171. model: UserEventLog
    172. delegate: msgDelegate
    173. keyNavigationWraps: true
    174. KeyNavigation.tab: userNameTextField
    175. orientation : "Vertical"
    176. snapMode: ListView.SnapToItem
    177. boundsBehavior: Flickable.StopAtBounds
    178. clip: true;
    179. highlightMoveVelocity: 2000
    180. highlight: Rectangle{
    181. radius: 7;
    182. color: "red"
    183. }
    184. Component.onCompleted: {
    185. listView.forceActiveFocus();
    186. console.log("listView onCompleted activeFocus: "+activeFocus)
    187. }
    188. //Keys.onPressed: console.log("listView key pressed activeFocus: ", activeFocus)
    189. //Keys.onDownPressed: listView.incrementCurrentIndex()
    190. //Keys.onUpPressed: listView.decrementCurrentIndex()
    191. }
    192. }
    193. }
    194. }
    195. }
    196. }
    197. //---------------------------End of User Event Log Component-------------------------------//
    To copy to clipboard, switch view to plain text mode 
    Last edited by jfinn88; 28th September 2016 at 20:37.

  6. #6
    Join Date
    Jun 2016
    Posts
    99
    Thanks
    18
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default Re: qml listView key navigation not working setting focus: true

    only thing I cant think of that might mess with it is I have to mess with the focus in my textFIelds and buttons that controll the list view ... I cant fit all my code in one post my qml file is too large
    Qt Code:
    1. RowLayout {
    2. id: row1
    3. y: 545
    4. anchors.horizontalCenter: parent.horizontalCenter
    5. anchors.bottom: parent.bottom
    6. anchors.left: parent.left
    7. anchors.leftMargin: 10
    8. anchors.rightMargin: 5
    9. anchors.bottomMargin: 5
    10. spacing: 10
    11. width: 1032
    12. height: 50;
    13. Label {
    14. id: userNameLabel
    15. width: 35
    16. height: 25
    17. color: "white";
    18. text: qsTr("User Name")
    19. font.pointSize: 12
    20. }
    21. TextField {
    22. id: userNameTextField
    23. style: TextFieldUserLogStyle {}
    24. placeholderText: qsTr("User Name")
    25. KeyNavigation.tab: beginDateTextField
    26. Keys.onReturnPressed: {
    27. beginDateTextField.focus = true;
    28. beginDateTextField.selectAll();
    29. }
    30. }
    31. Label {
    32. id: beginDateTextLabel
    33. width: 35
    34. height: 25
    35. color: "white";
    36. text: qsTr("Begin Date")
    37. font.pointSize: 12
    38. }
    39. TextField {
    40. id: beginDateTextField
    41. style: TextFieldUserLogStyle {}
    42. placeholderText: qsTr("yyyy-mm-dd")
    43. KeyNavigation.tab: endDateTextField
    44. Keys.onReturnPressed: {
    45. endDateTextField.forceActiveFocus();
    46. endDateTextField.selectAll();
    47. }
    48. onFocusChanged: {
    49. if(calendarRect1.visible == false){
    50. calendarRect1.visible = true
    51. beginDateTextField.focus = true;
    52. beginDateTextField.selectAll();
    53. }
    54. }
    55.  
    56. Image{
    57. id: beginDateImage
    58. width: 30
    59. height: 40
    60. anchors.right: parent.right
    61. anchors.verticalCenter: parent.verticalCenter
    62. anchors.rightMargin: 3
    63. source:"Calendar3.png"
    64. MouseArea {
    65. anchors.fill:parent
    66. onClicked: {
    67. if(calendarRect1.visible == false){
    68. calendarRect1.visible = true
    69. }
    70. else if(calendarRect1.visible == true){
    71. calendarRect1.visible = false
    72. }
    73. }
    74. }
    75. }
    76. }
    77. Label {
    78. id: endDateTextLabel
    79. width: 35
    80. height: 25
    81. color: "white";
    82. text: qsTr("End Date")
    83. font.pointSize: 12
    84. }
    85. TextField {
    86. id: endDateTextField
    87. style: TextFieldUserLogStyle {}
    88. placeholderText: qsTr("yyyy-mm-dd")
    89. KeyNavigation.tab: searchBtn
    90. Keys.onReturnPressed: {
    91. action_search.trigger();
    92. endDateTextField.focus = false;
    93. }
    94. onFocusChanged: {
    95. if(calendarRect2.visible == false){
    96. calendarRect2.visible = true
    97. endDateTextField.focus = true;
    98. endDateTextField.selectAll();
    99. }
    100. }
    101. Image{
    102. id: endDateImage
    103. width: 30
    104. height: 40
    105. anchors.right: parent.right
    106. anchors.verticalCenter: parent.verticalCenter
    107. anchors.rightMargin: 3
    108. source:"Calendar3.png"
    109. MouseArea {
    110. anchors.fill:parent
    111. onClicked: {
    112. if(calendarRect2.visible == false){
    113. calendarRect2.visible = true
    114. }
    115. else if(calendarRect2.visible == true){
    116. calendarRect2.visible = false
    117. }
    118. }
    119. }
    120. }
    121. }
    122. Button {
    123. id: searchBtn
    124. text: qsTr("Search")
    125. action: action_search
    126. opacity: !action.enabled ? .3 : 1.0
    127. KeyNavigation.tab: resetBtn
    128. //---Sets button Formatting---//
    129. style: ButtonStyle {
    130. background: Rectangle {
    131. implicitWidth: 90
    132. implicitHeight: 45
    133. anchors.fill:parent
    134. radius: 8
    135. color: "#f9f9f9"
    136. border.color: control.activeFocus ? "yellow" : "#242424"
    137. border.width: control.activeFocus ? 4 : 1
    138. //---Changes butotn color when pressed--//
    139. gradient: Gradient {
    140. GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    141. GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    142. }
    143. //---Sets button Image---//
    144. Image{
    145. width: 24
    146. height: 24
    147. anchors.verticalCenter: parent.verticalCenter
    148. anchors.left: parent.left
    149. anchors.leftMargin: 5
    150. source:"button_ok.png"
    151. }
    152. }
    153. }
    154. }
    155. Button {
    156. id: resetBtn
    157. text: qsTr("Reset")
    158. action: action_reset
    159. opacity: !action.enabled ? .3 : 1.0
    160. KeyNavigation.tab: exitBtn
    161. //---Sets button Formatting---//
    162. style: ButtonStyle {
    163. background: Rectangle {
    164. implicitWidth: 90
    165. implicitHeight: 45
    166. anchors.fill:parent
    167. radius: 8
    168. color: "#f9f9f9"
    169. border.color: control.activeFocus ? "yellow" : "#242424"
    170. border.width: control.activeFocus ? 4 : 1
    171. //---Changes butotn color when pressed--//
    172. gradient: Gradient {
    173. GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    174. GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    175. }
    176. //---Sets button Image---//
    177. Image{
    178. width: 24
    179. height: 24
    180. anchors.verticalCenter: parent.verticalCenter
    181. anchors.left: parent.left
    182. anchors.leftMargin: 5
    183. source:"return.png"
    184. }
    185. }
    186. }
    187. }
    188. Button {
    189. id: exitBtn
    190. text: qsTr("Exit")
    191. action: action_exit
    192. //---Opacity Greys out button---//
    193. opacity: !action.enabled ? .3 : 1.0
    194. KeyNavigation.tab: userNameTextField
    195. //---Sets button Formatting---//
    196. style: ButtonStyle {
    197. background: Rectangle {
    198. implicitWidth: 90
    199. implicitHeight: 45
    200. anchors.fill:parent
    201. radius: 8
    202. color: "#f9f9f9"
    203. border.color: control.activeFocus ? "yellow" : "#242424"
    204. border.width: control.activeFocus ? 4 : 1
    205. //---Changes butotn color when pressed--//
    206. gradient: Gradient {
    207. GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    208. GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    209. }
    210. //---Sets button Image---//
    211. Image{
    212. width: 24
    213. height: 24
    214. anchors.verticalCenter: parent.verticalCenter
    215. anchors.left: parent.left
    216. anchors.leftMargin: 5
    217. source:"button_cancel.png"
    218. }
    219. }
    220. }
    221. }
    222. }
    223. }
    To copy to clipboard, switch view to plain text mode 


    Added after 1:


    Here is what I have come up with as a work around...

    I'm guess this is a bug with listView or something as I can not get key navigation enabled on the listView as described in the document by simply enabling focus on listView. I have the focus on the listView and key nav doesn't work

    updated code:
    Qt Code:
    1. //---Delegate Component for listView---//
    2. Component {
    3. id: msgDelegate
    4. Item {
    5. id: active_eventMsg
    6. anchors.left: parent.left
    7. anchors.leftMargin: 5
    8. anchors.right: parent.right
    9. anchors.rightMargin:5
    10. height: 30
    11.  
    12. //---Key Navigation Work Around (listView focus issue)---//
    13. Keys.onDownPressed: listView.incrementCurrentIndex()
    14. Keys.onUpPressed: listView.decrementCurrentIndex()
    15. KeyNavigation.tab: userNameTextField
    16.  
    17. //---Highlight Functionality---//
    18. MouseArea {
    19. anchors.fill: parent
    20. onClicked: {
    21. listView.currentIndex = index
    22. }
    23. }
    24. //---Rect display model data in listView---//
    25. Rectangle{
    26. id: id_rect
    27. anchors.top: parent.top
    28. anchors.left: parent.left
    29. anchors.leftMargin: 2
    30. width: id_col.width
    31. height: parent.height
    32. color: "#00000000"
    33. Text {
    34. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    35. anchors.fill: parent
    36. verticalAlignment: Text.AlignVCenter
    37. horizontalAlignment: Text.AlignLeft
    38. text: id;
    39. font.pixelSize: 18
    40. }
    41. }
    42. Rectangle{
    43. id: userName_rect
    44. anchors.top: parent.top
    45. anchors.left: id_rect.right
    46. anchors.leftMargin: 2
    47. width: userName_col.width
    48. height: parent.height
    49. color: "#00000000"
    50. Text {
    51. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    52. anchors.fill: parent
    53. anchors.leftMargin: 2
    54. verticalAlignment: Text.AlignVCenter
    55. horizontalAlignment: Text.AlignLeft
    56. text: userName;
    57. font.pixelSize: 18
    58. }
    59. }
    60. Rectangle{
    61. id: eventMsg_rect
    62. anchors.top: parent.top
    63. anchors.left: userName_rect.right
    64. anchors.leftMargin: 2
    65. width: eventMsg_col.width
    66. height: parent.height
    67. color: "#00000000"
    68. Text {
    69. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    70. anchors.fill: parent
    71. anchors.leftMargin: 2
    72. verticalAlignment: Text.AlignVCenter
    73. horizontalAlignment: Text.AlignLeft
    74. text: eventMessage;
    75. font.pixelSize: 18
    76. }
    77. }
    78. Rectangle{
    79. id: dateTime_rect
    80. anchors.top: parent.top
    81. anchors.left: eventMsg_rect.right
    82. anchors.leftMargin: 2
    83. width: dateTime_col.width
    84. anchors.right: parent.right
    85. height: parent.height
    86. color: "#00000000"
    87. Text {
    88. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    89. anchors.fill: parent
    90. anchors.leftMargin: 2
    91. verticalAlignment: Text.AlignVCenter
    92. horizontalAlignment: Text.AlignLeft
    93. text: dateTime;
    94. font.pixelSize: 18
    95. }
    96. }
    97. }
    98. }
    99.  
    100. //---Rect for listView---//
    101. Rectangle {
    102. id: listView_rect
    103. radius: 8
    104. anchors.top: eventMsg_panel.bottom
    105. anchors.topMargin: 2
    106. anchors.bottom: parent.bottom
    107. anchors.bottomMargin: 65
    108. anchors.left:parent.left
    109. anchors.leftMargin: 5
    110. anchors.right:parent.right
    111. anchors.rightMargin: 6
    112. border{
    113. color: "black"
    114. width: 3
    115. }
    116. //---Adds ScrollBars---//
    117. ScrollView{
    118. id: userEvent_scrollView
    119. anchors.fill: parent
    120. anchors.bottomMargin: 2
    121. anchors.topMargin: 2.5
    122. anchors.rightMargin: 2
    123. anchors.leftMargin: 2.5
    124. flickableItem.interactive: true
    125. ListView {
    126. id: listView
    127. focus: true
    128. anchors.fill: parent
    129. model: UserEventLog
    130. delegate: msgDelegate
    131. keyNavigationWraps: true
    132. KeyNavigation.tab: {
    133. //listView.focus = false;
    134. //userNameTextField.focus = true;
    135. //userNameTextField.selectAll();
    136. userNameTextField
    137. }
    138.  
    139. orientation : "Vertical"
    140. snapMode: ListView.SnapToItem
    141. boundsBehavior: Flickable.StopAtBounds
    142. clip: true;
    143. highlightMoveVelocity: 2000
    144. highlight: Rectangle{
    145. radius: 7;
    146. color: "red"
    147. }
    148. Component.onCompleted: {
    149. listView.forceActiveFocus();
    150. console.log("listView activeFocus: "+activeFocus)
    151. }
    152. }
    153. }
    154. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by jfinn88; 28th September 2016 at 21:43.

  7. #7

    Default Re: qml listView key navigation not working setting focus: true

    Hello!

    I had a similar issue and the solution was to set "focus" of the ScrollView to "true". It is an old thread and maybe the property will not affect an application of an older Qt version but I have copied the code and tried to use the property with the Qt 5.6 version and succeded.

    Here is your code. It is changed a bit.
    Qt Code:
    1. //---Delegate Component for listView---//
    2. Component {
    3. id: msgDelegate
    4. Item {
    5. id: active_eventMsg
    6. anchors.left: parent.left
    7. anchors.leftMargin: 5
    8. anchors.right: parent.right
    9. anchors.rightMargin:5
    10. height: 30
    11.  
    12. //---Key Navigation Work Around (listView focus issue)---//
    13. //Keys.onDownPressed: listView.incrementCurrentIndex()
    14. //Keys.onUpPressed: listView.decrementCurrentIndex()
    15. //KeyNavigation.tab: userNameTextField
    16.  
    17. //---Highlight Functionality---//
    18. MouseArea {
    19. anchors.fill: parent
    20. onClicked: {
    21. listView.currentIndex = index
    22. }
    23. }
    24. //---Rect display model data in listView---//
    25. Rectangle{
    26. id: id_rect
    27. anchors.top: parent.top
    28. anchors.left: parent.left
    29. anchors.leftMargin: 2
    30. width: 100
    31. height: parent.height
    32. color: "#00000000"
    33. Text {
    34. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    35. anchors.fill: parent
    36. verticalAlignment: Text.AlignVCenter
    37. horizontalAlignment: Text.AlignLeft
    38. text: "id";
    39. font.pixelSize: 18
    40. }
    41. }
    42. Rectangle{
    43. id: userName_rect
    44. anchors.top: parent.top
    45. anchors.left: id_rect.right
    46. anchors.leftMargin: 2
    47. width: 100
    48. height: parent.height
    49. color: "#00000000"
    50. Text {
    51. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    52. anchors.fill: parent
    53. anchors.leftMargin: 2
    54. verticalAlignment: Text.AlignVCenter
    55. horizontalAlignment: Text.AlignLeft
    56. text: "userName";
    57. font.pixelSize: 18
    58. }
    59. }
    60. Rectangle{
    61. id: eventMsg_rect
    62. anchors.top: parent.top
    63. anchors.left: userName_rect.right
    64. anchors.leftMargin: 2
    65. width: 100
    66. height: parent.height
    67. color: "#00000000"
    68. Text {
    69. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    70. anchors.fill: parent
    71. anchors.leftMargin: 2
    72. verticalAlignment: Text.AlignVCenter
    73. horizontalAlignment: Text.AlignLeft
    74. text: "eventMessage";
    75. font.pixelSize: 18
    76. }
    77. }
    78. Rectangle{
    79. id: dateTime_rect
    80. anchors.top: parent.top
    81. anchors.left: eventMsg_rect.right
    82. anchors.leftMargin: 2
    83. width: 100
    84. anchors.right: parent.right
    85. height: parent.height
    86. color: "#00000000"
    87. Text {
    88. color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
    89. anchors.fill: parent
    90. anchors.leftMargin: 2
    91. verticalAlignment: Text.AlignVCenter
    92. horizontalAlignment: Text.AlignLeft
    93. text: "dateTime";
    94. font.pixelSize: 18
    95. }
    96. }
    97. }
    98. }
    99.  
    100. //---Rect for listView---//
    101. Rectangle {
    102. id: listView_rect
    103. radius: 8
    104. anchors.top: parent.top
    105. anchors.topMargin: 2
    106. anchors.bottom: parent.bottom
    107. anchors.bottomMargin: 65
    108. anchors.left:parent.left
    109. anchors.leftMargin: 5
    110. anchors.right:parent.right
    111. anchors.rightMargin: 6
    112. border{
    113. color: "black"
    114. width: 3
    115. }
    116. //---Adds ScrollBars---//
    117. ScrollView{
    118. id: userEvent_scrollView
    119. anchors.fill: parent
    120. anchors.bottomMargin: 2
    121. anchors.topMargin: 2.5
    122. anchors.rightMargin: 2
    123. anchors.leftMargin: 2.5
    124. focus: true
    125. flickableItem.interactive: true
    126. ListView {
    127. id: listView
    128. focus: true
    129. anchors.fill: parent
    130. model: 5
    131. delegate: msgDelegate
    132. keyNavigationWraps: true
    133. //KeyNavigation.tab: {
    134. //listView.focus = false;
    135. //userNameTextField.focus = true;
    136. //userNameTextField.selectAll();
    137. //userNameTextField
    138. //}
    139.  
    140. orientation : "Vertical"
    141. snapMode: ListView.SnapToItem
    142. boundsBehavior: Flickable.StopAtBounds
    143. clip: true;
    144. highlightMoveVelocity: 2000
    145. highlight: Rectangle{
    146. radius: 7;
    147. color: "red"
    148. }
    149. Keys.onDownPressed: listView.incrementCurrentIndex()
    150. Keys.onUpPressed: listView.decrementCurrentIndex()
    151. Component.onCompleted: {
    152. //listView.forceActiveFocus();
    153. console.log("listView activeFocus: "+activeFocus)
    154. }
    155. }
    156. }
    157. }
    158.  
    159. }
    To copy to clipboard, switch view to plain text mode 

Similar Threads

  1. Replies: 2
    Last Post: 17th May 2016, 00:50
  2. ListView - ListView communication
    By MarkoSan in forum Qt Quick
    Replies: 1
    Last Post: 30th October 2015, 11:18
  3. Replies: 11
    Last Post: 16th October 2015, 15:34
  4. QPushButton::setEnabled( true ) not working
    By unshaven in forum Newbie
    Replies: 1
    Last Post: 9th August 2012, 07:27
  5. Replies: 27
    Last Post: 13th September 2007, 10:01

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.