前言上一节中我们讲了单行编辑的控件，这一节我们再讲一下多行编辑，也就是块编辑控件，有两个，分别是块文本编辑器TextEdit和块文本编辑区域TextArea。TextEditTextEdit显示一块可编辑的格式化文本，它可以显示纯文本和富文本。它的很多属性和方法和TextInput是一模一样的，最大的区别就是TextInput是显示一行数据，TextEdit是显示多行的数据。所以我们就不详细的讲解TextEdit了。属性主要是说一下和TextInput不同的属性和方法，相同的部分我们就不列举了，大家可以参考链接
信号
方法
例程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的宽度时，wrapMode决定如何折行，它支持TextEdit.WordWrap(在单词边界处折行)、TextEdit.NoWrap(不折行，超出宽度的文本不显示)、TextEdit.WrapAnywhere(折行，不考虑单词边界)、TextEdit. Wrap(折行，尽量在单词边界处折行)4种换行策略。设其wrapMode为WrapAnywhere。然后在列布局管理器中定义两个按钮，点击时分别调用TextEdit的clear和append方法。
TextAreaTextArea是多行文本编辑区域，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会显示滚动栏。效果如下：
总结对于块编辑输入控件来说，其实就是单行编辑输入控件的延伸，很多属性和方法都是一样的，大家可以和上一节对比着学习。关于编辑输入控件我们就学习到这儿了，下节再会！ |
