QML Listview sélection de l'élément en surbrillance sur le clic
Salut je veux mettre ce code:
highlight: Rectangle {
color: "black"
radius: 5
opacity: 0.7
focus: true
}
dans mouseArea dans onclick handler:
MouseArea {
id: mouse_area1
z: 1
hoverEnabled: false
anchors.fill: parent
onClicked: {
}
c'est tout listView:
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
}
}
pour le moment, highlight ne fonctionne que lorsque vous utilisez des flèches, mais ce sera une application pour android, donc j'ai besoin de toucher ce même effet, et la deuxième question Est comment lire certaines données à partir de l'élément sélectionné dans listview? A l'intérieur j'ai comme id,nom,lastname,numéro et adresse. Je veux mettez ces valeurs dans des boîtes text_input.
Merci
5 réponses
il semble que vous ayez besoin de deux solutions à votre question:
- vous voulez être en mesure de définir l'article courant du
ListViewquand il est cliqué - vous voulez savoir quand la sélection courante change
La Qt5 documentation , dit ceci à propos de ListView de la souris et de la touche de la manipulation:
Le point de vue de la poignée glisser - glisser de leur contenu, mais ils ne gèrent pas l'interaction tactile avec les délégués individuels. Pour que les délégués puissent réagir à l'entrée tactile, par exemple pour régler l'index actuel, une zone de souris avec la logique de manipulation tactile appropriée doit être fournie par le délégué.
l'entrée de la clé va fonctionner out-of-the-box, mais vous aurez besoin d'attraper explicitement l'événement souris/toucher sur le délégué, et de changer la valeur ListView.currentIndex basé sur le index valeur de l'élément délégué sélectionné.
voici un exemple complet:
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')
}
}
il fait les choses suivantes:
- crée une liste simple et un modèle
- utilise un
MouseAreaitem dans l'item delegate pour mettre à jour lelist.currentIndex = indexqui est un var local et unique à l'item sélectionné - écoute l'événement
onCurrentItemChangedduListViewpour montrer comment accéder aux valeurs actuelles des éléments du modèle - lie la valeur texte de l'élément actuellement sélectionné à l'élément en surbrillance pour montrer en utilisant les valeurs actuellement sélectionnées ailleurs
- Uncement
//id: contactDelegate. - Set
contactDelegate.ListView.view.currentIndex = indexdans leOnClickmême handler.
plus simple que jamais, vous pouvez utiliser: onCurrentItemChanged
ListView{
id: listViewMainMenu
signal Myselect(int playmode)
onCurrentItemChanged: Myselect(listViewMainMenu.currentIndex)
// ...
}
pour ceux qui utilisent la mise en évidence sur un ListView avec une hauteur spécifique (étant: pas 100% Hauteur remplie):
assurez-vous d'activer la propriété clip de ListView, car sinon le surlignage sera toujours visible en dehors des limites de ListView lors du défilement.
ListView
{
clip: true
}
comme discuté ici: masquer le point culminant D'un ListView en faisant défiler