Qt Quick - RoundButton理论

一、概述

RoundButton和Button是一样的，除了它有一个radius属性，这个属性允许圆角，而不必自定义背景。功能和Button完全一样的。

二、使用

实现的效果

实现代码：

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Controls 2.5

Window {
    
    
    id: window

    width: 300
    height: 300

    ColumnLayout
    {
    
    
        anchors.fill: parent

        RoundButton
        {
    
    
            text: "圆角按钮"
            Layout.preferredWidth: 80
            Layout.preferredHeight: 30
            radius: 5
            Layout.alignment: Qt.AlignHCenter
        }
    }
}

三、定制化

因为RoundButton和Button是一样的，所以其定制也是一样的。

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Controls 2.5

Window {
    
    
    id: window

    width: 300
    height: 300
        RoundButton
        {
    
    
            id:control
            text: "圆角按钮"
            Layout.preferredWidth: 80
            Layout.preferredHeight: 30
            radius: 10
            Layout.alignment: Qt.AlignHCenter

            contentItem: Text {
    
    
                text: control.text
                font: control.font
                opacity: enabled ? 1.0 : 0.3
                color: control.down ? "#17a81a" : "#21be2b"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }

            background: Rectangle {
    
    
                implicitWidth: 100
                implicitHeight: 40
                opacity: enabled ? 1 : 0.3
                border.color: control.down ? "#17a81a" : "#21be2b"
                border.width: 1
                radius: 5
            }
        }
}