QML Listview 选中的项目在点击时突出显示
Posted
技术标签:
【中文标题】QML Listview 选中的项目在点击时突出显示【英文标题】：QML Listview selected item highlight on click 【发布时间】：2012-03-13 02:06:58 【问题描述】：您好，我想输入这段代码：
highlight: Rectangle
color: "black"
radius: 5
opacity: 0.7
focus: true
在 onclick 处理程序中进入 mouseArea：
MouseArea
id: mouse_area1
z: 1
hoverEnabled: false
anchors.fill: parent
onClicked:
这是所有列表视图：
ListView
id: listview1
x: 0
y: 82
// width: 574
// height: 967
width: window.width
height: window.height
visible: true
keyNavigationWraps: false
boundsBehavior: Flickable.DragAndOvershootBounds
opacity: 1
maximumFlickVelocity: 2500
anchors.leftMargin: 0
highlightMoveSpeed: 489
contentWidth: 0
preferredHighlightEnd: 2
spacing: 5
highlightRangeMode: ListView.NoHighlightRange
snapMode: ListView.SnapToItem
anchors.bottomMargin: 0
anchors.rightMargin: 0
anchors.topMargin: 82
anchors.fill: parent
model: myModel
delegate:Component
//id: contactDelegate
Item
property variant myData: model
width: 574; height: 90
Column
x: 12
y: 0
width: 562
height: 90
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 12
anchors.topMargin: 0
anchors.fill: parent
spacing: 2
Text text: '<b>ID: </b> ' + id_user ; verticalAlignment: Text.AlignTop; wrapMode: Text.NoWrap; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10
Text text: '<b>Name: </b> ' + user_name; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10
Text text: '<b>Lastname: </b> ' + user_lastname; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10
Text height: 16; text: '<b>Tel number: </b> ' + user_number; verticalAlignment: Text.AlignVCenter; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10
Text text: '<b>Address: </b> ' + user address; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10
MouseArea
id: mouse_area1
z: 1
hoverEnabled: false
anchors.fill: parent
onClicked:
Item
//delegate: contactDelegate
highlight: Rectangle
color:"black"
radius: 5
opacity: 0.7
focus: true
目前突出显示仅在使用箭头时才有效，但是这将是适用于 android 的应用程序，所以我需要触摸相同的效果，第二个问题是如何从列表视图中的选定项目中读取某些数据？ 在里面我有像 id、name、lastname、number 和 adress。 我想将这些值放入 text_input 框中。
谢谢
【问题讨论】：
我自己找到了解决方案：我需要添加这一行：listview1.currentIndex = index
denoth：我已经创建了您的提示作为答案。这样更好，因为每个人都可以看到您的问题已得到解答。
【参考方案1】：
看来您的问题需要两个解决方案：
-
您希望能够在单击时设置
ListView 的当前项
您希望能够知道当前选择的更改时间
Qt5 documentation 这样说ListView 鼠标和触摸处理：
视图处理其内容的拖动和轻弹，但是它们不处理与各个代理的触摸交互。为了让代表对触摸输入做出反应，例如要设置 currentIndex，委托必须提供具有适当触摸处理逻辑的 MouseArea。
键输入可以开箱即用，但您需要显式捕获委托上的鼠标/触摸事件，并根据所选委托项的 index 值更改 ListView.currentIndex 值.
这是一个完整的例子：
import QtQuick 2.4
import QtQuick.Window 2.2
Window
width: 640
height: 480
visible: true
ListModel
id: model
ListElement
name:'abc'
number:'123'
ListElement
name:'efg'
number:'456'
ListElement
name:'xyz'
number:'789'
ListView
id: list
anchors.fill: parent
model: model
delegate: Component
Item
width: parent.width
height: 40
Column
Text text: 'Name:' + name
Text text: 'Number:' + number
MouseArea
anchors.fill: parent
onClicked: list.currentIndex = index
highlight: Rectangle
color: 'grey'
Text
anchors.centerIn: parent
text: 'Hello ' + model.get(list.currentIndex).name
color: 'white'
focus: true
onCurrentItemChanged: console.log(model.get(list.currentIndex).name + ' selected')
它做了以下事情：
创建一个简单的列表和模型 使用项目委托中的MouseArea 项目来更新设置list.currentIndex = index，这是一个本地变量，对所选项目是唯一的
侦听ListView 的onCurrentItemChanged 事件以显示如何访问当前模型项值
将当前选定项的文本值绑定到突出显示项，以在别处使用当前选定值显示
【讨论】：
【参考方案2】：denoth提供的答案：你需要添加这一行：
listview1.currentIndex = index
【讨论】：
【参考方案3】：ListView 提供所谓的“attached properties”，即列表的delegate 中可用的属性。其中Listview.view是对列表本身的引用。它可用于访问currentIndex 属性并对其进行更新。因此，要解决您的问题：
-
取消注释
//id: contactDelegate。
设置contactDelegate.ListView.view.currentIndex = index
OnClick 甚至处理程序。
【讨论】：
【参考方案4】：对于那些在具有特定高度的 ListView 上使用突出显示的人（即：未填充 100% 高度）：
请务必启用 ListView 的clip 属性，否则在滚动时突出显示仍会在 ListView 的边框之外可见。
ListView
clip: true
正如这里所讨论的： Hide the highlight of a ListView while scrolling
【讨论】：
【参考方案5】：比以往更简单，您可以使用：onCurrentItemChanged
ListView
id: listViewMainMenu
signal Myselect(int playmode)
onCurrentItemChanged:
Myselect(listViewMainMenu.currentIndex)
console.log("index changed see this " + currentIndex)
// ...
//不要忘记连接这个信号
otheritem.connect(thisitem.Myselect) //用于拖动，也适用于路径视图
【讨论】：
这是最简单的方法，但需要更多描述。从列表视图或路径视图发出的信号应连接到更改视图的本地函数。在总结中看到这个 onCurrentItemChanged: Myselect(listViewMainMenu.currentIndex); console.log("index = " + currentIndex)以上是关于QML Listview 选中的项目在点击时突出显示的主要内容，如果未能解决你的问题，请参考以下文章
当代表具有不同的宽度时，QML ListView 滚动不会产生任何动画