QML: проблема с раскрывающимся меню

Как получить различные контейнеры элементов в раскрывающемся списке в QML, как показано на рисунке.

введите здесь описание изображения

Я попробовал выполнить требование в приведенной ниже реализации, используя listview, но не смог получить то же самое. Ниже приведен фрагмент

import QtQuick 1.1

Rectangle {
    width:400;
    height: 400;

    Rectangle {
            id:comboBox
            property variant items: ["Item 1", "Item 2", "Item 3"]

            signal comboClicked;
            width: 400;
            height: 30;
            z: 100;
            smooth:true;

            Rectangle {
                id:chosenItem
                radius:4;
                width:parent.width;
                height:comboBox.height;
                color: "#203586"
                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/4;
                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 = ""
                            }
                        }
                    }
                }
            }


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

При вышеописанном подходе я получаю раскрывающийся список, как показано ниже, что не соответствует требованию.

Я пытался использовать различные подходы, но не смог выполнить точное требование при правильной работе введите здесь описание изображения


qt qml qlistview
person DNamto    schedule 15.10.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Добавьте прямоугольник к делегату представления списка. Сделайте размер этого прямоугольника равным размеру элемента (comboBox.width, comboBox.height) за вычетом любого поля, которое вам нравится, и добавьте радиус к этому прямоугольнику, чтобы получить список, показанный на первом изображении.

delegate: Item{
  width:comboBox.width;
  height: comboBox.height;

  Rectangle {
    width: parent.width - margin;
    height: parent.height - margin;
    anchors.centerIn: parent;

    Text {
      text: modelData
      anchors.top: parent.top;
      anchors.left: parent.left;
      anchors.margins: 5;
    }
    MouseArea {
      anchors.fill: parent;
      onClicked: {
        comboBox.state = ""
      }
    }
  }
}
person JuliusG    schedule 15.10.2012
comment
Привет, Юлий. Сначала я пытался использовать тот же подход, но с приведенной выше реализацией раскрывающийся список не работает. - person DNamto; 15.10.2012
comment
Выпадающий список, кажется, работает для меня. В чем проблема, которую вы получаете с этим подходом? - person JuliusG; 15.10.2012
comment
Ранее я не знал об этой проблеме, но при очистке и перестройке проекта все работает нормально. Спасибо за быстрый ответ коллега :) - person DNamto; 15.10.2012