Danh sách thả xuống Qt QML như trong HTML

Question

Điều đơn giản, nhưng không thể tìm thấy nó. Tôi muốn một hộp lựa chọn thả xuống đơn giản với một vài lựa chọn. Giống như trong HTML

<select> 
<option>1</option> 
<option>2</option> 
</select> 

mã cho QML cho mã đó là gì?

Answer 1

Dưới đây là một ví dụ đơn giản rằng có lẽ có thể được sử dụng như một điểm khởi đầu:

import QtQuick 1.0 

Rectangle { 
    width:400; 
    height: 400; 

    Rectangle { 
      id:comboBox 
      property variant items: ["Item 1", "Item 2", "Item 3"] 
      property alias selectedItem: chosenItemText.text; 
      property alias selectedIndex: listView.currentIndex; 
      signal comboClicked; 
      width: 100; 
      height: 30; 
      z: 100; 
      smooth:true; 

      Rectangle { 
       id:chosenItem 
       radius:4; 
       width:parent.width; 
       height:comboBox.height; 
       color: "lightsteelblue" 
       smooth:true; 
       Text { 
        anchors.top: parent.top; 
        anchors.left: parent.left; 
        anchors.margins: 8; 
        id:chosenItemText 
        text:comboBox.items[0]; 
        font.family: "Arial" 
        font.pointSize: 14; 
        smooth:true 
       } 

       MouseArea { 
        anchors.fill: parent; 
        onClicked: { 
         comboBox.state = comboBox.state==="dropDown"?"":"dropDown" 
        } 
       } 
      } 

      Rectangle { 
       id:dropDown 
       width:comboBox.width; 
       height:0; 
       clip:true; 
       radius:4; 
       anchors.top: chosenItem.bottom; 
       anchors.margins: 2; 
       color: "lightgray" 

       ListView { 
        id:listView 
        height:500; 
        model: comboBox.items 
        currentIndex: 0 
        delegate: Item{ 
         width:comboBox.width; 
         height: comboBox.height; 

         Text { 
          text: modelData 
          anchors.top: parent.top; 
          anchors.left: parent.left; 
          anchors.margins: 5; 

         } 
         MouseArea { 
          anchors.fill: parent; 
          onClicked: { 
           comboBox.state = "" 
           var prevSelection = chosenItemText.text 
           chosenItemText.text = modelData 
           if(chosenItemText.text != prevSelection){ 
            comboBox.comboClicked(); 
           } 
           listView.currentIndex = index; 
          } 
         } 
        } 
       } 
      } 

      Component { 
       id: highlight 
       Rectangle { 
        width:comboBox.width; 
        height:comboBox.height; 
        color: "red"; 
        radius: 4 
       } 
      } 

      states: State { 
       name: "dropDown"; 
       PropertyChanges { target: dropDown; height:40*comboBox.items.length } 
      } 

      transitions: Transition { 
       NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 } 
      } 
     } 
    } 

Answer 2

Nếu bạn nhắm mục tiêu các thiết bị Nokia (Symbian hay Meego), bạn có thể sử dụng cấp cao các thành phần Qt nhanh. Tôi tin rằng Menu là một cái gì đó tương tự như của html select.

Xem http://doc.qt.nokia.com/qt-components-symbian/qml-menu.html hoặc http://harmattan-dev.nokia.com/docs/library/html/qt-components/qt-components-meego-menu.html

Answer 3

Nếu bạn đang nhắm mục tiêu Symbian, có SelectionListItem và SelectionDialog: http://doc.qt.nokia.com/qt-components-symbian/qml-selectionlistitem.html

Answer 4

Đối với người dùng mới, có một xây dựng trong ComboBox trong Qt5.3 QtQuick.ControlsComboBox - Reference .

Ví dụ từ Tài liệu:

import QtQuick 2.2 
import QtQuick.Controls 1.2 

ComboBox { 
    id: combo 
    editable: true 
    model: ListModel { 
    id: model 
    ListElement { text: "Banana"; color: "Yellow" } 
    ListElement { text: "Apple"; color: "Green" } 
    ListElement { text: "Coconut"; color: "Brown" } 
} 
onAccepted: { 
    if (combo.find(currentText) === -1) { 
    model.append({text: editText}) 
    currentIndex = combo.find(editText) 
    } 
} 
} 

Lưu ý: Tôi đã phải gửi nó như một câu trả lời, vì văn bản là quá dài cho một nhận xét.

Answer 5

Tôi đã sử dụng các phương pháp tiếp cận với ComboBoxStyle (khả năng tùy chỉnh bị giới hạn) và triển khai hoàn toàn tùy chỉnh, nhưng chúng có nhiều hạn chế với quản lý focus và quản lý z-index.

Tôi đã kết thúc với việc triển khai ComboBox bao gồm 2 phần: tiêu đề mà bạn thực sự đặt ở đâu đó và một thành phần thả xuống mà bạn tạo động. Sau này bao gồm một Item bao gồm tất cả mọi thứ (và ngăn chặn hoạt động chuột) và thả xuống được đặt cẩn thận bên dưới tiêu đề.

Mã là khá lớn để bao gồm ở đây để bạn có thể xem chi tiết in my blogpost with all the code