如何让QtQuick透明工具栏

Question

如何使内置 Quick ToolBar 透明以便只有按钮可见？

Answer 1

你不一定要用ToolBar，可以是任何可视化的项目，比如这里我用半透明的蓝色矩形作为工具栏：

ApplicationWindow {
    width: 400
    height: 300
    visible: true
    toolBar: Rectangle {
        color: Qt.rgba(0,0,255,0.5)
        width: parent.width
        height: 30
        Row {
            ToolButton {
                text: "Button1"
            }
            ToolButton {
                text: "Button2"
            }
        }
    } 
}

或者，在您的情况下，您可以使用 Row:

toolBar: Row {   
}

Answer 2

从 QtQuick.Controls.Styles 1.3 和 Qt 5.2 开始，您可以使用 ToolBarStyle，即您可以这样写（显然可以使用您喜欢的任何填充）：

toolBar:ToolBar {

    style: ToolBarStyle {
        padding {
            left: 0
            right: 0
            top: 0
            bottom: 0
        }
        background: Rectangle {
            color: "transparent"
        }
    }

    RowLayout {
        anchors.fill: parent
        ToolButton {
            text: "Button 1"
        }
        ToolButton {
            text: "Button 2"
            style: ButtonStyle {
                background: Rectangle {

                    border.width: control.activeFocus ? 4 : 1
                    border.color: "#888"
                    radius: 4
                    gradient: Gradient {
                        GradientStop { position: 0 ; color: control.pressed ? "#eee" : "#fff" }
                        GradientStop { position: 1 ; color: control.pressed ? "#fff" : "#aaa" }
                    }
                }

                label: Text {
                    anchors.fill: parent
                    minimumPixelSize : 8
                    fontSizeMode: Text.HorizontalFit
                    font.pixelSize: 15
                    text: "open"
                    color: "red"
                    font.bold: true
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }
        ToolButton {
            text: "Button 3"
        }
        Item { Layout.fillWidth: true }
        CheckBox {
            text: "Enabled"
            checked: true
            Layout.alignment: Qt.AlignRight
        }
    }
}

如何让QtQuick透明工具栏

How to make QtQuick transparent Toolbar

toolbar

qml

qt-quick

qtquick2