Qt Quick - ToolButton理论

一、概述

ToolButton在功能上类似于Button，但提供了更适合工具栏的外观。

也就是说 这个 ToolButton 一般放在 ToolBar 里面的。

二、使用

实现效果：

实现代码：

  ToolBar {
    
    
      RowLayout {
    
    
          anchors.fill: parent
          ToolButton {
    
    
              text: qsTr("‹")
              onClicked: stack.pop()
          }
          Label {
    
    
              text: "Title"
              elide: Label.ElideRight
              horizontalAlignment: Qt.AlignHCenter
              verticalAlignment: Qt.AlignVCenter
              Layout.fillWidth: true
          }
          ToolButton {
    
    
              text: qsTr("⋮")
              onClicked: menu.open()
          }
      }
  }

三、定制化

和Button一样，也就是 background 和 content item 可以定制

实现效果：

实现代码：

  import QtQuick 2.12
  import QtQuick.Controls 2.12

  ToolButton {
    
    
      id: control
      text: qsTr("ToolButton")
      width: 120

      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: 40
          implicitHeight: 40
          color: Qt.darker("#33333333", control.enabled && (control.checked || control.highlighted) ? 1.5 : 1.0)
          opacity: enabled ? 1 : 0.3
          visible: control.down || (control.enabled && (control.checked || control.highlighted))
      }
  }