QML单选选项卡按钮

最新推荐文章于 2024-03-18 23:13:08 发布

凶猛的瘦子

最新推荐文章于 2024-03-18 23:13:08 发布

阅读量178

点赞数

分类专栏： QML组件文章标签： qt qml

本文链接：https://blog.csdn.net/qq_39827640/article/details/130734459

版权

QML组件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述
使用到QML图标文字按钮 https://blog.csdn.net/qq_39827640/article/details/130734320

RadioTabButton.qml

import QtQuick
import QtQuick.Controls

TabBar {
  id: control

  height: 32
  width: 290
  spacing: spacing + 0 - 2 * btnMargin

  property alias model: repeater.model
  property real radius: 15
  property real btnMargin: 2
  property real btnIconWidth: 24
  property real btnIconHeight: 24
  property real btnIconLeftMargin: 0
  property real btnIconAndTextSpacing: 2
  property bool btnIsHorizontalCenter: true
  property color bgColor: "#3E3D40"
  property color bgDisabledColor: "#3E3D40"
  property var btnDefaultGradient: Gradient {
    GradientStop { position: 0.0; color: "transparent" }
    GradientStop { position: 1.0; color: "transparent" }
    orientation: Gradient.Horizontal
  }
  property var btnHoverGradient: Gradient {
    GradientStop { position: 0.0; color: "#6C6B6E" }
    GradientStop { position: 1.0; color: "#6C6B6E" }
    orientation: Gradient.Horizontal
  }
  property var btnPressedGradient: Gradient {
    GradientStop { position: 0.0; color: "#875CFF" }
    GradientStop { position: 1.0; color: "#D25CFF" }
    orientation: Gradient.Horizontal
  }
  property var btnCheckedGradient: Gradient {
    GradientStop { position: 0.0; color: "#875CFF" }
    GradientStop { position: 1.0; color: "#D25CFF" }
    orientation: Gradient.Horizontal
  }
  property var btnDisabledGradient: Gradient {
    GradientStop { position: 0.0; color: "transparent" }
    GradientStop { position: 1.0; color: "transparent" }
    orientation: Gradient.Horizontal
  }
  property var btnCheckedHoverGradient: Gradient {
    GradientStop { position: 0.0; color: "#9B76FF" }
    GradientStop { position: 1.0; color: "#DA76FF" }
    orientation: Gradient.Horizontal
  }
  property var btnCheckedPressedGradient: Gradient {
    GradientStop { position: 0.0; color: "#A583FF" }
    GradientStop { position: 1.0; color: "#DC83FF" }
    orientation: Gradient.Horizontal
  }
  property var btnCheckedDisabledGradient: Gradient {
    GradientStop { position: 0.0; color: "#6C6B6E" }
    GradientStop { position: 1.0; color: "#6C6B6E" }
    orientation: Gradient.Horizontal
  }
  property color btnTextDefaultColor: "#A9A9AA"
  property color btnTextHoverColor: "#FFFFFF"
  property color btnTextPressedColor: "#FFFFFF"
  property color btnTextCheckedColor: "#FFFFFF"
  property color btnTextDisabledColor: "#6C6B6E"
  property color btnTextCheckedHoverColor: "#FFFFFF"
  property color btnTextCheckedPressedColor: "#FFFFFF"
  property color btnTextCheckedDisabledColor: "#8F8E91"
  property real btnTextPointSize: 10

  background: Rectangle {
    id: controlBg
    color: enabled ? bgColor : bgDisabledColor
    radius: control.radius
  }

  Repeater {
    id: repeater
    anchors.fill: parent
    model: [
      { text: "Select", icon: "qrc:/qmldemo.com/avkit/assets/anieraser/icon24_restore.png" },
      { text: "DeSelect", icon: "qrc:/qmldemo.com/avkit/assets/anieraser/icon24_erase.png" },
    ]
    TabButton {
      height: parent.height
      anchors.verticalCenter: parent.verticalCenter
      checked: currentIndex === index
      contentItem: IconTextButton {
        anchors.fill: parent
        anchors.margins: btnMargin
        // enabled: control.enabled
        radius: control.radius
        text: modelData.text
        iconsource: modelData.icon
        checked: parent.checked
        isHorizontalCenter: btnIsHorizontalCenter
        defaultGradient: btnDefaultGradient
        hoverGradient: btnHoverGradient
        pressedGradient: btnPressedGradient
        checkedGradient: btnCheckedGradient
        disabledGradient: btnDisabledGradient
        checkedHoverGradient: btnCheckedHoverGradient
        checkedPressedGradient: btnCheckedPressedGradient
        checkedDisabledGradient: btnCheckedDisabledGradient
        textDefaultColor: btnTextDefaultColor
        textHoverColor: btnTextHoverColor
        textPressedColor: btnTextPressedColor
        textCheckedColor: btnTextCheckedColor
        textDisabledColor: btnTextDisabledColor
        textCheckedHoverColor: btnTextCheckedHoverColor
        textCheckedPressedColor: btnTextCheckedPressedColor
        textCheckedDisabledColor: btnTextCheckedDisabledColor
        textPointSize: btnTextPointSize
        iconWidth: btnIconWidth
        iconHeight: btnIconHeight
        iconLeftMargin: btnIconLeftMargin
        iconAndTextSpacing: btnIconAndTextSpacing

        mouseArea {
          enabled: control.enabled
          onPressed: {
            currentIndex = index
          }
        }
      }
      background: Rectangle {
        id: btnBg
        anchors.fill: parent
        color: "transparent"
      }
    }
  }
}

        RadioTabButton {
          model: [
            { text: "Select", icon: "qrc:/qmldemo.com/avkit/assets/anieraser/icon24_restore.png" },
            { text: "DeSelect", icon: "qrc:/qmldemo.com/avkit/assets/anieraser/icon24_erase.png" },
          ]
        }