【Qt Quick】Button控件和Container容器（四）

|本文大概阅读时间5分钟。
|版权说明：原创文章，如需转载，请标明文章出处。https://blog.csdn.net/weixin_40192195/article/details/109217982

---

一.前言

本节介绍QML的按钮控件

1.Button Controls（按钮）

1）Button

点击按钮后会执行命令

	ColumnLayout {
          Button {
              text: "Ok"
              onClicked: console.log("OK")
              
          }
          Button {
              text: "Cancel"
              onClicked: console.log("Cancel")
          }
      }

2）CheckBox（复选框）

ColumnLayout {
      CheckBox {
          checked: true
          text: qsTr("First")
      }
      CheckBox {
          text: qsTr("Second")
      }
      CheckBox {
          checked: true
          text: qsTr("Third")
      }
  }

3）RadioButton（单选按钮）

	ColumnLayout {
          RadioButton {
              checked: true
              text: qsTr("First")
          }
          RadioButton {
              text: qsTr("Second")
          }
          RadioButton {
              text: qsTr("Third")
          }
      }

4）DelayButton（延时按钮）

	DelayButton{
        anchors.centerIn: parent
        text: "delay"
        delay: 2000 //延时调整出2000ms
    }

5）RoundButton（圆形按钮）

	RoundButton {
          text: "ok"
          highlighted: true
          onClicked: console.log("OK")
      }

6）Switch（滑动）

	ColumnLayout {
          Switch {
              checked: true
              text: qsTr("Push")
          }
          Switch {
              text: qsTr("PUSH")
          }
      }

7）ToolButton（工具按钮）

	ToolBar {
          RowLayout {
              anchors.fill: parent
              ToolButton {
                  text: qsTr("‹")
                  onClicked: console.log("Ok")
              }
              Label {
                  text: "Title"
                  font.family: "ubuntu"
              }
              ToolButton {
                  text: qsTr("⋮")
                  onClicked: menu.open()
              }
          }

          Menu{
              id:menu
              y:parent.height
              MenuItem{
                  text: "first"
              }
              MenuItem{
                  text: "second"
              }
          }
      }

---

2.Container（容器）

1）Frame（框架）

    Frame {
        anchors.centerIn: parent
        ColumnLayout {
            anchors.fill: parent
            CheckBox { text: qsTr("E-mail") }
            CheckBox { text: qsTr("Calendar") }
            CheckBox { text: qsTr("Contacts") }
        }
    }

2）GroupBox（组合框）

GroupBox {
        anchors.centerIn: parent
        title: "GroupBox"
        ColumnLayout {
            anchors.fill: parent
            RadioButton { checked: true;text: qsTr("E-mail") }
            RadioButton { text: qsTr("Calendar") }
            RadioButton { text: qsTr("Contacts") }
        }
    }

3）Pane（面板）

    Pane {
        anchors.centerIn: parent
        ColumnLayout {
            anchors.fill: parent
            RadioButton { checked: true;text: qsTr("E-mail") }
            RadioButton { text: qsTr("Calendar") }
            RadioButton { text: qsTr("Contacts") }
        }
    }

4）ScrollView（滚动视图）

	ScrollView {
          anchors.centerIn: parent
          width: 200
          height: 200
          clip: true

          Label {
              text: "QML"
              font.pixelSize: 224
          }
      }

---