qml 中的简单 TextArea 元素 [英] Simple TextArea Element in qml
本文介绍了qml 中的简单 TextArea 元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在 QML 中创建简单的 TextArea 元素,并尝试使用此代码.但是在 Textarea 中写入时,文本会超出边界.
I want to create simple TextArea element in QML and I try this code. but when write in Textarea , text's fall out of border.
你有简单的 TextArea 或者你能帮我改进这段代码:
Are you have simple TextArea or can you help me to improve this code:
FocusScope {
id: focusScope
width: 400; height: 50
property int fontSize: focusScope.height -30
property color textColor: "black"
property string placeHolder: "Type something..."
property string inputExpression: ".*"
property bool isUserInTheMiddleOfEntringText: false
Rectangle {
width: parent.width
height: parent.height
border.color: 'steelblue'
color: focus?'red':'#AAAAAA'
border.width: 3
radius: 0
MouseArea {
anchors.fill: parent
onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel();
}
}
}
Text {
id: typeSomething
anchors.fill: parent; anchors.rightMargin: 8
verticalAlignment: Text.AlignVCenter
text: placeHolder
color: "gray"
font.italic: true
font.pointSize: fontSize
MouseArea {
anchors.fill: parent
onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel();
}
}
}
MouseArea {
anchors.fill: parent
onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel();
}
}
TextEdit {
id: textInput
anchors { right: parent.right; rightMargin: 8; left: clear.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
focus: true
selectByMouse: true
font.pointSize: fontSize
wrapMode: TextEdit.WordWrap
color: textColor
}
Text {
id: clear
text: "\u2717" // 'x'//"\u2713"
color: 'steelblue'
font.pointSize: 25
opacity: 0
anchors { left: parent.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
MouseArea {
anchors.fill: parent
onClicked: { textInput.text = ''; focusScope.focus = true; textInput.openSoftwareInputPanel(); }
}
}
states: State {
name: "hasText"; when: textInput.text != ''
PropertyChanges { target: typeSomething; opacity: 0 }
PropertyChanges { target: clear; opacity: 1 }
}
transitions: [
Transition {
from: ""; to: "hasText"
NumberAnimation { exclude: typeSomething; properties: "opacity" }
},
Transition {
from: "hasText"; to: ""
NumberAnimation { properties: "opacity" }
}
]
}
感谢帮助
推荐答案
这段代码应该可以满足您的需求:
This code should do what you want :
import QtQuick 2.0
FocusScope {
id: focusScope;
width: 400;
height: textInput.paintedHeight + (2 * textInput.anchors.topMargin);
property alias value : textInput.text;
property alias fontSize : textInput.font.pointSize;
property alias textColor : textInput.color;
property alias placeHolder : typeSomething.text;
Rectangle {
id: background;
anchors.fill: parent;
color: "#AAAAAA";
radius: 5;
antialiasing: true;
border {
width: 3;
color: (focusScope.activeFocus ? "red" : "steelblue");
}
}
TextEdit {
id: textInput;
focus: true
selectByMouse: true
font.pointSize: 20;
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere;
color: "black";
anchors {
top: parent.top;
topMargin: 10;
left: parent.left;
leftMargin: 10;
right: parent.right;
rightMargin: 10;
}
}
Text {
id: typeSomething;
text: "Type something...";
color: "gray";
opacity: (value === "" ? 1.0 : 0.0);
font {
italic: true
pointSize: fontSize;
}
anchors {
left: parent.left;
right: parent.right;
leftMargin: 10;
rightMargin: 10;
verticalCenter: parent.verticalCenter;
}
Behavior on opacity { NumberAnimation { duration: 250; } }
}
MouseArea {
visible: (!focusScope.activeFocus);
anchors.fill: parent
onClicked: { textInput.forceActiveFocus(); }
}
Text {
id: clear;
text: "\u2717" // 'x' //"\u2713"
color: 'steelblue';
font.pixelSize: 30;
opacity: (value !== "" ? 1.0 : 0.0);
anchors {
right: parent.right;
bottom: parent.bottom;
margins: 5;
}
Behavior on opacity { NumberAnimation { duration: 250; } }
MouseArea {
anchors.fill: parent
onClicked: {
value = "";
focusScope.focus = false;
}
}
}
}
我还修复了您代码中的许多问题,例如多个鼠标区域用于相同用途、绑定循环、错误的锚点/对齐方式等...
I also fixed many things in you code, like multiple MouseArea for the same use, binding loops, bad anchors/alignements, etc...
这篇关于qml 中的简单 TextArea 元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文