Flat风格的Qml按钮

BackendDev
• 阅读 4060
使用Qml的Button控件修改而成。

Flat风格的Qml按钮

源码

  • Button源码
import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0

Button {
    id: root
    property color backgroundDefaultColor: "#4E5BF2"
    property color backgroundPressedColor: Qt.darker(backgroundDefaultColor, 1.2)
    property color contentItemTextColor: "white"

    text: "Button"
    contentItem: Text {
        text: root.text
        color: root.contentItemTextColor
        font.pixelSize: 15
        font.family: "Arial"
        font.weight: Font.Thin
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 83
        implicitHeight: 37
        color: root.down ? root.backgroundPressedColor : root.backgroundDefaultColor
        radius: 3
        layer.enabled: true
        layer.effect: DropShadow {
            transparentBorder: true
            color: root.down ? root.backgroundPressedColor : root.backgroundDefaultColor
            samples: 20
        }
    }
}
  • 按钮组样式源码
GridLayout {
    anchors.centerIn: parent
    rows: 3
    columns: 3
    rowSpacing: 30
    columnSpacing: 30

    Button {
        text: "First"
        backgroundDefaultColor: "#727CF5"
    }

    Button {
        text: "Secondary"
        backgroundDefaultColor: "#5A6268"
    }

    Button {
        text: "Success"
        backgroundDefaultColor: "#0ACF97"
    }

    Button {
        text: "Danger"
        backgroundDefaultColor: "#F9375E"
    }

    Button {
        text: "Warning"
        contentItemTextColor: "#313A46"
        backgroundDefaultColor: "#FFBC00"
    }

    Button {
        text: "Info"
        backgroundDefaultColor: "#2B99B9"
    }

    Button {
        text: "Light"
        contentItemTextColor: "#313A46"
        backgroundDefaultColor: "#EEF2F7"
    }

    Button {
        backgroundDefaultColor: "#212730"
        backgroundPressedColor: "#313A46"
    }

    Button {
        backgroundDefaultColor: "#3498DB"
    }
}
  • 关于更多请关注公众号Qt君
点赞
收藏
评论区
推荐文章
梦
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Stella981 Stella981
3年前
Exceptionless
<divid"cnblogs\_post\_body"class"blogpostbodycnblogsmarkdown"<h1id"exceptionless.netcore开源日志框架"Exceptionless.NetCore开源日志框架</h1<blockquote<p作者:markjiang7m2<b
Wesley13 Wesley13
3年前
qml+opencv(一)
前言突然想起opencv,一直想做人脸识别,可是理论基础太水,只能慢慢来,去年学习了一会,然后公司让我去搞app和网络,就一直搁着,现在学习qml,突然想能不能在qml里面使用opencv,所以就有了这篇文章。QQuickItem和QObject在QML中,可视化的基础组件是Item,不可视化的就是QtObject,它们对应C
Stella981 Stella981
3年前
Android控件在xml中初始化
一、写在前面界面控件的初始化一般通过findViewByid来查找绑定再强制转换,这项工作只是个纯体力活没有任何营养,一般常用的是使用匿名内部类的方式:首先需要获取到layout中布局页面的Button控件中指定的Id:android:id"";之后为这样按钮绑定监听器,使用匿名内部类的方式,代码如下:
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Easter79 Easter79
3年前
Swift 笔记#2
!(https://oscimg.oschina.net/oscnet/52764124253b9ae528943f17fe46398f8a0.png)本期学习SwiftUI基础控件Button的使用,内容基本涵盖了Button高频的使用场景;通过本节课你将收获:1.常规创建button的两种方式2.
Wesley13 Wesley13
3年前
QML入门教程(一)
QML是什么?QML是一种描述性的脚本语言,文件格式以.qml结尾。语法格式非常像CSS(参考后文具体例子),但又支持javacript形式的编程控制。它结合了QtDesignerUI和QtScript的优点。QtDesigner可以设计出.ui界面文件,但是不支持和Qt原生C代码的交互。QtScript可以和Qt原生代码进行交互,但是有一个缺
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
CRM从哪些方面进行了管理?
我们将CRM(https://www.sap.cn/products/crm.html!image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/17e2d96568a98f0
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
BackendDev
BackendDev
Lv1
等待着大雪的纷纷扬扬,把每一个梦筑成洁白的巢。
文章
4
粉丝
0
获赞
0