自定义Button

将Button自定义
Button 由两部分组成,背景和文本,background and contentitem.

重写background 和 contentitem 即可 ,参考Qt帮助文档做修改。

import QtQuick 2.12
  import QtQuick.Controls 2.12

  Button {
      id: control   //设置这个id,便于传参数给子控件

      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
      }
  }

image.png

猜你喜欢

转载自www.cnblogs.com/clear-love/p/11438739.html