哈尔滨建设信息网站网站搭建维护淄博
一个简单的Text代码
Text {id: txttext: qsTr("文本123@abc\n数量的")color: "blue"
}效果：
Text一般用于显示文本，例如可以给Button或者Rectangle等部件提供文本的显示；
1.文本常用
contentWidth 文本的宽度
contentHeight 文本的高度
lineCount 文本的行数
lineHeight 文本行之间的间距
Text {id: txttext: qsTr("文本123@abc\n数量的")color: "blue"lineHeight: 5 // 设置每一行文本的上下间距Component.onCompleted: { // 程序启动时就会调用// 获取文本的宽度和高度console.log("文本的宽度:", contentWidth)console.log("文本的高度：", contentHeight)// 文本的行数console.log("lineCount:", lineCount)// 文本的行间距console.log("lineHeight:", lineHeight)}
}
font.bold 设置字体加粗
font.family 设置字体
font.italic 设置字体斜体
font.letterSpacing 设置文本左右间的间距 例如：a b 你好 c
font.pixelSize 设置字体的像素大小，与磅值二选一
font.pointSize 设置字体的磅值大小，与像素二选一
font.underline 设置字体下划线
Text {id: txttext: qsTr("文本123@abc\n数量的")color: "blue"font.bold: true // 字体加粗font.family: "华文隶书" // 字体font.italic: true // 斜体font.letterSpacing: 20 // 字之间的间距font.pixelSize: 20 // 字体的像素大小，与磅值二选一font.pointSize: 20 // 字体的磅值大小，与像素二选一font.underline: true // 下划线
}
2.文本省略
当一个文本过长，超出显示区域时，那么就需要设置省略显示，才符合感官；
通过 elide 属性可以进行设置；
- Text.ElideNone - the default
- Text.ElideLeft
- Text.ElideMiddle
- Text.ElideRight
Rectangle {width: 100height: 50anchors.centerIn: parent // 居中border.color: "black"Text {id: txtanchors.fill: parenttext: qsTr("sdfljslkfjlsdfj苏我欸机构为根据")// 文本省略elide: Text.ElideRight // Text.ElideLeft Text.ElideMiddle}
}
3.文本显示格式
即可以支持富文本格式，即HTML格式，或者Markdown格式；
默认是支持html格式的；
- Text.AutoText (default)
- Text.PlainText
- Text.StyledText
- Text.RichText
- Text.MarkdownText
Column {Text {font.pointSize: 16textFormat: Text.AutoText // 默认文本格式，支持富文本(html语法)text: "<b>Hello</b> <i>World!</i>"}Text {font.pointSize: 16textFormat: Text.RichText // 富文本格式(html语法)text: "<b>Hello</b> <i>World!</i>"}Text {font.pointSize: 16 // 纯文本格式textFormat: Text.PlainTexttext: "<b>Hello</b> <i>World!</i>"}Text {font.pointSize: 16 // Markdown格式textFormat: Text.MarkdownTexttext: "**Hello** *World!*"}}
4.文本换行
第二点介绍了太长可以省略，现在介绍如何换行；
换行有很多种方式，可以根据单词换行，直接换行等；
- Text.NoWrap (default) - 默认
- Text.WordWrap - 根据单词进行换行
- Text.WrapAnywhere - 换行可以在一行中的任何一点完成，即使换行发生在一个单词的中间。
- Text.Wrap - 如果可能，换行发生在字边界；否则，它将发生在行内适当的点，甚至在一个单词的中间。
一般我们只使用，Text.WordWrap
Rectangle {id: rectwidth: 100height: 150border.color: "black"Text {id: txttext: qsTr("hello how are you? i'm find. 谢谢，非常感谢！一二三四五六七八九十")anchors.fill: parent// Text.WordWrap：换行wrapMode: Text.WordWrap}
}
5.超链接
使用富文本方式即可获得超链接的效果；
text: <a href=\"http://qt-project.org\">Qt Project website</a>.
onLinkActivated: { } 点击超链接文本时触发，可以在这里处理页面跳转 link 可获得当前链接
onLinkHovered: { } 鼠标进来悬浮和出去时触发，link 可获得当前链接
onHoveredLinkChanged: { } 链接改变时触发，hoveredLink 可获得改变的链接
Rectangle {id: rectwidth: 300height: 150border.color: "black"Text {id: txttextFormat: Text.RichTexttext: "See the <a href=\"http://qt-project.org\">Qt Project website</a>."// 点击文本超链接时触发onLinkActivated: {console.log(link + " link activated")}// 文本超链接，鼠标移动进来和出去触发onLinkHovered: {console.log("hover:", link)}// 文本超链接，改变时触发onHoveredLinkChanged: {console.log("hover link changed: ", hoveredLink)}}
}
如果希望鼠标悬浮时指针改变为手指，即改变鼠标光标，可以使用之前学习的 MouseArea 鼠标事件 进行处理；
cursorShape: Qt.PointingHandCursor
不过需要注意的是，设置了鼠标事件，点击连接时 onLinkActivated: { } 就无法出发了，因为点击事件被鼠标给拦截了；
如果希望处理点击事件，就得在鼠标中使用 onClicked: { } 进行处理；
Rectangle {id: rectwidth: 300height: 150border.color: "black"Text {id: txttextFormat: Text.RichTexttext: "See the <a href=\"http://qt-project.org\">Qt Project website</a>."MouseArea {anchors.fill: parentcursorShape: Qt.PointingHandCursor// 如果设置了鼠标，那么点击时间只能在鼠标这里处理，因为被鼠标事件拦截了onClicked: {console.log("mouse link activated")}}}
}
完！