更改ListView中所選項目的文本顏色

我有一個ListView（與model和delegate），它工作在我的模型不錯，但我想改變color所選項目到別的東西時，該項目是currentIndex -Item（目前color: skin.gray）。

ListView { 
    id: menuBody_listview 
    width: parent.width 
    height: parent.height 
    currentIndex: 0 
    clip: true 

    highlight: highlighter 
    highlightFollowsCurrentItem: true 

    Behavior on opacity { 
     NumberAnimation { property: "opacity"; duration: 300; easing.type: Easing.InOutQuad } 
    } 

    anchors { 
     top: menuHeader_listview.bottom 
     bottom: parent.bottom 
    } 
    model: ListModel { 
     ListElement { 
      itemIconLeft: 'images/icons/menu/pause.png' 
      itemText: "Cancel" 
      itemIconRight: 'images/icons/menu/take-me-home.png' 
     } 
     ListElement { 
      itemIconLeft: 'images/icons/menu/pause.png' 
      itemText: "Mute" 
      itemIconRight: 'images/nill.png' 
     } 
     ListElement { 
      itemIconLeft: 'images/icons/menu/repeat.png' 
      itemText: "Repeate" 
      itemIconRight: 'images/nill.png' 
     } 
    } 
    delegate: MenuBodyItem { 
     width: menuBody_listview.width 
     anchors.horizontalCenter: parent.horizontalCenter 
     iconLeft: itemIconLeft 
     message: itemText 
     iconRight: itemIconRight 
    } 
}

以下是正在填寫的項目的代碼，ManuBodyItem.qml。

項{

width: 100 
height: 50 
property alias iconLeft: menuitem_icon_start.source 
property alias message: menuitem_text.text 
property alias iconRight: menuitem_icon_end.source 

RowLayout { 
    spacing: 20 
    anchors.fill: parent 

    Image { 
     id: menuitem_icon_start 
     fillMode: Image.PreserveAspectCrop 
     anchors { 
      left: parent.left 
      verticalCenter: parent.verticalCenter 
     } 
    } 

    Text { 
     id: menuitem_text 

     anchors { 
      left: menuitem_icon_start.right 
      verticalCenter: parent.verticalCenter 
      verticalCenterOffset: -2 
      leftMargin: 20 
     } 

     color: skin.gray 
     font { 
      family: "TBD" 
     } 
    } 

    Image { 
     id: menuitem_icon_end 
     fillMode: Image.PreserveAspectCrop 
     source: iconRight 
     anchors { 
      right: parent.right 
      verticalCenter: parent.verticalCenter 
     } 

    } 
}

}

來源

2014-10-27 theAlse

從你的例子：

color: skin.gray用於這將改變文本的顏色，而不是它的背景即文本元素。我明白你想要的。

您可以在這裏使用Rectangle元素，它可以充當背景色組件來設置背景色。因此，可以使用Rectangle而不是委託中的Item根元素。所以MenuBodyItem.qml將如下

Rectangle { 

    width: 100 
    height: 50 
    ... 
}

我們的背景色設置爲矩形，如果它是當前可以使用ListView.isCurrentItem檢查。所以，

Rectangle { 
    color: ListView.isCurrentItem ? "cyan" : "lightblue" 
    width: 100 
    height: 50 
}

現在終於將要設置點擊項目作爲當前一個可在委託項目

delegate: MenuBodyItem { 
    width: menuBody_listview.width 
    anchors.horizontalCenter: parent.horizontalCenter 
    iconLeft: itemIconLeft 
    message: itemText 
    iconRight: itemIconRight 
    MouseArea { 
     anchors.fill: parent 
     onClicked: menuBody_listview.currentIndex = index 
    } 
}

來源

2014-10-27 07:42:43 astre

嗨，Skin.gray只是一個屬性，並定義了一種顏色。除此之外，我無法理解你的解決方案。我只想知道如何在ListView中執行顏色轉換。 – theAlse 2014-10-27 13:33:45

使用ListView的isCurrentItem附加屬性的鼠標區域進行：

Text { 
    id: menuitem_text 

    anchors { 
     left: menuitem_icon_start.right 
     verticalCenter: parent.verticalCenter 
     verticalCenterOffset: -2 
     leftMargin: 20 
    } 

    color: itemDelegate.ListView.isCurrentItem ? "red" : skin.gray 
    font { 
     family: "TBD" 
    } 
}

請注意，你必須給你的根委託項目ID，以便有資格以上的表達式：

Item { 
    id: itemDelegate 

    RowLayout { 
     // ... 
    } 
    // ... 
}

您可以看到與鏈接的示例中使用的相同方法。

來源

2014-10-27 16:42:32 Mitch

謝謝，明天我會試試這個第一件事。 – theAlse 2014-10-27 17:55:03

更改ListView中所選項目的文本顏色

回答

相關問題