- Qt 5.3
- Qt Quick Controls
- Qt Quick Controls - Gallery
- Controls.qml Example File
- Qt 5.3.2 Reference Documentation

# Controls.qml Example File

gallery/content/Controls.qml

    /****************************************************************************
    **
    ** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
    ** Contact: http://www.qt-project.org/legal
    **
    ** This file is part of the Qt Quick Controls module of the Qt Toolkit.
    **
    ** $QT_BEGIN_LICENSE:BSD$
    ** You may use this file under the terms of the BSD license as follows:
    **
    ** "Redistribution and use in source and binary forms, with or without
    ** modification, are permitted provided that the following conditions are
    ** met:
    **   * Redistributions of source code must retain the above copyright
    **     notice, this list of conditions and the following disclaimer.
    **   * Redistributions in binary form must reproduce the above copyright
    **     notice, this list of conditions and the following disclaimer in
    **     the documentation and/or other materials provided with the
    **     distribution.
    **   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
    **     of its contributors may be used to endorse or promote products derived
    **     from this software without specific prior written permission.
    **
    **
    ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
    ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
    ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
    ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
    ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
    ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
    ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
    ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
    ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
    ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
    ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
    **
    ** $QT_END_LICENSE$
    **
    ****************************************************************************/

    import QtQuick 2.2
    import QtQuick.Controls 1.2
    import QtQuick.Layouts 1.1
    import QtQuick.Controls.Styles 1.1

    Item {
        id: flickable
        anchors.fill: parent
        enabled: enabledCheck.checked

        property int tabPosition: tabPositionGroup.current === r2 ? Qt.BottomEdge : Qt.TopEdge

        RowLayout {
            id: contentRow
            anchors.fill:parent
            anchors.margins: 8
            spacing: 16
            ColumnLayout {
                id: firstColumn
                Layout.minimumWidth: implicitWidth
                Layout.fillWidth: false
                RowLayout {
                    id: buttonrow
                    Button {
                        id: button1
                        text: "Button 1"
                        tooltip:"This is an interesting tool tip"
                        Layout.fillWidth: true
                    }
                    Button {
                        id:button2
                        text:"Button 2"
                        Layout.fillWidth: true
                        menu: Menu {
                            MenuItem { text: "This Button" }
                            MenuItem { text: "Happens To Have" }
                            MenuItem { text: "A Menu Assigned" }
                        }
                    }
                }
                ComboBox {
                    id: combo
                    model: choices
                    currentIndex: 2
                    Layout.fillWidth: true
                }
                ComboBox {
                    model: Qt.fontFamilies()
                    Layout.fillWidth: true
                    currentIndex: 47
                }
                ComboBox {
                    id: editableCombo
                    editable: true
                    model: choices
                    Layout.fillWidth: true
                    currentIndex: 2
                    onAccepted: {
                        if (editableCombo.find(currentText) === -1) {
                            choices.append({text: editText})
                            currentIndex = editableCombo.find(editText)
                        }
                    }
                }
                RowLayout {
                    SpinBox {
                        id: t1
                        Layout.fillWidth: true
                        minimumValue: -50
                        value: -20
                    }
                    SpinBox {
                        id: t2
                        Layout.fillWidth: true
                    }
                }
                TextField {
                    id: t3
                    placeholderText: "This is a placeholder for a TextField"
                    Layout.fillWidth: true
                }
                ProgressBar {
                    // normalize value [0.0 .. 1.0]
                    value: (slider.value - slider.minimumValue) / (slider.maximumValue - slider.minimumValue)
                    Layout.fillWidth: true
                }
                ProgressBar {
                    indeterminate: true
                    Layout.fillWidth: true
                }
                Slider {
                    id: slider
                    value: 0.5
                    Layout.fillWidth: true
                    tickmarksEnabled: tickmarkCheck.checked
                    stepSize: tickmarksEnabled ? 0.1 : 0
                }
                MouseArea {
                    id: busyCheck
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    hoverEnabled:true
                    Layout.preferredHeight: busyIndicator.height
                    BusyIndicator {
                        id: busyIndicator
                        running: busyCheck.containsMouse
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
            }
            ColumnLayout {
                id: rightcol
                Layout.fillWidth: true
                anchors {
                    top: parent.top
                    bottom: parent.bottom
                }

                GroupBox {
                    id: group1
                    title: "CheckBox"
                    Layout.fillWidth: true
                    RowLayout {
                        Layout.fillWidth: true
                        CheckBox {
                            id: frameCheckbox
                            text: "Text frame"
                            checked: true
                            Layout.minimumWidth: 100
                        }
                        CheckBox {
                            id: tickmarkCheck
                            text: "Tickmarks"
                            checked: false
                            Layout.minimumWidth: 100
                        }
                        CheckBox {
                            id: wrapCheck
                            text: "Word wrap"
                            checked: true
                            Layout.minimumWidth: 100
                        }
                    }
                }
                GroupBox {
                    id: group2
                    title:"Tab Position"
                    Layout.fillWidth: true
                    RowLayout {
                        ExclusiveGroup { id: tabPositionGroup }
                        RadioButton {
                            id: r1
                            text: "Top"
                            checked: true
                            exclusiveGroup: tabPositionGroup
                            Layout.minimumWidth: 100
                        }
                        RadioButton {
                            id: r2
                            text: "Bottom"
                            exclusiveGroup: tabPositionGroup
                            Layout.minimumWidth: 100
                        }
                    }
                }

                TextArea {
                    id: area
                    frameVisible: frameCheckbox.checked
                    text: loremIpsum + loremIpsum
                    textFormat: Qt.RichText
                    wrapMode: wrapCheck.checked ? TextEdit.WordWrap : TextEdit.NoWrap
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    MouseArea {
                        id: contextMenu
                        parent: area.viewport
                        anchors.fill: parent
                        acceptedButtons: Qt.RightButton
                        onPressed: editmenu.popup()
                    }
                }
            }
        }
    }