qml 学习自定义button的坑

最新推荐文章于 2024-03-02 16:37:38 发布

one-rabbit

最新推荐文章于 2024-03-02 16:37:38 发布

阅读量1.1k

点赞数 1

分类专栏： QML 文章标签： qml uibutton

本文链接：https://blog.csdn.net/a1ngel/article/details/104984920

版权

QML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

平台：qtcreator 5.12.6 win10

问题：无法显示图标，设置其他icon的属性（无效）

总结：button的一些自定义用法（包括渐变色，三态，图标，背景图）

来源：qt官网的examples，书籍 qtquick核心编程

问题解决方案：

译文：

只要把 color 设置为透明，他就可以不用跟随文字的颜色。显示出来

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4
Rectangle {
    visible: true
    width: 300
    height: 700
    Button {  //渐变色
        id:control
        text: "A button"
        background: Rectangle {
            implicitWidth: 200
            implicitHeight: 50
            border.width: control.activeFocus ? 2 : 1
            border.color: "red"
            radius: 4
            gradient: Gradient {
                GradientStop { position: 0 ; color: control.pressed ? "#0000ff" : "#f0f8ff" }
                GradientStop { position: 1 ; color: control.pressed ? "#00ffff" : "#8a2be2" }
            }
        }
    }

    Button{//三态
        id:btn
        text:"三态"
        width: control.width
        height: control.height
        anchors.top: control.bottom
        anchors.topMargin: 10

        background:Rectangle {
            border.width: btn.pressed?2:1;
            border.color:{
                if(btn.pressed)
                    "#006400"
                else if(btn.hovered)
                    "#0000ff"
                else
                    "#dc143c";
            }
        }
    }

    Button{  //三态 内部
        id:btnIn
        text:"内部"
        anchors{top: btn.bottom;topMargin: 10}
        implicitWidth: 200;implicitHeight: 50

        background:Rectangle {
            color:{if(btnIn.pressed)
                    "#006400"
                else if(btnIn.hovered)
                    "#0000ff"
                else
                    "#dc143c"

            }
        }
    }

    Button{//图标
        id:iconx
        anchors{top: btnIn.bottom;topMargin: 10}
        //        implicitWidth: 200;implicitHeight: 50

        text:"谷歌浏览器"
        icon.source: "qrc:/icon.png"
        icon.color: "transparent"
        display: AbstractButton.TextBesideIcon
        leftPadding: 0  //控制空格
    }

    Button{
        anchors{top: iconx.bottom;topMargin: 10}
        Text {
            text: "背景按钮"
            color: "red"
            font.pointSize: 10
        }
        //第一种
//        Image {
//            anchors.fill: parent
//            source: "qrc:/icon.png"
//        }
        //第二种
        icon.source: "qrc:/icon.png"
        icon.color:"transparent"
        
    }


}