Qt文档阅读笔记-Button QML Type官方解析及实例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq78442761/article/details/86261433

目录

 

 

官方解析

博主栗子

---

 

官方解析

按钮展示了一个按钮控件，这个控件可以被用户所按下，按钮是通常被用于执行一个操作，或者解决一个问题。buttons有如下几个典栗，如Ok，Apply，Cancel，Close，Yes，No，Help。
一个按钮可以触发clicked()信号，连接这个信号可以执行某些操作。按钮也提供了如下的几个信号canceled()，doubleClicked()， pressed()，released()和pressAndHold()，以及长按。
下面这个片段展示了按钮的信号该如何连接：

  RowLayout {
      Button {
          text: "Ok"
          onClicked: model.submit()
      }
      Button {
          text: "Cancel"
          onClicked: model.revert()
      }
  }

下面说下自定义按钮，按钮由2个可视化item：background和content item组成

 

  import QtQuick 2.6
  import QtQuick.Controls 2.1

  Button {
      id: control
      text: qsTr("Button")

      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: 100
          implicitHeight: 40
          opacity: enabled ? 1 : 0.3
          border.color: control.down ? "#17a81a" : "#21be2b"
          border.width: 1
          radius: 2
      }
  }

博主栗子

程序运行截图如下：

源码如下：

main.cpp

#include <QApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl("qrc:/main.qml"));
    if(engine.rootObjects().isEmpty()){

        return -1;
    }

    return a.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {

    visible: true
    width: 800
    height: 600

    RowLayout{

        anchors.centerIn: parent

        Button{

            text: "Ok"
            onClicked: {

                console.log("Button clicked!")
            }
        }

        MyButton{

            id: helloMyButton
            onClicked: {

                console.log("MyButton clicked!")
            }
        }
    }

}

MyButton.qml

import QtQuick 2.6
import QtQuick.Controls 2.1

Button {

    id: control
    text: qsTr("MyButton")

    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{

        implicitHeight: 100
        implicitWidth: 40
        opacity: enabled ? 1 : 0.3
        border.color: control.down ? "#17a81a" : "#21be2b"
        border.width: 1
        radius: 2
    }
}