QML : 위쪽으로 열리는 드롭 다운 메뉴

Question

QML의 메뉴 버튼을 클릭하면 위쪽으로 열리는 드롭 다운이 있어야합니다.

나는 listview를 사용하려고 시도했지만, 구현시에는 아래쪽으로 열리는 드롭 다운 메뉴가 나타납니다.

아래의 스 니펫을 참조하십시오. dropDown 항목의 앵커를 변경하는

import QtQuick 1.1 

Rectangle { 
    width: 800 
    height: 480 

    Rectangle { 
     id:comboBox 
     property variant items: ["Red", "Blue", "Green"] 

     signal comboClicked; 
     x: 651 
     y: 344 
     width: 141 
     height: 30; 
     z: 0 
     smooth:true; 

     Rectangle { 
      id:chosenItem 
      radius:4; 
      width:parent.width; 
      height:comboBox.height; 
      color: "#454b4d" 
      smooth:true; 
      Text { 
       anchors.top: parent.top; 
       anchors.margins: 8; 
       id:chosenItemText 
       x: 11 
       y: 5 
       color: "#ffffff" 
       text:"Menu"; 
       anchors.topMargin: 5 
       anchors.left: parent.left 
       anchors.leftMargin: 12 
       font.family: "Arial" 
       font.pointSize: 14; 
       smooth:true 
      } 

      MouseArea { 
       width: 400 
       height: 30 
       anchors.bottomMargin: 0 
       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: "lightblue" 

      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 = "" 
          chosenItemText.text = modelData; 
          listView.currentIndex = index; 
         } 
        } 
       } 
      } 
     } 


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

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

} 

Answer 1

시도 :

그

anchors.top: chosenItem.bottom; 

이

anchors.bottom: chosenItem.top;