qml中text显示不同颜色或大小的文字

关注

原创最新推荐文章于 2026-08-02 13:20:50 发布 6.8k 阅读 AI 写同款· GEO 优化 ›

QML 之 button 修改字体颜色，ButtonStyle的使用方式在QML 中，我们使用Button 这个控件的话，没有设计的话就会出现如下：那我们想改变样式的话，就要使用style：ButtonStyle，我们点击帮助文档，看到例子只写了background。我们就模仿写出来它的lable。写出来效果：对应代码： Button{ id:button1; width: 80; height: 80; anchors.left: rect2.right; . 阅读详情

运行效果：
在这里插入图片描述

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

   ColumnLayout {
        Text {
            text: "测试字体颜色" + '<font color="#D3D3D3"">测试</font>'
        }

        Text {
            text: "测试字体大小" + '<font size="5">测试</font>'
        }

        Text {
            text: "测试字体颜色" + '<font color="green">测试</font>'
        }
   }
}

在listView中要显示不同颜色的文字，这里写了个简单的demo
代码：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    ColumnLayout {
        Frame {
            ListView {
                id: listViewId
                implicitWidth: 250
                implicitHeight: 250
                clip: true

                model: ListModel {
                    Component.onCompleted: {
                        append({"description": "Wash the car" + '<font color="#D3D3D3"">测试</font>'});
                        append({"description": "123" + '<font color="#98FB98"">测试</font>'});
                        append({"description": "345" + '<font color="#FF00FF"">测试</font>'});
                        append({"description": "567" + '<font color="#FFB6C1"">测试</font>'});
                     }
                }

                delegate: RowLayout {
                    width: parent.width

                    Text {
                        text: model.description
                    }
                }
            }
        } //end Frame
    }
}