Выбранный элемент QML Listview выделяется при нажатии

Привет, я хочу поставить этот код:

highlight: Rectangle {
    color: "black"
    radius: 5 
    opacity: 0.7
    focus: true
}

в mouseArea в обработчике onclick:

MouseArea {
    id: mouse_area1
    z: 1
    hoverEnabled: false
    anchors.fill: parent
    onClicked: {
    }

Это все 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
              }
}

На данный момент подсветка работает только при использовании стрелок, но это будет приложение для Android, поэтому мне нужно прикоснуться к тому же эффекту, и ВТОРОЙ вопрос - как читать определенные данные из выбранного элемента в списке? Внутри у меня есть идентификатор, имя, фамилия, номер и адрес. Я хочу поместить эти значения в поля text_input.

Спасибо


person user123_456    schedule 22.02.2012    source источник
comment
Я сам нашел решение: мне нужно было добавить эту строку: listview1.currentIndex = index   -  person user123_456    schedule 23.02.2012
comment
denoth: Я создал вашу подсказку в качестве ответа. Это лучше, потому что все видят, что на ваш вопрос был дан ответ.   -  person Matt    schedule 22.11.2012


Ответы (5)


Ответ предоставлен denoth: вам необходимо добавить эту строку:

listview1.currentIndex = index 
person Matt    schedule 22.11.2012

Похоже, вам нужно два решения вашего вопроса:

  1. Вы хотите иметь возможность устанавливать текущий элемент ListView при нажатии
  2. Вы хотите знать, когда изменяется текущий выбор

В документации Qt5 говорится это о ListView мыши и касании умение обращаться:

Представления обрабатывают перетаскивание своего содержимого, однако они не обрабатывают сенсорное взаимодействие с отдельными делегатами. Чтобы делегаты реагировали на сенсорный ввод, например чтобы установить currentIndex, делегат должен предоставить MouseArea с соответствующей логикой обработки касания.

Ввод с помощью клавиш будет работать по умолчанию, но вам нужно будет явно перехватить событие мыши / касания на делегате и изменить значение ListView.currentIndex на основе значения index выбранного элемента делегата.

Вот полный пример:

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, который является локальной переменной и уникален для выбранного элемента
  • прослушивает событие onCurrentItemChanged для ListView, чтобы показать, как получить доступ к текущим значениям элемента модели
  • связывает текстовое значение текущего выбранного элемента с выделенным элементом для отображения с использованием текущих выбранных значений в другом месте
person Ali    schedule 27.02.2015

ListView предоставляет так называемые «вложенные свойства», т. Е. Свойства имеется в delegate для списка. Среди них Listview.view есть ссылка на сам список. Его можно использовать для доступа к свойству currentIndex и его обновления. Следовательно, чтобы решить вашу проблему:

  1. Раскомментируйте //id: contactDelegate.
  2. Установите contactDelegate.ListView.view.currentIndex = index в обработчике OnClick even.
person S.M.Mousavi    schedule 07.08.2013

Для тех, кто использует выделение в ListView с определенной высотой (не заполняется на 100% по высоте):

Обязательно включите свойство clip для ListView, так как в противном случае выделение по-прежнему будет видно за пределами границ ListView при прокрутке.

ListView 
{
    clip: true    
}   

Как обсуждалось здесь: Скрыть выделение ListView при прокрутке

person Bartel    schedule 09.01.2017

Как никогда просто, вы можете использовать: onCurrentItemChanged

ListView{
    id: listViewMainMenu
    signal Myselect(int playmode)
    onCurrentItemChanged: {
          Myselect(listViewMainMenu.currentIndex)
          console.log("index changed see this " + currentIndex)
    }
    // ...
}

// не забываем подключиться к этому сигналу otheritem.connect(thisitem.Myselect) // используется при перетаскивании и работает также с pathview

person adnx2h    schedule 17.09.2014
comment
это самый простой способ, но он требует более подробного описания. Излучаемый сигнал из списка или пути должен быть связан с локальной функцией, которая изменяет представление. В сводке см. Это onCurrentItemChanged: Myselect (listViewMainMenu.currentIndex); console.log (индекс = + currentIndex) - person Drl Sherif Omran; 06.11.2019