• Qt Quick 常用元素:Textinput 与 TextEdit 文本编辑框


    一、Textinput

    Textinput 用于编辑一行文本,类似于 QLineEdit。

    • font 分组属性允许你设置 Textlnput 元素所用字体的各种属性,包括字体族(family)、大 小(pixelSize、pointSize)、粗细(bold、weight)、斜体(italic)、下画线(underline)等。

    • 还有一些属性与 Text 元素一样,如 text 属性可以设置或获取元素的文本,horizontalAlignment 和 verticalAlignment 用于设定文本对齐方式,wrapMode 设置文本超过控件宽度时的换行策略,color 设置文字颜色,contentWidth、contentHeight 返回文本的宽、高。

    • length 属性返回编辑框内的字符个数。maxinumiLength 设置编辑框允许输入的字符串的最大长度, 超过这个长度就会被截断。

    • 假如你想使用 Textlnput 来输入密码,可以设置 echoMode 属性为 Textlnput.Password、 Textlnput.PasswordEchoOnEdit 或 Textlnput.NoEcho,而 echoMode 默认为 Textlnput.Normal, 即输入什么显示什么。如果 echoMode 不为 Textlnput.Normal,那么 displayText 属性就保存显示给用户的文本,而 text 属性则保存实际输入的文本,比如你设定 passwordCharacter 为 "*", echoMode 为 Textlnput.Password,那么 displayText 属性内保存的就是一串 "*"。

    Textlnput 还支持粘贴、撤销、重做、滚动等特性。不过,Textlnput不支持使用HTML标记的富文本。


    Textinput 同时也支持适应 validator 或 inputMask 对输入文本做范围限制,也可以设置 echoMode 实现密码框的效果。

    • inputMask 是个字符串,用来限制你可以输入的字符。掩码串内包含允许的字符和分隔符,后面还可以跟一个可选的分号,以及一个用于补空白的字符。举个简单的例子,你想让用户输入类似于 "2014-01-30" 这种格式的日期, 可以将 inputMask 设置为 "0000-00-00"。

    • Textlnput 目前支持 IntValidator、DoubleValidator、RegExpValidator,如果你设置了 validator属性,那么用户就只能输入符合 validator 所界定范围的字符。

    • IntValidator 可以设置一个整数范围,top、bottom 设定最大值、最小值,不设置的话使用整型的最大值、最小值。

    • RegExpValidator 让我们提供一个正则表达式作为验证器。


    当用户按了回车键或确认键,或者编辑框失去焦点时,会发出 accepted 和 editingFinished 信号,开发者可以实现 onAccepted 和 onEditingFinished 信号处理器来处理。需要注意的是, 如果你设置了 inputMask 或 validator,那么只有在编辑框内的文本符合限制条件时这两个信号才会触发。

    TextInput 除了显示光标和文本外,默认并没有边框等装饰性效果,所以在使用时一般要为其添加一个可视化的外观。 示例代码如下:

    import QtQuick 2.2
    import QtQuick.Window 2.0
    
    Window {
        visible: true
         320
        height: 240
    
        Row {
            spacing: 10
            anchors.centerIn: parent
    
            Text {
                text: qsTr("请输入密码:");
                font.pointSize: 15;
                verticalAlignment: Text.AlignVCenter
            }
    
            Rectangle {
                 100
                height: 24
                color: "lightgrey"
                border.color: "grey"
    
                TextInput {
                    anchors.fill: parent
                    anchors.margins: 2
                    font.pointSize: 15
                    focus: true
                     onAccepted: console.log("accepted")
                }
            }
        }
    }
    

    执行后的效果图如下:


    二、TextEdit

    TextEdit 是 Qt Quick 提供的多行文本编辑框,它的大多数属性与 Textinput 类似,不同之处在于,TextEdit 用来显示多行的可编辑的格式化文本,它既可以显示纯文本也可以显示富文本。如下面的代码所示:

    import QtQuick 2.2
    import QtQuick.Window 2.0
    
    Window {
        visible: true
         320
        height: 240
    
        Column {
            anchors.centerIn: parent
    
            Rectangle {
                 120
                height: 100
                color: "lightgrey"
                border.color: "grey"
    
                TextEdit {
                    id : textEdit
                     100
                    height: 100
                    font.pointSize: 20
                    color: "blue"
                    focus: true
                }
            }
        }
    }
    

    执行后的效果图如下:


    参考:

    《Qt Quick核心编程》第9章

    QML学习(五)—<TextInput和TextEdit输入栏>


  • 相关阅读:
    [译] 关于CSS中的float和position
    【规范】前端编码规范——注释规范
    【规范】前端编码规范——jquery 规范
    【规范】前端编码规范——javascript 规范
    【规范】javascript 变量命名规则
    如何使用TestFlight进行Beta测试
    i o s 崩溃日志分析
    CocoaPods安装和使用教程
    iOS 程序切换后台
    iOS 百度地图获取当前地理位置
  • 原文地址:https://www.cnblogs.com/linuxAndMcu/p/11949370.html
Copyright © 2020-2023  润新知