TextArea.qml
import QtQuick 2.10
import QtQuick.Controls 2.12 as Controls
import QtQuick.VirtualKeyboard 2.3
Controls.TextArea {
id: control
color: "#2B2C2E"
selectionColor: Qt.rgba(0.0, 0.0, 0.0, 0.15)
selectedTextColor: color
selectByMouse: true
font.pixelSize: Qt.application.font.pixelSize * 2
property int enterKeyAction: EnterKeyAction.None
readonly property bool enterKeyEnabled: enterKeyAction === EnterKeyAction.None || text.length > 0 || inputMethodComposing
EnterKeyAction.actionId: control.enterKeyAction
EnterKeyAction.enabled: control.enterKeyEnabled
property color bcolor: control.activeFocus ? "#5CAA15" : "#BDBEBF"
// background: Rectangle {
// color: "#FFFFFF"
// border.width: 1
// border.color: control.activeFocus ? "#5CAA15" : "#BDBEBF"
// }
}
Basic.qml
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.VirtualKeyboard 2.1
import "content"
Rectangle {
id: root
width: 512
height: flickable.contentHeight
color: "#F6F6F6"
// Only set with CONFIG+=disable-desktop.
property bool handwritingInputPanelActive: false
InputPanel {
id: inputPanel
z: 99
x: 0
y: parent.height
width: parent.width
states: State {
name: "visible"
when: inputPanel.active
PropertyChanges {
target: inputPanel
y: parent.height - inputPanel.height
}
}
transitions: Transition {
from: ""
to: "visible"
reversible: true
ParallelAnimation {
NumberAnimation {
properties: "y"
duration: 250
easing.type: Easing.InOutQuad
}
}
}
}
Flickable {
id: flickable
anchors.fill: parent
contentWidth: content.width //不同于其width属性
contentHeight: content.height //指定Flickable的区域大小,非Flickable元素的大小
interactive: contentHeight > height
flickableDirection: Flickable.VerticalFlick
property real scrollMarginVertical: 20
property var heightDal: 0
ScrollBar.vertical: ScrollBar {
id: scrollBar
}
states: State {
name: "cur"
when: inputPanel.active
PropertyChanges {
target: flickable
contentY: heightDal;
}
}
transitions: Transition {
from: ""
to: "cur"
reversible: true
ParallelAnimation {
NumberAnimation {
target: flickable
properties: "contentY"
duration: 250
easing.type: Easing.InOutQuad
}
}
}
MouseArea {
id: content
width: flickable.width
height: textEditors.height + 24
Column {
id: textEditors
spacing: 15
x: 12
y: 12
width: parent.width - 26
property var newHeight: height
Label {
color: "#565758"
text: "Tap fields to enter text"
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 22
}
TextField {
width: parent.width
placeholderText: "One line field"
enterKeyAction: EnterKeyAction.Next
onAccepted: passwordField.focus = true
onPressed: {
var pointF = mapToItem(root, 0, 0);
var heightDal = 1.1*inputPanel.height - (root.height - pointF.y - height);
if ( heightDal > 0 ){
flickable.heightDal = flickable.contentY + heightDal;
}else{
flickable.heightDal = flickable.contentY;
}
}
}
TextField {
id: passwordField
width: parent.width
echoMode: TextInput.Password
placeholderText: "Password field"
inputMethodHints: Qt.ImhNoAutoUppercase | Qt.ImhPreferLowercase | Qt.ImhSensitiveData | Qt.ImhNoPredictiveText
enterKeyAction: EnterKeyAction.Next
onAccepted: upperCaseField.focus = true
onPressed: {
var pointF = mapToItem(root, 0, 0);
var heightDal = 1.1*inputPanel.height - (root.height - pointF.y - height);
if ( heightDal > 0 ){
flickable.heightDal = flickable.contentY + heightDal;
}else{
flickable.heightDal = flickable.contentY;
}
}
}
TextField {
id: upperCaseField
width: parent.width
placeholderText: "Upper case field"
inputMethodHints: Qt.ImhUppercaseOnly
enterKeyAction: EnterKeyAction.Next
onAccepted: lowerCaseField.focus = true
onPressed: {
var pointF = mapToItem(root, 0, 0);
var heightDal = 1.1*inputPanel.height - (root.height - pointF.y - height);
if ( heightDal > 0 ){
flickable.heightDal = flickable.contentY + heightDal;
}else{
flickable.heightDal = flickable.contentY;
}
}
}
TextField {
id: lowerCaseField
width: parent.width
placeholderText: "Lower case field"
inputMethodHints: Qt.ImhLowercaseOnly
enterKeyAction: EnterKeyAction.Next
onAccepted: phoneNumberField.focus = true
onPressed: {
var pointF = mapToItem(root, 0, 0);
var heightDal = 1.1*inputPanel.height - (root.height - pointF.y - height);
if ( heightDal > 0 ){
flickable.heightDal = flickable.contentY + heightDal;
}else{
flickable.heightDal = flickable.contentY;
}
}
}
TextField {
id: phoneNumberField
validator: RegExpValidator { regExp: /^[0-9\+\-\#\*\ ]{6,}$/ }
width: parent.width
placeholderText: "Phone number field"
inputMethodHints: Qt.ImhDialableCharactersOnly
enterKeyAction: EnterKeyAction.Next
onAccepted: formattedNumberField.focus = true
onPressed: {
var pointF = mapToItem(root, 0, 0);
var heightDal = 1.1*inputPanel.height - (root.height - pointF.y - height);
if ( heightDal > 0 ){
flickable.heightDal = flickable.contentY + heightDal;
}else{
flickable.heightDal = flickable.contentY;
}
}
}
TextField {
id: formattedNumberField
width: parent.width
placeholderText: "Formatted number field"
inputMethodHints: Qt.ImhFormattedNumbersOnly
enterKeyAction: EnterKeyAction.Next
onAccepted: digitsField.focus = true
onPressed: {
var pointF = mapToItem(root, 0, 0);
var heightDal = 1.1*inputPanel.height - (root.height - pointF.y - height);
if ( heightDal > 0 ){
flickable.heightDal = flickable.contentY + heightDal;
}else{
flickable.heightDal = flickable.contentY;
}
}
}
TextField {
id: digitsField
width: parent.width
placeholderText: "Digits only field"
inputMethodHints: Qt.ImhDigitsOnly
enterKeyAction: EnterKeyAction.Next
onAccepted: textArea.focus = true
onPressed: {
var pointF = mapToItem(root, 0, 0);
var heightDal = 1.1*inputPanel.height - (root.height - pointF.y - height);
if ( heightDal > 0 ){
flickable.heightDal = flickable.contentY + heightDal;
}else{
flickable.heightDal = flickable.contentY;
}
}
}
ScrollView {
width: parent.width
height: 206/*Math.max(206, implicitHeight)*/ //implicitHeight 为隐式高度
background: Rectangle {
anchors.fill: parent
opacity: enabled ? 1 : 0.3
color: "#FFFFFF"
border.width: 1
border.color: textArea.bcolor
}
TextArea {
id: textArea
placeholderText: "Multiple line field"
onPressed: {
var pointF = mapToItem(root, 0, 0);
var heightDal = 1.1*inputPanel.height - (root.height - pointF.y - height);
if ( heightDal > 0 ){
flickable.heightDal = flickable.contentY + heightDal;
}else{
flickable.heightDal = flickable.contentY;
}
}
}
}
}
}
}
// Hide the text fields' cursors when fullscreen handwriting is active.
MouseArea {
anchors.fill: parent
visible: handwritingInputPanelActive
}
}
基于Qml virtualkeyboard basic example 改写,达到基本预期要求。