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

效果展示

适用场景

文本组件

Text

Text {
  text: "Text"
  font.pixelSize: 20
}    
1
2
3
4

 Text {
      text: "TextTextTextTex1TextTextTextTextTex1Text"
      font.pixelSize: 20
      width: 200
      //   selectByMouse     // don't have this property
      elide: Text.ElideRight  // 长文本末尾省略符
      ToolTip.text: "This is ToolTip"   // import QtQuick.Controls 2.15
      ToolTip.visible: mouseArea.containsMouse
      MouseArea {
          id: mouseArea
          anchors.fill: parent
          hoverEnabled: true
      }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Label

 Label {
    text: "Label"
    font.pixelSize: 20
}   
1
2
3
4

Label {
   text: "Label"
    font.pixelSize: 20
    background: Rectangle {
        color: "Green"
    }
}
1
2
3
4
5
6
7

Text和Label的区别

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

单行文本输入框

TextField

 TextField {
    placeholderText: qsTr("TextField")
    font.pixelSize: 20
    horizontalAlignment: Text.AlignLeft
    selectByMouse: true  // 鼠标可以选中文本
} 
1
2
3
4
5
6

 TextField {
    placeholderText: qsTr("TextField")
    font.pixelSize: 20
    horizontalAlignment: Text.AlignHCenter
    // 输入框回显方式
    echoMode: TextInput.Password
}
1
2
3
4
5
6
7

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. ";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 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"
     }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

TextArea 和 TextEdit 的区别

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