QML listview chọn mục nổi bật trên nhấp chuột

Question

Hi Tôi muốn đặt mã này:

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

vào mouseArea trong handler onclick:

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

Đây là tất cả 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 
       } 
} 

Hiện tại, đánh dấu chỉ hoạt động khi sử dụng mũi tên, bbut này sẽ là ứng dụng cho android nên tôi cần liên lạc với cùng hiệu ứng đó và câu hỏi SECOND i cách đọc dữ liệu nhất định từ mục đã chọn trong listview? Bên trong tôi có id, tên, họ, số và địa chỉ. Tôi muốn đặt các giá trị đó vào các hộp text_input.

Cảm ơn bạn

Answer 1

trả lời được cung cấp bởi denoth: Bạn cần phải thêm dòng này:

listview1.currentIndex = index 

Answer 2

ListView cung cấp cái gọi là "attached properties", ví dụ: tài sản có sẵn trong delegate cho danh sách. Trong số đó, Listview.view là tham chiếu đến chính danh sách đó. Nó có thể được sử dụng để truy cập vào tài sản currentIndex và cập nhật nó. Do đó, để giải quyết vấn đề của bạn chỉ:

1. Uncomment //id: contactDelegate.
2. Đặt contactDelegate.ListView.view.currentIndex = index trong số OnClick thậm chí là trình xử lý.

Answer 3

đơn giản hơn bao giờ hết, bạn có thể sử dụng: onCurrentItemChanged

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

Answer 4

Có vẻ bạn cần hai giải pháp cho câu hỏi của bạn:

1. Bạn muốn để có thể thiết lập các mục hiện hành của ListView khi được nhấp vào
2. Bạn muốn có thể biết khi nào lựa chọn hiện tại thay đổi

Các Qt5 documentation nói về ListView chuột và liên lạc xử lý này:

Những quan điểm xử lý kéo và flicking nội dung của họ, tuy nhiên họ không xử lý tương tác cảm ứng với các đại biểu cá nhân. Để các đại biểu phản ứng với đầu vào chạm, ví dụ: để thiết lập currentIndex, một MouseArea với logic xử lý cảm ứng thích hợp phải được đại biểu cung cấp.

đầu vào chính sẽ làm việc out-of-the-box nhưng bạn sẽ cần phải nắm bắt rõ ràng chuột/chạm vào sự kiện trên các đại biểu, và thay đổi giá trị ListView.currentIndex dựa trên giá trị index của mặt hàng đó đại biểu được chọn.

Dưới đây là một ví dụ đầy đủ:

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') 
    } 
} 

Nó những điều sau đây:

• tạo ra một danh sách đơn giản và mô hình
• sử dụng một mục MouseArea trong các đại biểu mục để cập nhật thiết lập list.currentIndex = index là một biến địa phương và duy nhất cho mục đã chọn
• lắng nghe sự kiện onCurrentItemChanged của ListView để hiển thị như thế nào để truy cập mô hình mục hiện giá trị
• liên kết với các giá trị văn bản của mục đang được chọn đến mục nổi bật để hiển thị bằng cách sử dụng các giá trị đang được chọn ở những nơi khác

Answer 5

Đối với những người sử dụng nhấn mạnh vào một ListView với chiều cao cụ thể (không: 100% chiều cao đã điền):

Đảm bảo bật thuộc tính clip của Chế độ xem danh sách, nếu không thì phần đánh dấu sẽ vẫn hiển thị bên ngoài đường viền của ListView trong khi cuộn.

ListView 
{ 
    clip: true  
} 

Như đã thảo luận ở đây: Hide the highlight of a ListView while scrolling