1.QML显示模式
clip、elide、wrapMode三个属性都是用来处理当文本内容超过文本控件宽度时的情形。
1.1 clip
clip:基本不用。不换行,超出部分会被生硬截断,而不管截断的位置是不是在某个单词的中间。
Rectangle {
width: 100
height: 100
border.width: 3
border.color: "#000000"
clip: true
Rectangle {
width: 70
height: 70
color: "red"
}
Rectangle {
x: 50
y: 50
width: 70
height: 70
color: "yellow"
}
}
1.2 elide
elide:单行文本时常用。不换行,超出部分会被显示为省略号。有多种策略供选择。
import QtQuick 2.5
import QtQuick.Layouts 1.1
Rectangle {
width: 100
height: 20
GridLayout {
clip: true
anchors.fill: parent
rows: 1
Text {
text: "veryverylooooooonnnnnnnnnnnggggggggggggggtext"
Layout.preferredWidth: 50
elide: Text.ElideRight
}
}
}
1.3 wrapMode
wrapMode:多行文本常用。自动换行,且有多种策略供选择。
Text {
id: warnTipTx
width: 534
height: contentHeight
anchors.top: warnTitleTx.bottom
anchors.topMargin: 14
x: 108
opacity: 0.6
font.pixelSize: 24
font.family: 'WenQuanYi Micro Hei Mono'
elide: Text.ElideRight
wrapMode: Text.WrapAnywhere
color: textColor
text: ''
}