PDA

View Full Version : How to change the selected row's color in TreeView of QML?



TheIndependentAquarius
5th January 2021, 14:10
This is what I have tried:



import QtQuick 2.2
import QtQuick.Controls 1.5
import QtQuick.Controls.Styles 1.4
import QtQml.Models 2.2
import filesystem_browser 1.0

ApplicationWindow
{
visible: true
width: 740
height: 740

Rectangle
{
anchors.centerIn: parent
color: "#292A38"
border.color: "#373848"
height: 600; width: 600

ItemSelectionModel
{
// This model is comming from C++' class DisplayFileSystemModel.
model: treeViewModel
}

TreeView
{
id: view
anchors.fill: parent
anchors.margins: 2 * 12
model: treeViewModel
rootIndex: root
selection:
ItemSelectionModel
{
model: treeViewModel

onSelectionChanged:
{
console.log( treeViewModel.data( view.currentIndex ))
}
}

style:
TreeViewStyle
{
backgroundColor: "#14161C"
highlightedTextColor: "red"
alternateBackgroundColor: "#14161C"
}

TableViewColumn
{
title: "Name"
role: "display"
resizable: true
}

itemDelegate:
Rectangle
{
height: 20

color: styleData.selected ? "gray" : "transparent"
Rectangle
{
visible:
{
if( styleData.depth )
styleData.selected ? true :false
else
false
}
height: 20; width: 40; color: styleData.depth ? "#292A38":"transparent";
anchors.right: parent.right
border.width: 1
}

Text
{
color:
{
if( styleData.depth )
styleData.selected ? "green" : "black"
else
"blue"
}
anchors.verticalCenter: parent.verticalCenter
text: styleData.value
}
}
}
}
}



It gives me the output shown in the attached picture:
As you can see the default blue color of the selected row is still there.
13586

The default of color of the selected row seems to be blue. How to get rid of it and override it with some other color completely? Please guide