自定义Button

最新推荐文章于 2021-09-11 16:12:36 发布

weixin_30410999

最新推荐文章于 2021-09-11 16:12:36 发布

阅读量430

点赞数

原文链接：http://www.cnblogs.com/clear-love/p/11438739.html

版权

将Button自定义
Customizing Button 在qt帮助文档里
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
      }
  }