■ 输入类

提供了基于 数字 和 文本 输入的各种输入控件

■ Slider

示例一：

ColumnLayout{anchors.fill: parent;RowLayout{Label{text: "音量值："}Label{id: musicLoudtext: "0"}Layout.alignment: Qt.AlignHCenter}Slider{from: 1value: 20to: 100stepSize:1Layout.alignment: Qt.AlignHCenteronMoved: {musicLoud.text = value/1;}}
}

示例二：

  Slider {id: controlvalue: 0.5background: Rectangle {x: control.leftPaddingy: control.topPadding + control.availableHeight / 2 - height / 2implicitWidth: 200implicitHeight: 4width: control.availableWidthheight: implicitHeightradius: 2color: "#bdbebf"Rectangle {width: control.visualPosition * parent.widthheight: parent.heightcolor: "#21be2b"radius: 2}}handle: Rectangle {x: control.leftPadding + control.visualPosition * (control.availableWidth - width)y: control.topPadding + control.availableHeight / 2 - height / 2implicitWidth: 26implicitHeight: 26radius: 13color: control.pressed ? "#f0f0f0" : "#f6f6f6"border.color: "#bdbebf"}}

■ TextArea

TextArea是一个多行文本编辑器。
TextArea扩展了TextEdit，添加了一个占位文本功能，并添加了装饰。
注意这个文本编辑器是没有边框之类的，只有一个输入区域而已。

如果你想让一个文本区域可滚动

  ScrollView {id: viewanchors.fill: parentTextArea {text: "TextArea\n...\n...\n...\n...\n...\n...\n"}}

■ Dial

Dial 表盘类似于音响或工业设备上的传统表盘旋钮。它允许用户在一个范围内指定一个值。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
import QtQuick.Extras 1.4Window {id: windowvisible: truewidth: 640height: 480title: qsTr("Hello World")Dial{id: dialx: 233y: 167anchors.verticalCenter: parent.verticalCenteranchors.horizontalCenter: parent.horizontalCentermaximumValue: 100minimumValue: 0stepSize: 1}Label {id: labelx: 245y: 308text: qsTr("转盘值：")anchors.horizontalCenterOffset: -24anchors.horizontalCenter: parent.horizontalCenterhorizontalAlignment: Text.AlignHCenterLabel {id: label1x: 53y: 2width: 30height: 9text: dial.valuehorizontalAlignment: Text.AlignHCenter}        }
}

■ ComboBox

ComboBox是一个组合按钮和弹出列表。它提供了一种以占用最小屏幕空间的方式向用户显示选项列表的方法。
ComboBox用数据模型填充。数据模型通常是JavaScript数组、ListModel或整数，但也支持其他类型的数据模型。

  ComboBox {model: ["First", "Second", "Third"]}

**示例一：**
```c
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5Window {id: windowvisible: truewidth: 640height: 480title: qsTr("Hello World")ComboBox{id: comhboxy: 71anchors.horizontalCenterOffset: 0anchors.horizontalCenter: parent.horizontalCentermodel: ["Item1", "Item2", "Item3", "Item4"]onCurrentIndexChanged: {display.text = model[currentIndex];}}RowLayout {id: rowLayoutx: 264y: 134width: 100height: 62anchors.horizontalCenterOffset: 0anchors.horizontalCenter: parent.horizontalCenterLabel {id: label2text: qsTr("选择的值：")}Label {id: display}}
}

示例一：可编辑的组合框

  ComboBox {editable: truemodel: ListModel {id: modelListElement { text: "Banana" }ListElement { text: "Apple" }ListElement { text: "Coconut" }}onAccepted: {if (find(editText) === -1)model.append({text: editText})}}

**示例二 美化：

  import QtQuick 2.12import QtQuick.Controls 2.12ComboBox {id: controlmodel: ["First", "Second", "Third"]delegate: ItemDelegate {width: control.widthcontentItem: Text {text: modelDatacolor: "#21be2b"font: control.fontelide: Text.ElideRightverticalAlignment: Text.AlignVCenter}highlighted: control.highlightedIndex === index}indicator: Canvas {id: canvasx: control.width - width - control.rightPaddingy: control.topPadding + (control.availableHeight - height) / 2width: 12height: 8contextType: "2d"Connections {target: controlonPressedChanged: canvas.requestPaint()}onPaint: {context.reset();context.moveTo(0, 0);context.lineTo(width, 0);context.lineTo(width / 2, height);context.closePath();context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";context.fill();}}contentItem: Text {leftPadding: 0rightPadding: control.indicator.width + control.spacingtext: control.displayTextfont: control.fontcolor: control.pressed ? "#17a81a" : "#21be2b"verticalAlignment: Text.AlignVCenterelide: Text.ElideRight}background: Rectangle {implicitWidth: 120implicitHeight: 40border.color: control.pressed ? "#17a81a" : "#21be2b"border.width: control.visualFocus ? 2 : 1radius: 2}popup: Popup {y: control.height - 1width: control.widthimplicitHeight: contentItem.implicitHeightpadding: 1contentItem: ListView {clip: trueimplicitHeight: contentHeightmodel: control.popup.visible ? control.delegateModel : nullcurrentIndex: control.highlightedIndexScrollIndicator.vertical: ScrollIndicator { }}background: Rectangle {border.color: "#21be2b"radius: 2}}}

■ RangeSlider

RangeSlider 通过沿着轨道滑动每个滑块来选择由两个值指定的范围。区域值嘛

示例一

        RowLayout{Label{text: "下限："}Label{id:lowIndextext: "0"}Label{text: "  -  "}Label{text: "上限："}Label{id:highIndextext: "0"}Layout.alignment: Qt.AlignHCenter}RangeSlider {transformOrigin: Item.Centerfrom: 1to: 100first.value: 0second.value: 100stepSize: 1Layout.alignment: Qt.AlignHCenterfirst.onMoved: {lowIndex.text = first.value.toString()}second.onMoved: {highIndex.text = second.value;}}

示例二

  RangeSlider {from: 1to: 100first.value: 25second.value: 75}

示例三

  import QtQuick 2.12import QtQuick.Controls 2.12RangeSlider {id: controlfirst.value: 0.25second.value: 0.75background: Rectangle {x: control.leftPaddingy: control.topPadding + control.availableHeight / 2 - height / 2implicitWidth: 200implicitHeight: 4width: control.availableWidthheight: implicitHeightradius: 2color: "#bdbebf"Rectangle {x: control.first.visualPosition * parent.widthwidth: control.second.visualPosition * parent.width - xheight: parent.heightcolor: "#21be2b"radius: 2}}first.handle: Rectangle {x: control.leftPadding + control.first.visualPosition * (control.availableWidth - width)y: control.topPadding + control.availableHeight / 2 - height / 2implicitWidth: 26implicitHeight: 26radius: 13color: control.first.pressed ? "#f0f0f0" : "#f6f6f6"border.color: "#bdbebf"}second.handle: Rectangle {x: control.leftPadding + control.second.visualPosition * (control.availableWidth - width)y: control.topPadding + control.availableHeight / 2 - height / 2implicitWidth: 26implicitHeight: 26radius: 13color: control.second.pressed ? "#f0f0f0" : "#f6f6f6"border.color: "#bdbebf"}}

■ TextField

TextField 其实就是是一个单行文本编辑器
TextField扩展了TextInput的功能，添加了占位文本功能，并添加了装饰的功能，这里的装饰主要就是只添加了边框和聚焦输入的时候的高亮，不像TextInput就只管输入，没有修饰的功能。

TextField {placeholderText: qsTr("占位符")}

---

  import QtQuick 2.12import QtQuick.Controls 2.12TextField {id: controlplaceholderText: qsTr("Enter description")background: Rectangle {implicitWidth: 200implicitHeight: 40color: control.enabled ? "transparent" : "#353637"border.color: control.enabled ? "#21be2b" : "transparent"}}

■ Tumbler

Tumbler 其实就是一个类似类似 手机上 的滚动选项卡的东西
Tumbler 添加很多的 TumblerColumn ，我们获取一些索引位置信息通过 TumblerColumn 的方式来获取每一个TumblerColumn的索引。

    Tumbler {id: tumblerx: 314width: 180height: 77anchors.top: dial.bottomanchors.topMargin: 60anchors.horizontalCenterOffset: 0anchors.horizontalCenter: parent.horizontalCenterTumblerColumn {id:column1model: 5onCurrentIndexChanged: {selectValue.text = column1.currentIndex.toString() + column2.model[column2.currentIndex] + column3.model[column3.currentIndex];}}TumblerColumn {id:column2model: [0, 1, 2, 3, 4]onCurrentIndexChanged: {selectValue.text = column1.currentIndex.toString() + column2.model[column2.currentIndex] + column3.model[column3.currentIndex];}}TumblerColumn {id:column3model: ["A", "B", "C", "D", "E"]onCurrentIndexChanged: {selectValue.text = column1.currentIndex.toString() + column2.model[column2.currentIndex] + column3.model[column3.currentIndex];}}}