[英]QML Listview selected item highlight on click
嗨,我想把这段代码:
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 和 address。 我想将这些值放入 text_input 框中。
谢谢
您的问题似乎需要两种解决方案:
ListView
的当前项目 Qt5 文档说明了有关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
,这是一个本地list.currentIndex = index
并且对于所选项目是唯一的ListView
的onCurrentItemChanged
事件以显示如何访问当前模型项值 ListView
提供所谓的“附加属性”,即列表delegate
可用的属性。 其中Listview.view
是对列表本身的引用。 它可用于访问currentIndex
属性并更新它。 因此,要解决您的问题:
//id: contactDelegate
。OnClick
偶数处理程序中设置contactDelegate.ListView.view.currentIndex = index
。比以往任何时候都简单,您可以使用: onCurrentItemChanged
ListView{
id: listViewMainMenu
signal Myselect(int playmode)
onCurrentItemChanged: {
Myselect(listViewMainMenu.currentIndex)
console.log("index changed see this " + currentIndex)
}
// ...
}
// 不要忘记连接到这个信号otheritem.connect(thisitem.Myselect)
//用于拖动并且也适用于路径视图
对于那些在具有特定高度的 ListView 上使用突出显示的人(即:不是 100% 高度填充):
确保启用 ListView 的剪辑属性,否则在滚动时高亮显示在 ListView 的边框之外。
ListView
{
clip: true
}
如此处所讨论: 滚动时隐藏 ListView 的突出显示
答案确实是listView.currentIndex = index
。
在研究这个答案时,我发现ListView
可能没有键盘焦点,因此,我发现可能需要调用listView.forceActiveFocus()
以便处理向上和向下箭头按键。
我发现委托,尤其是ListView
委托中Text
的使用是冗长和繁琐的。 为了清理它,我重构了一个AppInfo
组件,以便以一种很好的方式呈现联系人。
为了完善答案,我为联系人ListModel
提供了一些示例数据并清理了突出显示机制:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
ListView {
id: listView
anchors.fill: parent
model: contacts
clip: true
focus: true
delegate: Item {
width: frame.width
height: frame.height
Frame {
id: frame
background: Item { }
ColumnLayout {
id: columnLayout
AppInfo { label: "ID"; value: id_user }
AppInfo { label: "Name"; value: user_name }
AppInfo { label: "Last Name"; value: user_lastname }
AppInfo { label: "Tel number"; value: user_number }
AppInfo { label: "Address"; value: user_address }
}
}
MouseArea {
anchors.fill: parent
onClicked: {
listView.currentIndex = index;
listView.forceActiveFocus();
}
}
}
highlight: Rectangle {
border.color: "black"
radius: 5
opacity: 0.7
focus: true
}
}
ListModel {
id: contacts
ListElement {
id_user: "bgates"
user_name: "Bill"
user_lastname: "Gates"
user_number: "555-Microsoft"
user_address: "1 Microsoft Way"
}
ListElement {
id_user: "sjobs"
user_name: "Steve"
user_lastname: "Jobs"
user_number: "555-Apple"
user_address: "1 Apple St"
}
ListElement {
id_user: "jbezos"
user_name: "Jeff"
user_lastname: "Bezos"
user_number: "555-Amazon"
user_address: "1 Amazon Ave"
}
}
}
//AppInfo.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
RowLayout {
property string label: "ID"
property string value: "id"
Text {
Layout.preferredWidth: 100
text: label
verticalAlignment: Text.AlignTop
wrapMode: Text.NoWrap
horizontalAlignment: Text.AlignRight
color: "steelblue"
font.family: "Helvetica"
font.pointSize: 10
font.bold: true
}
Text {
Layout.preferredWidth: 100
text: value
verticalAlignment: Text.AlignTop
wrapMode: Text.NoWrap
horizontalAlignment: Text.AlignLeft
font.family: "Helvetica"
font.pointSize: 10
}
}
您可以在线试用!
从 Qt 5.7 开始就有ItemDelegate 。 默认情况下,它会对鼠标点击做出反应。
import QtQuick
import QtQuick.Controls
ListView {
model: ListModel {
ListElement {
name: "Item 1"
}
ListElement {
name: "Item 2"
}
ListElement {
name: "Item 3"
}
}
delegate: ItemDelegate {
text: name
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.