qml listView key navigation not working setting focus: true

[jfinn88]

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



Component {
id: msgDelegate
Item {
id: active_eventMsg
anchors.left: parent.left
anchors.leftMargin: 5
anchors.right: parent.right
anchors.rightMargin:5
height: 30
Keys.onUpPressed: listView.incrementCurrentIndex()
Keys.onDownPressed: listView.decrementCurrentIndex()
MouseArea {
anchors.fill: parent
onClicked: listView.currentIndex = index
}
Rectangle{
id: id_rect
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 2
width: id_col.width
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: id;
font.pixelSize: 18
}
}
Rectangle{
id: userName_rect
anchors.top: parent.top
anchors.left: id_rect.right
anchors.leftMargin: 2
width: userName_col.width
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: userName;
font.pixelSize: 18
}
}
Rectangle{
id: eventMsg_rect
anchors.top: parent.top
anchors.left: userName_rect.right
anchors.leftMargin: 2
width: eventMsg_col.width
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: eventMessage;
font.pixelSize: 18
}
}
Rectangle{
id: dateTime_rect
anchors.top: parent.top
anchors.left: eventMsg_rect.right
anchors.leftMargin: 2
width: dateTime_col.width
anchors.right: parent.right
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: dateTime;
font.pixelSize: 18
}
}
}
}
Rectangle {
id: listView_rect
radius: 8
anchors.top: eventMsg_panel.bottom
anchors.topMargin: 2
anchors.bottom: parent.bottom
anchors.bottomMargin: 65
anchors.left:parent.left
anchors.leftMargin: 5
anchors.right:parent.right
anchors.rightMargin: 6
border{
color: "black"
width: 3
}
ScrollView{
id: userEvent_scrollView
anchors.fill: parent
anchors.bottomMargin: 2
anchors.topMargin: 2.5
anchors.rightMargin: 2
anchors.leftMargin: 2.5
flickableItem.interactive: true
ListView {
id: listView
anchors.fill: parent
model: UserEventLog
delegate: msgDelegate
keyNavigationWraps: true
//KeyNavigation: true

//Keys.onUpPressed: listView.incrementCurrentIndex()
//Keys.onDownPressed: listView.decrementCurrentIndex()

highlight: Rectangle{
width: parent.width
radius: 7;
color: "red"
}
focus: true
orientation : "Vertical"
snapMode: ListView.SnapToItem
boundsBehavior: Flickable.StopAtBounds
clip: true;
}
}
}

[anda_skoa]

Yes, that should work.

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

Cheers,
_

[jfinn88]

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?



Component.onCompleted: {
listView.forceActiveFocus()
}


update: not sure where to place onCompleted signal



Component {
id: msgDelegate
Item {
id: active_eventMsg
anchors.left: parent.left
anchors.leftMargin: 5
anchors.right: parent.right
anchors.rightMargin:5
height: 30
Component.onCompleted:{
listView.forceActiveFocus()
}
MouseArea {
anchors.fill: parent
onClicked: {
listView.currentIndex = index
//listView.forceActiveFocus()
console.log("active focus: "+activeFocus);
}
}
Rectangle{
id: id_rect
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 2
width: id_col.width
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: id;
font.pixelSize: 18
}
}
Rectangle{
id: userName_rect
anchors.top: parent.top
anchors.left: id_rect.right
anchors.leftMargin: 2
width: userName_col.width
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: userName;
font.pixelSize: 18
}
}
Rectangle{
id: eventMsg_rect
anchors.top: parent.top
anchors.left: userName_rect.right
anchors.leftMargin: 2
width: eventMsg_col.width
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: eventMessage;
font.pixelSize: 18
}
}
Rectangle{
id: dateTime_rect
anchors.top: parent.top
anchors.left: eventMsg_rect.right
anchors.leftMargin: 2
width: dateTime_col.width
anchors.right: parent.right
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: dateTime;
font.pixelSize: 18
}
}
}
}
Rectangle {
id: listView_rect
radius: 8
anchors.top: eventMsg_panel.bottom
anchors.topMargin: 2
anchors.bottom: parent.bottom
anchors.bottomMargin: 65
anchors.left:parent.left
anchors.leftMargin: 5
anchors.right:parent.right
anchors.rightMargin: 6
border{
color: "black"
width: 3
}
ScrollView{
id: userEvent_scrollView
anchors.fill: parent
anchors.bottomMargin: 2
anchors.topMargin: 2.5
anchors.rightMargin: 2
anchors.leftMargin: 2.5
flickableItem.interactive: true
ListView {
id: listView
anchors.fill: parent
model: UserEventLog
delegate: msgDelegate
keyNavigationWraps: true
highlight: Rectangle{
width: parent.width
radius: 7;
color: "red"
}
focus: true
orientation : "Vertical"
snapMode: ListView.SnapToItem
boundsBehavior: Flickable.StopAtBounds
clip: true;
}
// Component.onCompleted:{
// listView.forceActiveFocus()
// }
}
}

[anda_skoa]

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

Cheers,
_

[jfinn88]

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:



//---User Event log Component---//
Item {
visible: true
id:userevent_item
enabled: true
// Component.onCompleted: {
// listView.forceActiveFocus();
// console.log("Outer Item onCompleted activeFocus: "+activeFocus)
// }
Rectangle {
id: view_rect
anchors.centerIn: parent
width: 1100
height: 600
radius: 10
border.width:4
border.color: "black"
layer.enabled: true
enabled: true
focus:true

Component.onCompleted: {
UserEventLog.init();
// listView.forceActiveFocus();
// console.log("viewRect onCompleted activeFocus: "+activeFocus)
}


FocusScope{
anchors.fill:parent
focus: true
Label {
id: userEventTitle_label
color: "#000000"
text: qsTr("User Event Log")
anchors.top: parent.top
anchors.topMargin: 5
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignLeft
font.pointSize: 22
font.bold: true
}

Component {
id: msgDelegate
Item {
id: active_eventMsg
focus: true
anchors.left: parent.left
anchors.leftMargin: 5
anchors.right: parent.right
anchors.rightMargin:5
height: 30
Keys.onDownPressed: listView.incrementCurrentIndex()
Keys.onUpPressed: listView.decrementCurrentIndex()
KeyNavigation.tab: userNameTextField
Component.onCompleted: {
listView.forceActiveFocus();
console.log("msgDelegate onCompleted activeFocus: "+listView.activeFocus)
}
Rectangle{
id: id_rect
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 2
width: id_col.width
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: id;
font.pixelSize: 18
}
}
Rectangle{
id: userName_rect
anchors.top: parent.top
anchors.left: id_rect.right
anchors.leftMargin: 2
width: userName_col.width
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: userName;
font.pixelSize: 18
}
}
Rectangle{
id: eventMsg_rect
anchors.top: parent.top
anchors.left: userName_rect.right
anchors.leftMargin: 2
width: eventMsg_col.width
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: eventMessage;
font.pixelSize: 18
}
}
Rectangle{
id: dateTime_rect
anchors.top: parent.top
anchors.left: eventMsg_rect.right
anchors.leftMargin: 2
width: dateTime_col.width
anchors.right: parent.right
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: dateTime;
font.pixelSize: 18
}
}
}
}

Rectangle {
id: listView_rect
focus: true
radius: 8
anchors.top: eventMsg_panel.bottom
anchors.topMargin: 2
anchors.bottom: parent.bottom
anchors.bottomMargin: 65
anchors.left:parent.left
anchors.leftMargin: 5
anchors.right:parent.right
anchors.rightMargin: 6
//Keys.onPressed: console.log("key pressed activeFocus: ", activeFocus)
//Keys.onDownPressed: listView.incrementCurrentIndex()
//Keys.onUpPressed: listView.decrementCurrentIndex()
border{
color: "black"
width: 3
}
ScrollView{
id: userEvent_scrollView
anchors.fill: parent
anchors.bottomMargin: 2
anchors.topMargin: 2.5
anchors.rightMargin: 2
anchors.leftMargin: 2.5
flickableItem.interactive: true
//Keys.onPressed: console.log("scrollView key pressed activeFocus: ", activeFocus)
//Keys.onDownPressed: listView.incrementCurrentIndex()
//Keys.onUpPressed: listView.decrementCurrentIndex()
ListView {
id: listView
focus: true
anchors.fill: parent
model: UserEventLog
delegate: msgDelegate
keyNavigationWraps: true
KeyNavigation.tab: userNameTextField
orientation : "Vertical"
snapMode: ListView.SnapToItem
boundsBehavior: Flickable.StopAtBounds
clip: true;
highlightMoveVelocity: 2000
highlight: Rectangle{
radius: 7;
color: "red"
}
Component.onCompleted: {
listView.forceActiveFocus();
console.log("listView onCompleted activeFocus: "+activeFocus)
}
//Keys.onPressed: console.log("listView key pressed activeFocus: ", activeFocus)
//Keys.onDownPressed: listView.incrementCurrentIndex()
//Keys.onUpPressed: listView.decrementCurrentIndex()
}
}
}
}
}
}
//---------------------------End of User Event Log Component-------------------------------//

[jfinn88]

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


RowLayout {
id: row1
y: 545
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.leftMargin: 10
anchors.rightMargin: 5
anchors.bottomMargin: 5
spacing: 10
width: 1032
height: 50;
Label {
id: userNameLabel
width: 35
height: 25
color: "white";
text: qsTr("User Name")
font.pointSize: 12
}
TextField {
id: userNameTextField
style: TextFieldUserLogStyle {}
placeholderText: qsTr("User Name")
KeyNavigation.tab: beginDateTextField
Keys.onReturnPressed: {
beginDateTextField.focus = true;
beginDateTextField.selectAll();
}
}
Label {
id: beginDateTextLabel
width: 35
height: 25
color: "white";
text: qsTr("Begin Date")
font.pointSize: 12
}
TextField {
id: beginDateTextField
style: TextFieldUserLogStyle {}
placeholderText: qsTr("yyyy-mm-dd")
KeyNavigation.tab: endDateTextField
Keys.onReturnPressed: {
endDateTextField.forceActiveFocus();
endDateTextField.selectAll();
}
onFocusChanged: {
if(calendarRect1.visible == false){
calendarRect1.visible = true
beginDateTextField.focus = true;
beginDateTextField.selectAll();
}
}

Image{
id: beginDateImage
width: 30
height: 40
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.rightMargin: 3
source:"Calendar3.png"
MouseArea {
anchors.fill:parent
onClicked: {
if(calendarRect1.visible == false){
calendarRect1.visible = true
}
else if(calendarRect1.visible == true){
calendarRect1.visible = false
}
}
}
}
}
Label {
id: endDateTextLabel
width: 35
height: 25
color: "white";
text: qsTr("End Date")
font.pointSize: 12
}
TextField {
id: endDateTextField
style: TextFieldUserLogStyle {}
placeholderText: qsTr("yyyy-mm-dd")
KeyNavigation.tab: searchBtn
Keys.onReturnPressed: {
action_search.trigger();
endDateTextField.focus = false;
}
onFocusChanged: {
if(calendarRect2.visible == false){
calendarRect2.visible = true
endDateTextField.focus = true;
endDateTextField.selectAll();
}
}
Image{
id: endDateImage
width: 30
height: 40
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.rightMargin: 3
source:"Calendar3.png"
MouseArea {
anchors.fill:parent
onClicked: {
if(calendarRect2.visible == false){
calendarRect2.visible = true
}
else if(calendarRect2.visible == true){
calendarRect2.visible = false
}
}
}
}
}
Button {
id: searchBtn
text: qsTr("Search")
action: action_search
opacity: !action.enabled ? .3 : 1.0
KeyNavigation.tab: resetBtn
//---Sets button Formatting---//
style: ButtonStyle {
background: Rectangle {
implicitWidth: 90
implicitHeight: 45
anchors.fill:parent
radius: 8
color: "#f9f9f9"
border.color: control.activeFocus ? "yellow" : "#242424"
border.width: control.activeFocus ? 4 : 1
//---Changes butotn color when pressed--//
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
//---Sets button Image---//
Image{
width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
source:"button_ok.png"
}
}
}
}
Button {
id: resetBtn
text: qsTr("Reset")
action: action_reset
opacity: !action.enabled ? .3 : 1.0
KeyNavigation.tab: exitBtn
//---Sets button Formatting---//
style: ButtonStyle {
background: Rectangle {
implicitWidth: 90
implicitHeight: 45
anchors.fill:parent
radius: 8
color: "#f9f9f9"
border.color: control.activeFocus ? "yellow" : "#242424"
border.width: control.activeFocus ? 4 : 1
//---Changes butotn color when pressed--//
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
//---Sets button Image---//
Image{
width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
source:"return.png"
}
}
}
}
Button {
id: exitBtn
text: qsTr("Exit")
action: action_exit
//---Opacity Greys out button---//
opacity: !action.enabled ? .3 : 1.0
KeyNavigation.tab: userNameTextField
//---Sets button Formatting---//
style: ButtonStyle {
background: Rectangle {
implicitWidth: 90
implicitHeight: 45
anchors.fill:parent
radius: 8
color: "#f9f9f9"
border.color: control.activeFocus ? "yellow" : "#242424"
border.width: control.activeFocus ? 4 : 1
//---Changes butotn color when pressed--//
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
//---Sets button Image---//
Image{
width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
source:"button_cancel.png"
}
}
}
}
}
}


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:


//---Delegate Component for listView---//
Component {
id: msgDelegate
Item {
id: active_eventMsg
anchors.left: parent.left
anchors.leftMargin: 5
anchors.right: parent.right
anchors.rightMargin:5
height: 30

//---Key Navigation Work Around (listView focus issue)---//
Keys.onDownPressed: listView.incrementCurrentIndex()
Keys.onUpPressed: listView.decrementCurrentIndex()
KeyNavigation.tab: userNameTextField

//---Highlight Functionality---//
MouseArea {
anchors.fill: parent
onClicked: {
listView.currentIndex = index
}
}
//---Rect display model data in listView---//
Rectangle{
id: id_rect
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 2
width: id_col.width
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: id;
font.pixelSize: 18
}
}
Rectangle{
id: userName_rect
anchors.top: parent.top
anchors.left: id_rect.right
anchors.leftMargin: 2
width: userName_col.width
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: userName;
font.pixelSize: 18
}
}
Rectangle{
id: eventMsg_rect
anchors.top: parent.top
anchors.left: userName_rect.right
anchors.leftMargin: 2
width: eventMsg_col.width
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: eventMessage;
font.pixelSize: 18
}
}
Rectangle{
id: dateTime_rect
anchors.top: parent.top
anchors.left: eventMsg_rect.right
anchors.leftMargin: 2
width: dateTime_col.width
anchors.right: parent.right
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: dateTime;
font.pixelSize: 18
}
}
}
}

//---Rect for listView---//
Rectangle {
id: listView_rect
radius: 8
anchors.top: eventMsg_panel.bottom
anchors.topMargin: 2
anchors.bottom: parent.bottom
anchors.bottomMargin: 65
anchors.left:parent.left
anchors.leftMargin: 5
anchors.right:parent.right
anchors.rightMargin: 6
border{
color: "black"
width: 3
}
//---Adds ScrollBars---//
ScrollView{
id: userEvent_scrollView
anchors.fill: parent
anchors.bottomMargin: 2
anchors.topMargin: 2.5
anchors.rightMargin: 2
anchors.leftMargin: 2.5
flickableItem.interactive: true
ListView {
id: listView
focus: true
anchors.fill: parent
model: UserEventLog
delegate: msgDelegate
keyNavigationWraps: true
KeyNavigation.tab: {
//listView.focus = false;
//userNameTextField.focus = true;
//userNameTextField.selectAll();
userNameTextField
}

orientation : "Vertical"
snapMode: ListView.SnapToItem
boundsBehavior: Flickable.StopAtBounds
clip: true;
highlightMoveVelocity: 2000
highlight: Rectangle{
radius: 7;
color: "red"
}
Component.onCompleted: {
listView.forceActiveFocus();
console.log("listView activeFocus: "+activeFocus)
}
}
}
}

[Yaroslav]

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.

//---Delegate Component for listView---//
Component {
id: msgDelegate
Item {
id: active_eventMsg
anchors.left: parent.left
anchors.leftMargin: 5
anchors.right: parent.right
anchors.rightMargin:5
height: 30

//---Key Navigation Work Around (listView focus issue)---//
//Keys.onDownPressed: listView.incrementCurrentIndex()
//Keys.onUpPressed: listView.decrementCurrentIndex()
//KeyNavigation.tab: userNameTextField

//---Highlight Functionality---//
MouseArea {
anchors.fill: parent
onClicked: {
listView.currentIndex = index
}
}
//---Rect display model data in listView---//
Rectangle{
id: id_rect
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 2
width: 100
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: "id";
font.pixelSize: 18
}
}
Rectangle{
id: userName_rect
anchors.top: parent.top
anchors.left: id_rect.right
anchors.leftMargin: 2
width: 100
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: "userName";
font.pixelSize: 18
}
}
Rectangle{
id: eventMsg_rect
anchors.top: parent.top
anchors.left: userName_rect.right
anchors.leftMargin: 2
width: 100
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: "eventMessage";
font.pixelSize: 18
}
}
Rectangle{
id: dateTime_rect
anchors.top: parent.top
anchors.left: eventMsg_rect.right
anchors.leftMargin: 2
width: 100
anchors.right: parent.right
height: parent.height
color: "#00000000"
Text {
color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
anchors.fill: parent
anchors.leftMargin: 2
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
text: "dateTime";
font.pixelSize: 18
}
}
}
}

//---Rect for listView---//
Rectangle {
id: listView_rect
radius: 8
anchors.top: parent.top
anchors.topMargin: 2
anchors.bottom: parent.bottom
anchors.bottomMargin: 65
anchors.left:parent.left
anchors.leftMargin: 5
anchors.right:parent.right
anchors.rightMargin: 6
border{
color: "black"
width: 3
}
//---Adds ScrollBars---//
ScrollView{
id: userEvent_scrollView
anchors.fill: parent
anchors.bottomMargin: 2
anchors.topMargin: 2.5
anchors.rightMargin: 2
anchors.leftMargin: 2.5
focus: true
flickableItem.interactive: true
ListView {
id: listView
focus: true
anchors.fill: parent
model: 5
delegate: msgDelegate
keyNavigationWraps: true
//KeyNavigation.tab: {
//listView.focus = false;
//userNameTextField.focus = true;
//userNameTextField.selectAll();
//userNameTextField
//}

orientation : "Vertical"
snapMode: ListView.SnapToItem
boundsBehavior: Flickable.StopAtBounds
clip: true;
highlightMoveVelocity: 2000
highlight: Rectangle{
radius: 7;
color: "red"
}
Keys.onDownPressed: listView.incrementCurrentIndex()
Keys.onUpPressed: listView.decrementCurrentIndex()
Component.onCompleted: {
//listView.forceActiveFocus();
console.log("listView activeFocus: "+activeFocus)
}
}
}
}

}