ListViewのデリゲートを拡張する要素のサブリストを作成する

Question

QMLのexamplesにある拡張デリゲートの例を変更しようとしています。ユーザーがlistmodelの要素をクリックするたびに、また強調表示も行われるべきである。

どのような体でも、私にそれを行う方法を提案できますか？ソリューションの

import QtQuick 2.3 
import QtQuick.Controls 1.2 
import QtQuick.Window 2.2 

ApplicationWindow { 
    title: qsTr("Advanced driver Assistance System") 
    width: 640 
    height: 480 
    Rectangle{ 
     id: mainpage 
     width: parent.width 
     height: parent.height 
     color: "black" 
     Component 
     { 
      id: adasdelegate 
      Item 
      { 
       id: adasConditionsItem 
       property real detailsOpacity: 0 
       width: listView.width 
       height: 120 

      //Background Rectangle for each adasConditions. 
      Rectangle 
      { 
       id: itemBackground 
       x: 2 
       y: 2 
       width: parent.width - x*2 
       height: parent.height - y*2 
       color: "steelblue" 
       border.color: "orange" 
       radius: 10 
      } 

      //Defining MouseArea to display the specific adas condition. 
      MouseArea 
      { 
       anchors.fill: parent 
       onClicked: { 
        adasConditionsItem.state = 'AdasConditions' 
        listView.currentIndex = index 
        //console.info("index :", listView.currentItem.objectName) 
       } 
      } 
      Row 
      { 
       id: topLayout 
       x: 10 
       y: 10 
       height: adasConditionImage.height 
       spacing: 10 
       Image 
       { 
        id: adasConditionImage 
        width: 100 
        height: 100 
        source : defaultPicture 
       } 
       Column 
       { 
        width: itemBackground.width - adasConditionImage.width - 10 
        height: itemBackground.height 
        spacing: 10 

        Text { 
         id: mainTitle 
         text: title 
         font.bold: true 
         font.pointSize: 10 
        } 
        Text { 
         id: subTitle 
         text: defaultConditions 
         font.bold: true 
         font.pointSize: 20 
        } 
       } 
      } 

      TextButton{ 
       y: 10 
       anchors { right: itemBackground.right; rightMargin: 10} 
       opacity: adasConditionsItem.detailsOpacity 
       text: "Close" 
       onClicked: adasConditionsItem.state = ''; 
      } 

      states:State{ 
       name: "AdasConditions" 
       PropertyChanges { 
        target: itemBackground 
        color: "white" 
       } 
       PropertyChanges{ 
        target: adasConditionImage 
        width: 130 
        height: 130 
       } 
       PropertyChanges{ 
        target: mainTitle 
        visible: false 
       } 
       PropertyChanges { 
        target: adasConditionsItem 
        height: listView.height 
       } 

       PropertyChanges { 
        target: adasConditionsItem.ListView.view 
        explicit: true 
        contentY: adasConditionsItem.y 
       } 
       PropertyChanges{ 
        target: adasConditionsItem 
        detailsOpacity: 1 
        x: 0 
       } 

       PropertyChanges { 
        target: adasConditionsItem.ListView.view 
        interactive: false 
       } 
      } 
      transitions: Transition{ 
       ParallelAnimation { 
        ColorAnimation { property: "color"; duration: 500} 
        NumberAnimation { duration: 300; properties: "detailsOpacity, x, contentY, height, width"} 
       } 
      } 
     } 
    } 


    ListView { 
     id: listView 
     anchors.fill: parent 
     model: AdasConditionsModel {} 
     delegate: adasdelegate 
     focus: true 
     onCurrentItemChanged: console.log(model.get(listView.currentIndex).name + ' selected') 
     } 
    } 
} 




//Model code. 
import QtQuick 2.0 

ListModel{ 
    id: nestedModel 
    ListElement{ 
     title: "Driving Conditions" 
     defaultConditions: "Highway driving" 
     defaultPicture: "HighwayDriving.jpg" 
     subItems: [ 
      ListElement { 
       itemName: "Highway driving" 
       picture: "HighwayDriving.jpg" 
      }, 
      ListElement { 
       itemName: "Urban driving" 
       picture: "UrbanDriving.jpg" 
      }, 
      ListElement { 
       itemName: "Forward park Assist" 
       picture: "FrontPark.jpg" 
      }, 
      ListElement { 
       itemName: "Reverse park Assist" 
       picture: "ReversePark.jpg" 
      } 
     ] 

    } 

    ListElement{ 
     title: "Weather Conditions" 
     defaultConditions: "Normal" 
     defaultPicture: "Suuny.jpg" 
     subItems: [ 
      ListElement { 
       itemName: "Normal" 
       picture: "Suuny.jpg" 
      }, 
      ListElement { 
       itemName: "Rain" 
       picture: "Rain.jpg" 
      }, 
      ListElement { 
       itemName: "Snow" 
       picture: "Snow.jpg" 
      } 
     ] 
    } 
    ListElement{ 
     title: "Lightning Conditions" 
     defaultConditions: "Day" 
     defaultPicture: "Day.jpg" 
     subItems: [ 
      ListElement { 
       itemName: "Day" 
       picture: "Day.jpg" 
      }, 
      ListElement { 
       itemName: "Night" 
       picture: "Night.jpg" 
      }, 
      ListElement { 
       itemName: "Dusk" 
       picture: "Dusk.jpg" 
      } 
     ] 

    } 
} 

Answer 1

一つの例のために、異なるデリゲートを適用することです：

import QtQuick 2.6 
import QtQuick.Window 2.2 

Window { 
    visible: true 
    width: 800 
    height: 600 

    ListModel { 
     id: listModel 
     ListElement { itemStr: "ITEM1" } 
     ListElement { itemStr: "ITEM2" } 
     ListElement { itemStr: "ITEM3" } 
    } 

    Component { 
     id: rowComponent 
     Rectangle { 
      height: 30 
      width: itemWidth 
      color: "#EFEFEF" 
      Text { 
       text: itemText 
       anchors.fill: parent 
       anchors.leftMargin: 10 
       verticalAlignment: Text.AlignVCenter 
      } 
      MouseArea { 
       anchors.fill: parent 
       cursorShape: Qt.PointingHandCursor 
       onClicked: { 
        list.currentIndex = itemIndex; 
       } 
      } 
     } 
    } 

    Component { 
     id: listComponent 
     Rectangle { 
      height: lst.height 
      width: itemWidth 
      color: "#DEDEDE" 
      ListView { 
       id: lst 
       width: itemWidth 
       height: model.count * 20 
       model: listModel 
       delegate: Text { 
        height: 20 
        x: 5 
        text: itemStr.toLowerCase() 
        verticalAlignment: Text.AlignVCenter 
        font.bold: itemIndex == index 
       } 
      } 
     } 
    } 

    ListView { 
     id: list 
     anchors.fill: parent 
     spacing: 1 
     currentIndex: -1 
     model: listModel 
     delegate: Item { 
      height: childrenRect.height 
      width: parent.width 
      clip: true 
      Loader { 
       property int itemIndex: index 
       property string itemText: itemStr 
       property int itemWidth: parent.width 
       sourceComponent: list.currentIndex == index ? listComponent : rowComponent 
      } 
      Behavior on height { 
       NumberAnimation { duration: 300; easing.type: Easing.OutBack } 
      } 
     } 
    } 
}