Qt QML下拉列表，如HTML [英] Qt QML dropdown list like in HTML

问题描述

简单的事情，但不能找到它。我想要一个简单的下拉选择框与几个选择。像HTML一样

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

QML的代码是什么？

解决方案

这是一个简单的例子，可以作为起点：

 导入QtQuick 1.0 
 
矩形{
 width：400; 
 height：400; 
 
矩形{
 id：comboBox 
属性变体项目：[项目1，项目2，项目3] 
属性别名selectedItem：selectedItemText 。文本; 
属性别名selectedIndex：listView.currentIndex; 
信号comboClicked; 
 width：100; 
 height：30; 
 z：100; 
 smooth：true; 
 
矩形{
 id：selectedItem 
 radius：4; 
 width：parent.width; 
 height：comboBox.height; 
 color：lightsteelblue
 smooth：true; 
文本{
 anchors.top：parent.top; 
 anchors.left：parent.left; 
 anchors.margins：8; 
 id：selectedItemText 
 text：comboBox.items [0]; 
 font.family：Arial
 font.pointSize：14; 
 smooth：true 
} 
 
 MouseArea {
 anchors.fill：parent; 
 onClicked：{
 comboBox.state = comboBox.state ===dropDown？：dropDown
} 
} 
} 
 
矩形{
 id：dropDown 
 width：comboBox.width; 
 height：0; 
剪辑：true; 
 radius：4; 
 anchors.top：selectedItem.bottom; 
 anchors.margins：2; 
颜色：lightgray
 
 ListView {
 id：listView 
 height：500; 
 model：comboBox.items 
 currentIndex：0 
 delegate：Item {
 width：comboBox.width; 
 height：comboBox.height; 
 
文本{
文本：modelData 
 anchors.top：parent.top; 
 anchors.left：parent.left; 
 anchors.margins：5; 
 
} 
 MouseArea {
 anchors.fill：parent; 
 onClicked：{
 comboBox.state =
 var prevSelection = selectedItemText.text 
 selectedItemText.text = modelData 
 if（chosenItemText.text！= prevSelection）{ 
 comboBox.comboClicked（）; 
} 
 listView.currentIndex = index; 
} 
} 
} 
} 
} 
 
组件{
 id：highlight 
 Rectangle {
 width：comboBox.width; 
 height：comboBox.height; 
颜色：红色; 
 radius：4 
} 
} 
 
状态：State {
 name：dropDown; 
 PropertyChanges {target：dropDown; height：40 * comboBox.items.length} 
} 
 
 transitions：Transition {
 NumberAnimation {target：dropDown;属性：height;缓解。类型：Easing.OutExpo;持续时间：1000} 
} 
} 
} 
  

Simple thing, but can't get find it. I want a simple dropdown selection box with a couple of selections. Like in HTML

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

what is the code for QML for that ?

解决方案

Here's a simple example that could maybe be used as a starting point:

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

这篇关于Qt QML下拉列表，如HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！