目录
- 效果展示
- 适用场景
- 文本组件
-
- 单行文本输入框
-
- 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: 20
width: 200
elide: Text.ElideRight
ToolTip.text: "This is ToolTip"
ToolTip.visible: mouseArea.containsMouse
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
}
}
Label
Label {
text: "Label"
font.pixelSize: 20
}
Label {
text: "Label"
font.pixelSize: 20
background: Rectangle {
color: "Green"
}
}
Text和Label的区别
- Text是最简单的文本
- Label继承自Text, 拓展了属性,比如background
单行文本输入框
TextField
TextField {
placeholderText: qsTr("TextField")
font.pixelSize: 20
horizontalAlignment: Text.AlignLeft
selectByMouse: true
}
TextField {
placeholderText: qsTr("TextField")
font.pixelSize: 20
horizontalAlignment: Text.AlignHCenter
echoMode: TextInput.Password
}
TextInput
TextField 和 TextInput的区别
- 最常使用的是TextField, 界面美观,功能强大
- TextField继承自TextInput, 主要区别是外框
多行文本输入框
TextArea
ScrollView {
width: 400
height: 100
TextArea {
anchors.fill: parent
wrapMode: TextEdit.Wrap
selectByMouse: true
font.pixelSize: 18
text:
"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: 400
height: 100
TextArea {
anchors.fill: parent
wrapMode: TextEdit.Wrap
selectByMouse: true
font.pixelSize: 18
text:
"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