Results 1 to 7 of 7

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. 27th September 2016, 18:58 #1
    jfinn88
    jfinn88 is offline Intermediate user
    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 19:15.
    Reply With Quote Reply With Quote
  2. 27th September 2016, 19:18 #2
    anda_skoa
    anda_skoa is offline Administrator
    Nokia Certified Qt Developer
    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,
    _
    Reply With Quote Reply With Quote
  3. 27th September 2016, 19:31 #3
    jfinn88
    jfinn88 is offline Intermediate user
    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 22:02.
    Reply With Quote Reply With Quote
  4. 28th September 2016, 09:56 #4
    anda_skoa
    anda_skoa is offline Administrator
    Nokia Certified Qt Developer
    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,
    _
    Reply With Quote Reply With Quote
  5. 28th September 2016, 17:26 #5
    jfinn88
    jfinn88 is offline Intermediate user
    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 19:37.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Master - Detail in QML ListViews. A ListView with a delegate with another ListView.
    By lqsa in forum Qt Quick
    Replies: 2
    Last Post: 16th May 2016, 23:50
  2. ListView - ListView communication
    By MarkoSan in forum Qt Quick
    Replies: 1
    Last Post: 30th October 2015, 10:18
  3. Vertical Center on ListView (Delegate) not working
    By QTmox in forum Qt Quick
    Replies: 11
    Last Post: 16th October 2015, 14:34
  4. QPushButton::setEnabled( true ) not working
    By unshaven in forum Newbie
    Replies: 1
    Last Post: 9th August 2012, 06:27
  5. another setMouseTracking(true) not working; QWidget
    By vonCZ in forum Newbie
    Replies: 27
    Last Post: 13th September 2007, 09: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
  •  

Forum Rules

Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.