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

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

需求

       多个按钮使用同一个样式

原理

       写成组件形式(在或不在当前文件中),需要样式时,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;
            }
        }
    }
}

效果

图片.png



相关文章
|
JavaScript 小程序
小程序js控制图片属性隐藏
小程序js控制图片属性隐藏
41 0
C# WPF 中 外部图标引入iconfont,无法正常显示问题 【小白记录】
本文介绍了在C# WPF应用程序中引入外部iconfont图标时可能遇到的显示问题及其解决方法:1) 检查资源路径和引入格式是否正确,确保字体文件引用格式为“#xxxx”,并正确指向字体文件位置;2) 确保图标资源被包含在程序集中,通过设置字体文件的生成操作为Resource(资源)来实现。
C# WPF 中 外部图标引入iconfont,无法正常显示问题 【小白记录】
|
6月前
|
移动开发
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
|
JavaScript 小程序
小程序通过js控制页面字体颜色属性
小程序通过js控制页面字体颜色属性
87 0
|
JSON 小程序 前端开发
小程序不引入基础组件实现weui使用(附加小程序换行显示)
小程序不引入基础组件实现weui使用(附加小程序换行显示)
|
数据安全/隐私保护 计算机视觉
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例) 一
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例)
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例) 一
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)二
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)二
|
计算机视觉
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)一
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)一