web-dev-qa-db-ja.com

QMLリストビューで選択されたアイテムのクリック時のハイライト

こんにちは私はこのコードを置きたい：

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のためのアプリになりますので、タッチで同じ効果が必要です。内部にはid、name、lastname、number、adressがあり、それらの値をtext_inputボックスに入れたいと思います。

ありがとうございました

qtlistviewqmlselecteditem
25
user123_456

denoth による回答：この行を追加する必要があります。

listview1.currentIndex = index
25
Matt

質問には2つの解決策が必要なようです。

  1. クリックしたときにListViewの現在のアイテムを設定できるようにしたい
  2. 現在の選択がいつ変更されるかを知りたい

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のListViewイベントをリッスンして、現在のモデルアイテム値にアクセスする方法を示します
  • 現在選択されている項目のテキスト値を強調表示項目にバインドし、現在選択されている値を他の場所で使用して表示します
26
Ali

ListViewは、いわゆる「 添付プロパティ 」、つまりリストのdelegateで利用可能なプロパティを提供します。その中で Listview.viewはリスト自体への参照です。 currentIndexプロパティにアクセスして更新するために使用できます。したがって、問題を解決するには：

  1. コメントを解除//id: contactDelegate。
  2. セットする contactDelegate.ListView.view.currentIndex = indexOnClick偶数ハンドラー。
5
S.M.Mousavi

これまでにないほどシンプルに使用できます：onCurrentItemChanged

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

特定の高さのListViewで強調表示を使用する場合（100％の高さではない）：

ListViewの clip プロパティを有効にしてください。そうしないと、スクロール中にリストビューの境界線の外側にハイライトが表示されたままになります。

ListView 
{
    clip: true    
}

ここで説明したように、 スクロール中はListViewのハイライトを非表示にします

1
Bartel