Qt Quick Qml中Button及其他组件实现Hover和Click效果

发表于 | 分类于
Qt Quick Qml中Button及其他组件实现Hover和Click效果

Button的Hover

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Button {
  id: btn_ok
  text: "确认"
  visible: true
  //默认焦点为确认
  focus: true
  contentItem: Text {
    text: parent.text
    color: parent.hovered ? "white" : "#666666"
    font.pixelSize: 14
    font.family: "Microsoft YaHei"
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
    elide: Text.ElideRight
  }
  background: Rectangle {
    implicitWidth: 65
    implicitHeight: 32
    color: parent.hovered ? "#4A6FD3" : "white"
    border.color: "#D9D9D9"
    border.width: 1
    radius: 4
  }
  onClicked: {
    control.hide()
    control.clickOk()
  }
}

其他组件

其他的可以配合MouseArea实现hover事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Rectangle {
  anchors.fill: parent
  Text {
    text: model.text
    font.family: "微软雅黑"
    anchors.centerIn: parent
    color: "#333"
  }
  MouseArea {
    anchors.fill: parent
    hoverEnabled: true
    onEntered: parent.color = "#f3f3f3"
    onExited: parent.color = "transparent"
    onClicked: {
      selectedSegment = model.text
      segmentDialog.close()
    }
  }
}