qml学习-----------GroupBox（分组框）和ComboBox（组合框）

来源：互联网发布：单片机压力传感器编辑：程序博客网时间：2024/06/15 03:18

在日常软件中，分组框和组合框也是经常用到的，其中组合框是有一个单行编辑框和一个下拉菜单组成的。
它的值可以通过model ，或者ListModel来进行操作。
然后也可以像单选框复选框一样的来自定义风格。下面就来一起学下把：

import QtQuick 2.2import QtQuick.Controls 1.2import QtQuick.Controls.Styles 1.2Rectangle{    width: 480;    height: 360;    color:"#a0a0a0";    Grid{        anchors.fill: parent;        rows:2;        columns: 2;        rowSpacing: 4;        columnSpacing: 4;        GroupBox{            width: 200;            height: 120;            title:"只读电器";            ComboBox{                anchors.top: parent.top;                anchors.topMargin: 8;                width: parent.width;                model: ["TV","CD Player","Set Top BOX","Router"];            }        }        GroupBox{            width: 200;            height: 120;            title:"可编辑水果";            ComboBox{                anchors.top: parent.top;                anchors.topMargin: 8;                width: parent.width;                editable: true;                model: ListModel{                    ListElement{text: "Banana"  ; color:"yellow";}                }                onAccepted: {                    if(count < 4 && find(currentText) === -1){                        model.append({text: editText});                        currentIndex = find(currentText);                        if(count === 4){                            editable = false;                        }                    }                }            }        }        GroupBox{            width: 200;            height: 120;            title:"定制风格";            ComboBox{                anchors.top : parent.top;                anchors.topMargin: 8;                width: parent.width;                model: ["Google" , "IBM" , "Digia"];                style: ComboBoxStyle{                    dropDownButtonWidth: 20;                    background: Rectangle{                        implicitHeight: 24;                        border.width: control.editabel? 0: 1;                        border.color: (control.hovered || control.pressed )?                                          "blue":"gray";                        color: (control.hovered || control.pressed) ? "#e0e0e0":"#c0c0c0";                        Canvas{                            width: 16;                            height: 18;                            anchors.right: parent.right;                            anchors.rightMargin: 2;                            anchors.top: parent.top;                            anchors.topMargin: 1;                            onPaint: {                                var ctx = getContext("2d");                                ctx.save();                                ctx.strokeStyle = "black";                                ctx.lineWidth = 2;                                ctx.beginPath();                                ctx.moveTo(1 , 8);                                ctx.lineTo(8 , 16);                                ctx.lineTo(15 , 8);                                ctx.stroke();                                ctx.restore();                            }                        }                    }                    label: Text{                        anchors.left: parent.left;                        anchors.leftMargin: 2;                        width: parent.width - 22;                        height: parent.height;                        verticalAlignment: Text.AlignVCenter;                        horizontalAlignment:  Text.AlignHCenter;                        text:control.currentText;                        color:(control.hovered || control.pressed) ? "blue":"black";                    }                }            }        }        GroupBox{            width: 200;            height: 120;            title:"月份输入";            ComboBox{                anchors.top: parent.top;                anchors.topMargin: 8;                width: parent.width;                editable: true;                model: ListModel{                }                validator: IntValidator{                    top :12;                    bottom: 1;                }                onAccepted: {                    if(count< 12 && find(currentText) === -1){                        model.append({text: editText});                        currentIndex = find(currentText);                        if(count === 12){                            editable = false;                        }                    }                }            }        }    }}

其中最难得地方就是第三个组合框的风格使用了画布来自定义控件的风格，还指定了文字在不同状态下的颜色等。

0 0