QML(25)——文本输入框组件的区别（TextField TextInput TextArea TextEdit）

效果展示

适用场景

场景	组件	属性
短文本	Text
长文本 末尾省略	Text	elide: Text.ElideRight
文本设置底色	Label	background
文本输入框	TextField
多行文本输入框	TextArea

文本组件

Text

Text {text: "Text"font.pixelSize: 20
}    

 Text {text: "TextTextTextTex1TextTextTextTextTex1Text"font.pixelSize: 20width: 200//   selectByMouse     // don't have this propertyelide: Text.ElideRight  // 长文本末尾省略符ToolTip.text: "This is ToolTip"   // import QtQuick.Controls 2.15ToolTip.visible: mouseArea.containsMouseMouseArea {id: mouseAreaanchors.fill: parenthoverEnabled: true}}

Label

 Label {text: "Label"font.pixelSize: 20
}   

Label {text: "Label"font.pixelSize: 20background: Rectangle {color: "Green"}
}

Text和Label的区别

• Text是最简单的文本
• Label继承自Text, 拓展了属性，比如background

单行文本输入框

TextField

 TextField {placeholderText: qsTr("TextField")font.pixelSize: 20horizontalAlignment: Text.AlignLeftselectByMouse: true  // 鼠标可以选中文本
} 

 TextField {placeholderText: qsTr("TextField")font.pixelSize: 20horizontalAlignment: Text.AlignHCenter// 输入框回显方式echoMode: TextInput.Password
}

TextInput

TextField 和 TextInput的区别

• 最常使用的是TextField, 界面美观，功能强大
• TextField继承自TextInput, 主要区别是外框

多行文本输入框

TextArea

 ScrollView {width: 400height: 100TextArea {anchors.fill: parentwrapMode: TextEdit.WrapselectByMouse: truefont.pixelSize: 18text:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, " +"sed do eiusmod tempor incididunt ut labore et dolore magna " +"aliqua. Ut enim ad minim veniam, quis nostrud exercitation " +"ullamco laboris nisi ut aliquip ex ea commodo cosnsequat. ";}
}

 ScrollView {width: 400height: 100TextArea {anchors.fill: parentwrapMode: TextEdit.WrapselectByMouse: truefont.pixelSize: 18text:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, " +"sed do eiusmod tempor incididunt ut labore et dolore magna " +"aliqua. Ut enim ad minim veniam, quis nostrud exercitation " +"ullamco laboris nisi ut aliquip ex ea commodo cosnsequat. ";}// 添加边框background:  Rectangle{color: "transparent"border.color: "#626262"}
}

TextArea 和 TextEdit 的区别

• 主要使用TextArea
• TextArea继承自TextEdit, 拓展了属性， 尤其是background