QML控件 - Text

在 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 组件使用。