平台:qtcreator 5.12.6
本功能又叫响应用户输入,转载于Qt官网平台
对TapHandler的解释:该输入处理程序让QML应用程序处理的鼠标和触摸事件。例如,您可以通过将TapHandler添加到Image或包含Text对象的Rectangle中来创建按钮。所述TapHandler响应敲击或点击在任何类型的指向装置的。
Keys:键盘响应事件
ColumnLayout:列对齐
TextField:单行输入
TextArea:多行输入
implicitWidth:默认宽度
代码
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Item{
id:root
width: 320
height: 480
Rectangle {
color: "#272822"
width: 320
height: 480
}
Rectangle {
id: topRect
opacity: 0.5
x: 100
y: 100
width: 100
height: 100
color: "blue"
focus: true
TapHandler{
onTapped: topRect.width+=10
}
Keys.onUpPressed: topRect.color="red"
Keys.onDownPressed: topRect.opacity=0.8
Keys.onEnterPressed: {
topRect.color="blue"
topRect.opacity=1
}
}
ColumnLayout{
anchors.top: topRect.bottom
width: topRect.width
TextField{
id:singleline
text: "Initial Text"
Layout.alignment: Qt.AlignHCenter|Qt.AlignTop
Layout.margins: 5
background: Rectangle{
implicitWidth: 200
implicitHeight: 40
border.color: singleline.focus ? "#21be2b" : "lightgray"
color: singleline.focus ? "lightgray" : "transparent"
}
}
TextArea{
id:multiLine
placeholderText: "Inital text\n...\n...\n"
Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 5
background: Rectangle {
implicitWidth: 200
implicitHeight: 100
border.color: multiLine.focus ? "#21be2b" : "lightgray"
color: multiLine.focus ? "lightgray" : "transparent"
}
}
}
}
总结:举例: 可以添加进 图片显示中,单击后 浏览下一张图片