QML 列表视图单击时突出显示所选项目

问题描述 投票：0回答：7

嗨，我想输入此代码：

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的应用程序，因此我需要触摸相同的效果，第二个问题是如何从列表视图中的选定项目中读取某些数据？ 里面有我的身份证、姓名、姓氏、号码和地址。 我想将这些值放入文本输入框中。

谢谢你

qt listview qml selecteditem
7个回答
40
投票

看来您的问题需要两种解决方案：

  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
    事件以显示如何访问当前模型项值
  • 将当前所选项目的文本值绑定到突出显示项目，以在其他地方使用当前所选值进行显示
28
投票

由denoth提供的答案：您需要添加此行：

listview1.currentIndex = index
5
投票

ListView
提供所谓的“附加属性”，即列表的 
delegate
中可用的属性。其中
Listview.view
是对列表本身的引用。它可用于访问 
currentIndex
属性并更新它。因此，要解决您的问题只需：

  1. 取消注释
    //id: contactDelegate
    。
  2. 将 
    contactDelegate.ListView.view.currentIndex = index
    设置为 
    OnClick
    甚至处理程序。
5
投票

比以往更简单，您可以使用：

onCurrentItemChanged

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

//不要忘记连接到这个信号 

otheritem.connect(thisitem.Myselect)
//用于拖动并且也适用于路径视图

4
投票

对于那些在具有特定高度的 ListView 上使用突出显示的人（即：不是 100% 高度填充）：

确保启用 ListView 的 clip 属性，否则滚动时，突出显示在 ListView 边框之外仍然可见。 

ListView 
{
    clip: true    
}

正如这里所讨论的： 滚动时隐藏 ListView 的突出显示

1
投票

答案确实是

listView.currentIndex = index
。

在研究这个答案时，我发现 

ListView
可能没有键盘焦点，因此，我发现可能有必要调用 
listView.forceActiveFocus()
以便处理向上和向下箭头键按下。

我发现委托，尤其是 

Text
委托中 
ListView
的用法冗长且麻烦。为了解决这个问题，我重构了一个 
AppInfo
组件，以便以良好的方式呈现联系人。

为了完善答案，我提供了一些联系人的示例数据

ListModel
并清理了突出显示机制：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    ListView {
        id: listView
        anchors.fill: parent
        model: contacts
        delegate: MouseArea {
            width: columnLayout.width + 20
            height: columnLayout.height + 20
            ColumnLayout {
                id: columnLayout
                anchors.centerIn: parent
                AppInfo { label: "ID"; value: id_user }
                AppInfo { label: "Name"; value: name }
                AppInfo { label: "Last Name"; value: last_name }
                AppInfo { label: "Tel number"; value: phone }
                AppInfo { label: "Address"; value: address }
            }
            onClicked: {
                listView.currentIndex = index;
                listView.forceActiveFocus();
            }
        }
        highlight: Rectangle {
            border.color: "black"
            radius: 5 
            opacity: 0.7
        }
    }
    ListModel {
        id: contacts
        Component.onCompleted: {
            for (let [id_user, name, last_name, phone, address] of [
                ["bgates","Bill","Gates","555-Microsoft","1 Microsoft Way"],
                ["sjobs","Steve","Jobs","555-Apple","1 Apple St"],
                ["jbezos","Jeff","Bezos","555-Amazon","1 Amazon Ave"]
            ]) {
                append({id_user, name, last_name, phone, address});
            }
        }
    }
}

//AppInfo.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
RowLayout {
    property string label
    property string value
    Text {
        Layout.preferredWidth: 150
        text: label
        horizontalAlignment: Text.AlignRight
        color: "steelblue"
        font.bold: true
    }
    Text {
        Layout.preferredWidth: 150
        text: value
    }
}

您可以在线尝试！

0
投票

从 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
    }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.