前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flat风格的Qml开关按钮

Flat风格的Qml开关按钮

作者头像
Qt君
发布2019-11-27 15:26:48
1.1K0
发布2019-11-27 15:26:48
举报
文章被收录于专栏:跟Qt君学编程

可以打开或关闭的开关按钮,使用Qml的Switch控件修改而成。

0x00 Switch按钮代码

代码语言:javascript
复制
import QtQuick 2.0
import QtQuick.Controls 2.0

Switch {
    id: root
    property color checkedColor: "#0ACF97"

    indicator: Rectangle {
        width: 54
        height: 34
        radius: height / 2
        color: root.checked ? checkedColor : "white"
        border.width: 2
        border.color: root.checked ? checkedColor : "#E5E5E5"

        Rectangle {
            x: root.checked ? parent.width - width - 2 : 1
            width: root.checked ? parent.height - 4 : parent.height - 2
            height: width
            radius: width / 2
            anchors.verticalCenter: parent.verticalCenter
            color: "white"
            border.color: "#D5D5D5"

            Behavior on x {
                NumberAnimation { duration: 200 }
            }
        }
    }
}

0x01 Switch样式代码

代码语言:javascript
复制
GridLayout {
    width: root.width
    rows: switchRepeater.count

    Repeater {
        id: switchRepeater
        model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]
        Column {
            spacing: 15
            Switch {
                checkedColor: modelData
                checked: true
            }

            Switch {
                checkedColor: modelData
            }

            Switch {
                checkedColor: modelData
                checked: true
            }
        }
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-11-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Qt君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 0x00 Switch按钮代码
  • 0x01 Switch样式代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档