代码之家  ›  专栏  ›  技术社区  ›  Aquarius_Girl

如何在QML中更改TreeView的行选择颜色?

  •  0
  • Aquarius_Girl  · 技术社区  · 5 年前

    以下代码导致了这种情况:

    enter image description here

    我不知道蓝色是从哪里来的选择。如何设置TreeView中选定行的背景色?

    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
                        {
                           color: "transparent"
                           height: 20
    
                           Rectangle
                           {
    
                               height: 20; width: 40; color: styleData.depth ? "green":"transparent";
                               anchors.right: parent.right
                               border.width: 1
                           }
    
                           Text
                           {
                               color: styleData.depth ? "green":"black";
                               anchors.verticalCenter: parent.verticalCenter
                               text: styleData.value
                           }
                       }
                }
        }
    }
    
    0 回复  |  直到 5 年前
        1
  •  2
  •   augre    5 年前

    添加 rowDelegate 到 TreeView 要指定如何绘制行,请执行以下操作:

    TreeView {
        // ...
        rowDelegate: Rectangle {
            color: styleData.selected ? "red" : "transparent"
        }
    }