GroupBox用来将子类的部件显示在其边框内部，并且一般默认左上有一个标题。
GroupBox不提供自己的布局.所以需要我们自己通过ColumnLayout或者其他布局方式来进行布局.
GroupBox的title属性用来设置要显示的标题内容,label属性则是用来设置标题的样式
接下来我们便来自定义一个GroupBox
首先创建DynamicGroupBox.qml文件.内容如下所示(qt5.12版本):

import QtQuick 2.0
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14
GroupBox {
property var radiusVal: 3 // 圆角值
property var borderWidth: 1 // 边框宽度
property var borderColor: "#97C4F5" // 边框颜色
property var titleColor: "#2359B7" // 标题颜色
property var titleLeftBkColor: "#C9DDF8" // 标题最左侧背景色
property var titleRightBkColor: "#F7FAFF" // 标题最右侧颜色
property var titleTopPadding: 3 // 标题的顶部内边距
property var contentBkColor: "#77F0F6FF" // 内容背景色
property var titleFontPixel: 16

  id: control  
  title: qsTr("GroupBox")

  background: Rectangle {  
      anchors.fill: control  
      radius: radiusVal  
      border.color: borderColor  
      color: contentBkColor  
      clip: true  
      Item {  
              x: borderWidth  
              y: borderWidth  
              width: parent.width - borderWidth \* 2  
              height: control.topPadding - control.bottomPadding - borderWidth \* 2 + titleTopPadding \* 2  
              clip: true

              Rectangle {        // 设置标题的背景色  
                    anchors.fill: parent  
                    color: "#228833"

                    LinearGradient {  
                        anchors.fill: parent  
                        source: parent  
                        start: Qt.point(0, 0)  
                        end: Qt.point(parent.width, 0)  
                        gradient: Gradient {  
                            GradientStop { position: 0.0; color: titleLeftBkColor }  
                            GradientStop { position: 1.0; color: titleRightBkColor }  
                        }  
                    }  
              }  
      }  
  }

  label: Label {        // 设置title的属性  
       y:  titleTopPadding + 3  
       x: control.leftPadding  
       width: control.availableWidth  
       text: control.title  
       color: titleColor  
       elide: Text.ElideRight  
       font.family: "Microsoft Yahei"  
       font.pixelSize: titleFontPixel

  }

}

然后我们在main.qml中使用它

import QtQuick 2.2
import QtQuick.Window 2.0
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.14
Window {
visible: true;
width: 400
height: 300

DynamicGroupBox {  
      anchors.centerIn: parent  
      title: "详细查询"

      ColumnLayout {  
          anchors.fill: parent  
          CheckBox { text: qsTr("按价格查询") }  
          CheckBox { text: qsTr("按时间查询") }  
          CheckBox { text: qsTr("按日期查询") }  
      }  
      width: 200  
  }

}

效果如下所示: