立即注册 找回密码

微雪课堂

搜索
微雪课堂 树莓派 树莓派QT教程 查看内容

树莓派Qt系列教程19:块编辑输入控件

2020-8-5 14:16| 发布者: dasi| 查看: 1017| 评论: 0|原作者: dasi

摘要: 这一节我们将学习块编辑输入控件........

前言

上一节中我们讲了单行编辑的控件,这一节我们再讲一下多行编辑,也就是块编辑控件,有两个,分别是块文本编辑器TextEdit和块文本编辑区域TextArea。

TextEdit

TextEdit显示一块可编辑的格式化文本,它可以显示纯文本和富文本。它的很多属性和方法和TextInput是一模一样的,最大的区别就是TextInput是显示一行数据,TextEdit是显示多行的数据。所以我们就不详细的讲解TextEdit了。

属性

主要是说一下和TextInput不同的属性和方法,相同的部分我们就不列举了,大家可以参考链接

  • baseUrl : url,指定用于解析文本中相对URL的基本URL
  • hoveredLink : string,当用户悬停在文本中嵌入的链接时,此属性包含链接字符串。链接必须为富文本格式或HTML格式,并且链接字符串提供对特定链接的访问
  • lineCount : int,返回TextEdit项中的总行数
  • selectByKeyboard : bool,当编辑器可编辑时,默认为true;当只读时为false
  • textDocument : TextDocument,
  • textFormat : enumeration,文本显示的格式
  • textMargin : real,TextEdit中文本周围的边距(以像素为单位)

信号

  • linkActivated(link):当用户单击文本中嵌入的链接时,将发出此信号
  • linkHovered(link):当用户悬停在文本中嵌入的链接时,将发出此信号

方法

  • void append(text):将带有文本的新段落追加到TextEdit的末尾
  • string getFormattedText(start, int end):返回介于开始位置和结束位置之间的文本部分
  • linkAt(x, real y):返回位于内容坐标中x,y处的链接字符串,如果该点不存在链接,则返回一个空字符串

例程

ColumnLayout{
        anchors.centerIn: parent
        spacing: 50
        Rectangle{
            width: 300
            height: 300
            TextEdit {
                    id: textedit
                    height: parent.height
                    width : parent.width
                    padding: 2
                    textFormat: Text.RichText
                    font.family: "Helvetica"
                    font.pointSize: 40
                    color: "blue"
                    focus: true
                    wrapMode:TextEdit.WrapAnywhere
                }

        }

        RowLayout{
            spacing: 95
            Button{
                text: "clear"
                rightPadding: 20
                onClicked: {
                    textedit.clear()
                }
            }

            Button{
                text: "append"
                onClicked: {
                    textedit.append("Hello World!")
                }
            }
        }
    }

用到了之前布局管理器的内容,我们先定义一个可视化的TextEdit,设置其属性textFormat文本显示的格式为富文本。

  • TextEdit.PlainText:(默认)所有样式标签均视为纯文本
  • TextEdit.AutoText:自动确定是否应将文本视为富文本格式
  • TextEdit.RichText:所有样式标签均视为富文本
  • TextEdit.MarkdownText:所有样式标签均视为MarkdownText

当一行文本要占用的宽度大于TextEdit的宽度时,wrapMode决定如何折行,它支持TextEdit.WordWrap(在单词边界处折行)、TextEdit.NoWrap(不折行,超出宽度的文本不显示)、TextEdit.WrapAnywhere(折行,不考虑单词边界)、TextEdit. Wrap(折行,尽量在单词边界处折行)4种换行策略。设其wrapMode为WrapAnywhere。然后在列布局管理器中定义两个按钮,点击时分别调用TextEdit的clear和append方法。

TextArea

TextArea是多行文本编辑区域,TextArea使用占位符文本功能拓展了TextEdit,并添加了修饰。TextArea的属性和TextField一模一样,只是方法上略有不同,详情可参考链接

TextArea本身不能滚动,特别是在屏幕大小受限的平台上,通常最好使整个应用程序页面可滚动。但是,请注意,在这种情况下,TextArea的背景装饰会与其他可滚动内容一起滚动。如果要使TextArea可滚动,可以将其放在ScrollView中。

ScrollView {
    id: scView
    anchors.centerIn: parent
    width: 200
    height: 100 // 初始高度就是一行
    background: Rectangle {
        anchors.fill: parent
        border.color: "gray"
        radius: 5
    }

    TextArea {
        id: contentText
        wrapMode: TextArea.WrapAnywhere
        font.pixelSize: 25
    }
}

将TextArea放置在ScrollView中,设置ScrollView的大小,当我们输入文字超过ScrollView的宽度时,TextArea会自动换行。当超过其高度时,ScrollView会显示滚动栏。效果如下:

总结

对于块编辑输入控件来说,其实就是单行编辑输入控件的延伸,很多属性和方法都是一样的,大家可以和上一节对比着学习。关于编辑输入控件我们就学习到这儿了,下节再会!

33

顶一下

刚表态过的朋友 (33 人)

相关阅读

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2021-12-9 21:52 , Processed in 0.013325 second(s), 13 queries .

返回顶部