Qt Quick - GroupBox

一、概述

GroupBox用于在一个有标题的可视容器中去布局一组逻辑控件组。GroupBox不提供自己的布局，我们需要自己布局其内容，例如通过创建RowLayout或ColumnLayout。这个GroupBox其实就是提供了一个分组的逻辑功能，让页面布局内容看起来更合理。

声明为GroupBox子元素的项自动成为GroupBox内容项的父元素。动态创建的项需要显式地赋给contentItem。
如果在一个群组框中只使用一个项目，它将调整大小以适应其包含的项目的隐式大小。这使得它特别适合与布局一起使用。

  GroupBox {
    
    
      title: qsTr("Synchronize")
      ColumnLayout {
    
    
          anchors.fill: parent
          CheckBox {
    
     text: qsTr("E-mail") }
          CheckBox {
    
     text: qsTr("Calendar") }
          CheckBox {
    
     text: qsTr("Contacts") }
      }
  }

二、可 Check 的 GroupBox

尽管GroupBox没有内置的复选框，但通过将其与复选框配对，可以直接创建一个可选中的GroupBox。用这个来控制GroupBox 里面的一些内容。

当它的复选框被打开或关闭时，启用或禁用groupbox的子元素是一种常见的模式。

  GroupBox {
    
    
      label: CheckBox {
    
    
          id: checkBox
          checked: true
          text: qsTr("Synchronize")
      }

      ColumnLayout {
    
    
          anchors.fill: parent
          enabled: checkBox.checked
          CheckBox {
    
     text: qsTr("E-mail") }
          CheckBox {
    
     text: qsTr("Calendar") }
          CheckBox {
    
     text: qsTr("Contacts") }
      }
  }

三、定制化

  import QtQuick 2.12
  import QtQuick.Controls 2.12

  GroupBox {
    
    
      id: control
      title: qsTr("GroupBox")

      background: Rectangle {
    
    
          y: control.topPadding - control.bottomPadding
          width: parent.width
          height: parent.height - control.topPadding + control.bottomPadding
          color: "transparent"
          border.color: "#21be2b"
          radius: 2
      }

      label: Label {
    
    
          x: control.leftPadding
          width: control.availableWidth
          text: control.title
          color: "#21be2b"
          elide: Text.ElideRight
      }

      Label {
    
    
          text: qsTr("Content goes here!")
      }
  }