更改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 
     } 

    } 
}

}

答

从你的例子：

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 
    } 
}

嗨，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 { 
     // ... 
    } 
    // ... 
}

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

谢谢，明天我会试试这个第一件事。 – theAlse 2014-10-27 17:55:03

更改ListView中所选项目的文本颜色

相关推荐