19.Quick QML-GroupBox自定义

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
      }

}

效果如下所示: