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



相关文章
|
7月前
|
XML 编解码 JavaScript
封装svg图标组件
封装svg图标组件
118 0
|
5月前
|
移动开发
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
|
6月前
|
前端开发
代码方式引入iconfont图标
代码方式引入iconfont图标
86 0
|
6月前
|
JavaScript 小程序
小程序通过js控制页面字体颜色属性
小程序通过js控制页面字体颜色属性
50 0
|
7月前
|
JSON 小程序 前端开发
小程序不引入基础组件实现weui使用(附加小程序换行显示)
小程序不引入基础组件实现weui使用(附加小程序换行显示)
|
11月前
|
数据可视化 JavaScript 前端开发
ElementUI实现表格内嵌进度条功能
ElementUI实现表格内嵌进度条功能
393 1
|
数据安全/隐私保护 计算机视觉
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例) 一
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例)
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例) 一
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)二
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)二
|
计算机视觉
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)一
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)一