将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. 1
radius: 2
}
}