当前位置：首页 > news >正文

QML控件 - Text

news 来源：原创 2025/5/19 19:17:43

在 QML 中，Text 组件是用于显示文本的核心元素，支持丰富的文本样式、布局和交互功能。以下是 完整指南 和常见用法示例：

1. 基础用法

import QtQuick 2.15

Text {
    text: "Hello, QML!"  // 显示文本内容
    font.pixelSize: 20   // 字体大小（像素）
    color: "blue"        // 文本颜色
}

2. 关键属性

字体控制

字体大小：

font.pixelSize: 16     // 像素单位（推荐）
font.pointSize: 12     // 磅单位（根据 DPI 缩放）

字体家族：

font.family: "Arial"   // 指定字体
font.bold: true        // 加粗
font.italic: true      // 斜体

字体颜色：

color: "#FF0000"       // 十六进制颜色
color: Qt.rgba(1,0,0,0.5) // 半透明红色

布局与对齐

对齐方式：

horizontalAlignment: Text.AlignHCenter // 水平居中
verticalAlignment: Text.AlignVCenter   // 垂直居中

自动换行：

width: 200            // 限制宽度以触发换行
wrapMode: Text.WordWrap // 按单词换行
elide: Text.ElideRight // 溢出时显示省略号（...）

富文本支持

HTML 格式：

textFormat: Text.RichText
text: "<b>Bold</b> <i>Italic</i> <font color='red'>Red Text</font>"

3. 高级效果

文本阴影

Text {
    text: "Shadow Text"
    font.pixelSize: 24
    color: "white"
    style: Text.Outline
    styleColor: "black"  // 描边/阴影颜色
}

渐变填充

Text {
    text: "Gradient Text"
    font.pixelSize: 30
    
    // 使用线性渐变
    LinearGradient {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 1.0; color: "blue" }
        }
        source: parent  // 将渐变应用到文本
    }
}

4. 动态数据绑定

实时更新文本

Text {
    // 绑定到变量或属性
    text: "Value: " + myValue 
}

// 在 JavaScript 中更新：
Button {
    onClicked: myValue++
}

国际化（多语言）

Text {
    text: qsTr("Hello World") // 使用 Qt 的翻译系统
}

5. 性能优化

缓存为图片：

layer.enabled: true    // 启用图层缓存（静态文本）

避免频繁更新：

// 使用 Timer 控制更新频率
Timer {
    interval: 1000
    running: true
    onTriggered: text = new Date().toLocaleString()
}

6. 常见问题

文本不显示

检查 color 是否与背景色相同
确保父元素的 width/height 不为 0

字体未生效

确认系统中存在指定的 font.family
使用 Qt.fontFamilies() 打印可用字体列表

完整示例

Item {
    width: 400
    height: 200

    Text {
        anchors.centerIn: parent
        text: qsTr("动态时间: ") + Qt.formatDateTime(new Date(), "hh:mm:ss")
        font { 
            family: "Arial"
            pixelSize: 24 
            bold: true
        }
        color: "#333"
        style: Text.Raised
        styleColor: "#AAA"
        
        // 自动更新
        Timer {
            interval: 1000
            running: true
            onTriggered: parent.text = qsTr("动态时间: ") + Qt.formatDateTime(new Date(), "hh:mm:ss")
        }
    }
}

如果需要更具体的功能（如文本输入、复杂布局），可以结合 TextField 或 TextEdit 组件使用。