qml按鈕樣式設計，把樣式寫成組件

版權聲明：本文爲博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接和本聲明。
本文連接：https://blog.csdn.net/qq_33200959/article/details/74932165

經過Button的style屬性能夠設置按鈕的樣式以下：

style: ButtonStyle {
            //進行對Button的樣式設置
            background: Rectangle {
 
                //設置圓角
                radius: 5;
                color: "red"
                border.width: control.pressed ? 2:1
            }
        }
可是若是多個按鈕同時用到，上面的方式顯得煩瑣，此時咱們能夠使用Component在QML文檔內定義一個組件
 
 
設置其id爲btnStyle而後在按鈕設置樣式時直接使用
 
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
 
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    //組件
    Component {
        id: btnStyle
        ButtonStyle {
            background: Rectangle {
                implicitWidth: 70
                implicitHeight: 25
                color: "black"
                border.width: control.pressed ? 8:4
                border.color: (control.hovered || control.pressed) ? "red" : "green"
            }
        }
    }
 
    Button {
        id: up
        width: 400
        height: 100
        anchors.top: parent.top
        anchors.topMargin: 50
        anchors.left: parent.left
        anchors.leftMargin: 120
        style: btnStyle
    }
 
    Button {
        id: mid
        width: 400
        height: 100
        anchors.left: up.left
        anchors.top: up.bottom
        anchors.topMargin: 40
        style: btnStyle
    }
 
    Button {
        id: down
        width: 400
        height: 100
        anchors.left: up.left
        anchors.top: mid.bottom
        anchors.topMargin: 40
        style: btnStyle
    }
}
 

 

 
————————————————
版權聲明：本文爲CSDN博主「山海成精」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。
原文連接：https://blog.csdn.net/qq_33200959/article/details/74932165