【QML学习使用】

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: ''
    }