QML Вложенный список с подсветкой

Question

Мне нужно создать представление вложенного списка и, как показано ниже, и выделить основной список и под-список с другим цветом Я пробовал с подсветкой ListView, но есть проблемы, такие как подсветка для дочернего а также родительский, как показано на рисунке .

Я использую код от here с некоторыми незначительными модификациями.

Вот полный код

import QtQuick 2.2 
import QtQuick.Controls 1.1 
import QtQuick 2.2 
import QtQuick.Controls 1.2 
import QtQuick.Controls.Styles 1.1 

ApplicationWindow { 

    id: loginWindow 
    //visibility: "Maximized" 
    visible: true 
    width: 720 
    height: 720 

    Item { 
     width: 200 
     height: 720 

     ListView { 
      id: list 
      anchors.fill: parent 
      model: nestedModel 
      delegate: categoryDelegate 
      highlight: Rectangle { 
       color: "#FF00AAFF" //"#FF59ACFF"; 
       radius: 2 
      } 
     } 

     ListModel { 
      id: nestedModel 
      ListElement { 
       categoryName: "Veggies" 
       collapsed: true 

       // A ListElement can't contain child elements, but it can contain 
       // a list of elements. A list of ListElements can be used as a model 
       // just like any other model type. 
       subItems: [ 
        ListElement { 
         itemName: "Tomato" 
        }, 
        ListElement { 
         itemName: "Cucumber" 
        }, 
        ListElement { 
         itemName: "Onion" 
        }, 
        ListElement { 
         itemName: "Brains" 
        } 
       ] 
      } 

      ListElement { 
       categoryName: "Fruits" 
       collapsed: true 
       subItems: [ 
        ListElement { 
         itemName: "Orange" 
        }, 
        ListElement { 
         itemName: "Apple" 
        }, 
        ListElement { 
         itemName: "Pear" 
        }, 
        ListElement { 
         itemName: "Lemon" 
        } 
       ] 
      } 

      ListElement { 
       categoryName: "Cars" 
       collapsed: true 
       subItems: [ 
        ListElement { 
         itemName: "Nissan" 
        }, 
        ListElement { 
         itemName: "Toyota" 
        }, 
        ListElement { 
         itemName: "Chevy" 
        }, 
        ListElement { 
         itemName: "Audi" 
        } 
       ] 
      } 
     } 

     Component { 
      id: categoryDelegate 
      Column { 
       width: 200 

       Rectangle { 
        id: categoryItem 
        border.color: "black" 
        border.width: 5 
        color: "#33FF5225" 
        height: 50 
        width: 200 

        Text { 
         anchors.verticalCenter: parent.verticalCenter 
         x: 15 
         font.pixelSize: 24 
         text: categoryName 
        } 

        Rectangle { 
         color: "red" 
         width: 30 
         height: 30 
         anchors.right: parent.right 
         anchors.rightMargin: 15 
         anchors.verticalCenter: parent.verticalCenter 

         MouseArea { 
          anchors.fill: parent 

          // Toggle the 'collapsed' property 
          onClicked: { 
           list.currentIndex = index 
           nestedModel.setProperty(index, "collapsed", 
                 !collapsed) 
          } 
         } 
        } 
       } 

       Loader { 
        id: subItemLoader 

        // This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null 
        // the Loader element retains the same height it had when sourceComponent was set. Setting visible 
        // to false makes the parent Column treat it as if it's height was 0. 
        visible: !collapsed 
        property variant subItemModel: subItems 
        sourceComponent: collapsed ? null : subItemColumnDelegate 
        onStatusChanged: if (status == Loader.Ready) item.model = subItemModel 
       } 
      } 
     } 

     Component { 
      id: subItemColumnDelegate 
      Column { 
       property alias model: subItemRepeater.model 
       width: 200 
       Repeater { 
        id: subItemRepeater 
        delegate: Rectangle { 
         x: 10 
         color: "#33FF5225" 
         height: 40 
         width: 190 
         border.color: "black" 
         border.width: 2 

         Text { 
          anchors.verticalCenter: parent.verticalCenter 
          x: 30 
          font.pixelSize: 18 
          text: itemName 
         } 
        } 
       } 
      } 
     } 
    } 
} 

Как я могу решить эту проблему. В основном мне нужно выделить родительский и дочерний элемент с другим цветом.

Edit:

Я могу выделить родительский список, используя код

color:categoryDelegate.ListView.isCurrentItem ? "#FF00AAFF" : "#CCBBBBBB" 

но coud'nt находке подобный способ изменить цвет списка ребенка (суб-лист) на мыши.

Answer 1

Изменить color недвижимость delegate в subItemRepeater на ваш выбор.

Пример

Component { 
    id: subItemColumnDelegate 
    Column { 
     ... 
     Repeater { 
      id: subItemRepeater 
      delegate: Rectangle { 
       ... 
       color: "purple" 
       ... 
      } 
     } 
    } 
} 

Аналогично изменить color свойство categoryItem в categoryDelegate. Пример

Component { 
    id: categoryDelegate 
    Column { 
     ... 
     Rectangle { 
      id: categoryItem 
      ... 
      color: "blue" 
      ... 
     } 
    } 
} 

РЕДАКТИРОВАТЬ:

В этом случае общая концепция является неправильным. В комментарии к исходному коду автор написал A ListElement can't contain child elements, but it can contain a list of elements. Поэтому мы не можем выделить дочерний элемент. Но следующий подход даст вам хороший результат.

import QtQuick 2.0 

Rectangle { 
    width: 360 
    height: 360 

    ListModel { 
     id: model1 

     ListElement { 
      name: "name" 
     } 
     ListElement { 
      name: "name" 
     } 
     ListElement { 
      name: "name" 
     } 
    } 
    ListModel { 
     id: model2 
     ListElement { 
      name: "inside" 
     } 
     ListElement { 
      name: "inside" 
     } 
     ListElement { 
      name: "inside" 
     } 
    } 

    ListView { 
     id: outer 
     model: model1 
     delegate: listdelegate 
     anchors.fill: parent 
    } 

    Component { 
     id: listdelegate 

     Item { 
      width: 100 
      height: col.childrenRect.height 

      Column { 
       id: col 
       anchors.left: parent.left 
       anchors.right: parent.right 
       Text { 
        id: t1 
        text: name 
       } 
       ListView { 
        id: insidelist 
        model: model2 
        property int collapseHeightFlag: childrenRect.height 
        delegate: Component { 
         id: delegate2 

         Item { 
          width: 100 
          height: col2.childrenRect.height 

          Column { 
           id: col2 
           anchors.left: parent.left 
           anchors.right: parent.right 
           Text { 
            id: name1 
            text: name 
           } 
          } 
          MouseArea { 
           anchors.fill: parent 
           onClicked: { 
            insidelist.currentIndex = index; 
           } 
          } 
         } 
        } 
        contentHeight: contentItem.childrenRect.height 
        height: 0 
        anchors.left: parent.left 
        anchors.right: parent.right 
        clip: true 
        highlight: Rectangle { 
         color: "pink" 
         radius: 2 
        } 
        focus: true 
       } 
      } 
      Rectangle { 
       color: "red" 
       width: 10 
       height: 10 
       anchors.right: parent.right 
       anchors.rightMargin: 5 
       anchors.top: parent.top 
       anchors.topMargin: 5 

       MouseArea { 
        anchors.fill: parent 
        onClicked: { 
         if(insidelist.height === insidelist.collapseHeightFlag) { 
          insidelist.height = 0; 
         } 
         else 
          insidelist.height = insidelist.collapseHeightFlag; 
        } 
       } 
      } 
     } 
    } 
}