输入框组件的区别(TextField TextInput TextArea TextEdit)"/>
QML(25)——文本输入框组件的区别(TextField TextInput TextArea TextEdit)
目录
- 效果展示
- 适用场景
- 文本组件
- Text
- Label
- Text和Label的区别
- 单行文本输入框
- TextField
- TextInput
- TextField 和 TextInput的区别
- 多行文本输入框
- TextArea
- 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
更多推荐
QML(25)——文本输入框组件的区别(TextField TextInput TextArea TextEdit)
发布评论