QML 自定义按钮 样式总有问题

自定义qml的Button的时候样式有问题,这是因为Button内置了很多样式。自定义Button可以用AbstractButton这个组件。

只要自定义background(背景) contentItem(内容,一般是一个Text)就可以了。示例代码:

AbstractButton {
    id: btn
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    anchors.bottomMargin: 25
    anchors.rightMargin: 30
    width: 65
    height: 25
    enabled: true
    background: Rectangle {
        color: {  // 根据button的状态调整颜色
            if (!btn.enabled)
                return "#FF4D6B6E";
            else if (btn.pressed)
                return "#FF3A5AB0";
            else if (btn.hovered)
                return "#FF4F6ECA";
            else
                return "#FF4D6BFE";
        }
        opacity: btn.enabled ? 1 : 0.3
        radius: 2
    }
    contentItem: Text {
        text: qsTr("点我")
        font.pointSize: 10
        color: "#FFF8FAFF"
        horizontalAlignment: Text.AlignHCenter  // 居中对齐文字
        verticalAlignment: Text.AlignVCenter
    }
}
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇