Qml实用技巧：将样式style从对象中独立出来，可使多个按钮加载同一个样式

最新推荐文章于 2025-02-23 20:45:29 发布

长沙红胖子Qt（技术Q群4597637）

最新推荐文章于 2025-02-23 20:45:29 发布

阅读量3.9w

点赞数 4

分类专栏： Qt开发文章标签：组件 Component Style ButtonStyle

本文链接：https://blog.csdn.net/qq21497936/article/details/78583889

版权

Qt开发专栏收录该内容

329 篇文章

订阅专栏

本文介绍如何在QML中通过组件形式实现多个按钮共享同一套样式的方法，包括样式定义及应用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

多个按钮使用同一个样式

原理

写成组件形式（在或不在当前文件中），需要样式时，Button加载style即可

代码

Item {
    Rectangle {
        width: 800;
        height: 640;
        Column {
            Button {
                id: btn;
                text: "testStyle1"; // 会被样式label中的text覆盖
                style: ButtonStyle {
                    background: Rectangle {
                        color: control.hovered?"#a0a0a0":"#c0c0c0";
                        border.width: control.pressed?2:1;
                        border.color: "white";
                    }
                    label: Label {
                        text: control.text; // 设置label样式后，按钮显示以此text为准
                        color: "black";
                        font.pixelSize: 24;
                        font.bold: true;
                    }
                }
            }
            Button {
                id: btn1;
                text: "testStyle2"
                style: btnStyle;
            }
            Button {
//                id: btn1;
                text: "testStyle3"
                style: btnStyle;
            }
       }
    }
    Component {
        id: btnStyle;
        ButtonStyle {
            background: Rectangle {
                color: control.hovered?"#a0a0a0":"#c0c0c0";
                border.width: control.pressed?2:1;
                border.color: "white";
            }
            label: Label {
                text: control.text; // 设置label样式后，按钮显示以此text为准
                color: "black";
                font.pixelSize: 24;
                font.bold: true;
            }
        }
    }
}