qml 學習自定義button的坑

平臺：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"
        
    }


}