QML Listview选中项目突出显示单击

时间:2012-02-22 17:35:30

标签: qt listview qml selecteditem

您好,我想把这段代码:

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:

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的应用程序所以我需要触摸相同的效果,而SECOND问题是如何从列表视图中的选定项目读取某些数据? 在里面我喜欢id,名字,姓氏,号码和地址。 我想将这些值放入text_input框。

谢谢

5 个答案:

答案 0 :(得分:25)

denoth提供的答案:您需要添加以下行:

listview1.currentIndex = index 

答案 1 :(得分:25)

您的问题似乎需要两种解决方案:

  1. 您希望能够在点击时设置ListView的当前项目
  2. 您希望能够知道当前选择何时更改
  3. Qt5 documentation说明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的{​​{1}}事件以显示如何访问当前模型项值
    • 将当前所选项目的文本值绑定到要在其他位置使用当前选定值显示的高亮项目

答案 2 :(得分:5)

ListView提供了所谓的“attached properties”,即列表delegate中可用的属性。其中Listview.view是对列表本身的引用。它可用于访问currentIndex属性并更新它。因此,要解决您的问题:

  1. 取消注释//id: contactDelegate
  2. 在中设置contactDelegate.ListView.view.currentIndex = index OnClick甚至处理程序。

答案 3 :(得分:3)

最简单,您可以使用:onCurrentItemChanged

ListView{
    id: listViewMainMenu
    signal Myselect(int playmode)
    onCurrentItemChanged: Myselect(listViewMainMenu.currentIndex)
    // ...
}

答案 4 :(得分:1)

对于那些在具有特定高度的ListView上使用突出显示的人(是:不是100%填充高度):

请务必启用ListView的clip属性,否则滚动时仍会在ListView的边框外部显示突出显示。

ListView 
{
    clip: true    
}   

如下所述: Hide the highlight of a ListView while scrolling