QML學習(四)——

文本顯示是界面開發必不可少的內容，在Qt Quick模塊中提供了 Text 項目來進行文本的顯示，其中可以使用 font 屬性組對文本字體進行設置。這一篇我們來看看它們的具體使用。

使用字體

就像前面教程中提到過的，在文本中可以使用 font 屬性組來設置字體，常用的屬性如下：

• font.bold：是否加粗，取值為true或false
• font.capitalization：大寫策略，取值為
  • Font.MixedCase不改變大小寫（默認值）；
  • Font.AllUppercase全部大寫；
  • Font.AllLowercase全部小寫；
  • Font.SmallCaps小型大寫字母（即小寫字母變為大寫但不改變字體原始的大小）；
  • Font.Capitalize：首字母大寫
• font.family：字體族，取值為字體族的名字（區分大小寫）
• font.italic：是否斜體，取值為true或false
• font.letterSpacing：字符間距，正值加大間距，負值減小間距
• font.pixelSize：字號大小，取值為整數（單位為像素，依賴於設備）
• font.pointSize：字號大小，取值為大於0的值（是設備無關的）
• font.strikeout：是否有刪除線，取值為true或false
• font.underline：是否有下划線，取值為true或false
• font.weight：字體重量，取值為Font.Thin、Font.Light、Font.ExtraLight、Font.Normal（默認）、Font.Medium、Font.DemiBold、Font.Bold、Font.ExtraBold 和 Font.Black
• font.wordSpacing：單詞間距，正值加大間距，負值減小間距

我們可以直接使用點表示法來使用一個屬性，也可以使用組表示法來一次指定多個屬性，建議使用組表示法，這樣代碼的可讀性更好。下面來看一個示例：

Text {
    id: text1
    anchors.centerIn: parent
    text: "hello qt! Hello World!"
}

Text {
    id: text2
    anchors.top: text1.bottom
    anchors.topMargin: 10
    anchors.horizontalCenter: text1.horizontalCenter
    text: "hello qt! Hello World!"

    font.weight: Font.ExtraBold
    font.pointSize: 20
    font.letterSpacing: 3
    font.wordSpacing: 6
    font {
        capitalization: Font.AllLowercase
        italic: true
        underline: true
    }
    font.family: webFont.name
    FontLoader {
        id: webFont
        source: "http://qter-images.qter.org/other/myfont.ttf"
        onStatusChanged: if (webFont.status == FontLoader.Ready)
                                 console.log('Loaded')
    }
}

這里最后使用了 FontLoader 類型來加載一個字體，可以通過設置 source 屬性來指定一個字體名稱或者網絡 url 地址，比如這里使用了網上的一個 ttf 字體，當使用網絡字體時，可以通過 status 屬性來獲取加載的狀態。下圖是運行效果。

文本裁剪

Text 項目是可以設置寬度的，當里面的文本內容超出 Text 的寬度時，可以使用 clip 屬性設置文本是否被裁剪。下面來看一個例子：

Column{
    anchors.centerIn: parent
    spacing: 5

    Rectangle {
        width: 186; height: 30
        color: "lightblue"

        Text {
            text: "hello qt! Hello World!"
            font.pointSize: 15
        }
    }
    Rectangle {
        width: 186; height: 30
        color: "lightblue"

        Text {
            text: "hello qt! Hello World!"
            font.pointSize: 15
            width: 186
            clip: true
        }
    }

    Rectangle {
        width: 186; height: 30
        color: "lightgreen"

        Text {
            anchors.centerIn: parent
            text: "hello qt! Hello World!"
            font.pointSize: 15
        }
    }

    Rectangle {
        width: 186; height: 30
        color: "lightgreen"

        Text {
            anchors.centerIn: parent
            text: "hello qt! Hello World!"
            font.pointSize: 15
            width: 186
            clip: true
        }
    }
}

運行效果如下圖所示。

 

文本省略

如果使用 clip 屬性，當文本超出邊界后會被突然截斷，這樣可能在邊界只顯示了單詞或字母的局部，非常不友好。在 Text 中還提供了 elide 屬性，可以通過省略文本的部分內容來匹配文本的寬度，其取值包括Text.ElideNone （默認）、Text.ElideLeft、Text.ElideMiddle 和 Text.ElideRight ，需要注意的是，該屬性也是在設置了 Text 寬度時才有作用。下面看一段示例代碼：

Column{
    anchors.centerIn: parent
    spacing: 5

    Rectangle {
        width: 186; height: 30
        color: "lightblue"

        Text {
            width: 186
            text: qsTr("hello qt! Hello World!文本省略")
            font.pointSize: 15
            elide: Text.ElideLeft
        }
    }

    Rectangle {
        width: 186; height: 30
        color: "lightblue"

        Text {
            width: 186
            text: qsTr("hello qt! Hello World!文本省略")
            font.pointSize: 15
            elide: Text.ElideMiddle
        }
    }

    Rectangle {
        width: 186; height: 30
        color: "lightblue"

        Text {
            width: 186
            text: qsTr("hello qt! Hello World!文本省略")
            font.pointSize: 15
            elide: Text.ElideRight
        }
    }
}

運行效果如下圖所示。

文本換行

對於過長的文本，除了進行省略以外，也可以使用 wrapMode 來設置換行，可用的換行模式包括：Text.NoWrap (默認) 、Text.WordWrap、Text.WrapAnywhere 和Text.Wrap。當設定了 Text 的高度 height，或者最大行數 maximumLineCount 后，換行和省略可以同時使用。下面來看一個例子，在前面代碼的基礎上繼續添加如下代碼：

Rectangle {
    width: 186; height: 50
    color: "lightgreen"

    Text {
        width: 186
        text: qsTr("hello qt! Hello World!文本換行")
        font.pointSize: 15
        wrapMode: Text.WordWrap
    }
}

Rectangle {
    width: 186; height: 50
    color: "lightgreen"

    Text {
        width: 186
        text: qsTr("hello qt! Hello World!文本換行")
        font.pointSize: 15
        wrapMode: Text.WrapAnywhere
    }
}

Rectangle {
    width: 186; height: 50
    color: "lightgreen"

    Text {
        width: 186; height: 50
        text: qsTr("hello qt! Hello World!文本換行的同時也可以省略")
        font.pointSize: 15
        wrapMode: Text.WrapAnywhere
        elide: Text.ElideRight
    }
}

運行效果如下圖所示。

文本樣式

使用 Text 的 style 屬性可以設置文本的樣式，包括：Text.Normal(默認)、Text.Outline、Text.Raised 和 Text.Sunken ，下面是示例：

Row { 
    spacing: 10

    Text { font.pointSize: 24; text: "Normal" }

    Text { font.pointSize: 24; text: "Raised"; color: "white"
        style: Text.Raised; styleColor: "blue" }

    Text { font.pointSize: 24; text: "Outline";
        style: Text.Outline; styleColor: "red" }

    Text { font.pointSize: 24; text: "Sunken"; color: "white"
        style: Text.Sunken; styleColor: "black" }
}

運行效果如下圖所示。

對齊方式

當設置了 Text 的寬度和高度以后，可以通過 horizontalAlignment 和 verticalAlignment 來設置文本內容的對齊方式，水平方向包括：Text.AlignLeft、 Text.AlignRight、 Text.AlignHCenter 和 Text.AlignJustify；垂直方向包括：Text.AlignTop、 Text.AlignBottom  和 Text.AlignVCenter 。下面是示例代碼：

Rectangle {
    width: 300; height: 50
    color: "gold"

    Text {
        width: 300; height: 50
        text: qsTr("hello qt! Hello World!")
        font.pointSize: 15
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignBottom
    }
}

運行效果如下圖所示。

顯示富文本

Text 項目除了顯示純文本以外，也可以顯示富文本。通過 textFormat 屬性可以設置文本格式，包括：

• Text.AutoText (默認)：自動判斷以什么樣式來進行顯示；

• Text.PlainText：以純文本進行顯示；

• Text.StyledText：是一種支持基本文本樣式標簽的優化格式，例如HTML 3.2中的標簽：

  <b></b> <strong></strong> <i></i> <br> <p> <u> <font color="color_name" size="1-7"></font> <h1> to <h6> <a href=""> <img src="" align="top,middle,bottom" width="" height=""> <ol type="">, <ul type=""> , <li> <pre></pre> > < &

• Text.RichText：可以顯示富文本，支持 HTML 4 規范的標簽，具體支持的標簽內容可以在幫助 Supported HTML Subset 文檔種進行查看。為了獲取更好的性能，建議使用 Text.PlainText 或 Text.StyledText 。

下面是示例代碼：

Text {
    font.pointSize: 24
    text: "<b>Hello</b> <i>World!</i>"
}
Text {
    font.pointSize: 24
    textFormat: Text.StyledText
    text: "<b>Hello</b> <i>World!</i>"
}
Text {
    font.pointSize: 24
    textFormat: Text.RichText
    text: "<b>Hello</b> <i>World!</i>"
}
Text {
    font.pointSize: 24
    textFormat: Text.PlainText
    text: "<b>Hello</b> <i>World!</i>"
}

效果如下圖所示：