QT 自绘开关按钮 RadioButton QT自定义控件

        传统使用中的radioButton单选按钮比较简洁，没有太多样式的变化，今天和大家分享一个开关按钮自定义RadioButton，可以在程序中用RadioButton进行开关、启/禁用，不仅样式更美观动态效果也很现代化使程序更加美观。平时我们用的很多软件里面也都有开关按钮使用，比如手机设置中的流量开关、飞行模式开关等。

        本文重新自绘了 开关按钮、启/禁用 按钮 大大提高了程序界面开发的可观和视觉效果！

本文作者原创，未经允许禁止转载。

QT 自绘开关按钮 RadioButton QT自定义控件目录

1 mainwindow.cpp

2 mainwindow.h

3 ui

4 完整版本代码

---

版本 QT5 、编译器 MSVC 2017 、 目前版本V1.0

1 mainwindow.cpp

/******************************************************************************
 * Copyright CSDN 双子座断点 Co., Ltd.
 * Copyright www.dreambeging.vip Co., Ltd.
 * All right reserved. See COPYRIGHT for detailed Information.
 *
 * @file       mainwindow.cpp
 * @version    V 1.0
 *
 * @author     断点<dream.2017@qq.com>
 * @date       2022/11/22
 * @history
 *****************************************************************************/

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    setWindowTitle("自绘开关按钮 V1.0 双子座断点 QQ群:1037037294  blog:https://blog.csdn.net/qq_37529913?type=lately/");



    ui->switchBtn4->setTextOn("");
    ui->switchBtn4->setTextOff("");

    ui->switchBtn5->setTextOn("开启");
    ui->switchBtn5->setTextOff("关闭");


    color.setRgb(148,232,31);
    ui->switchBtn2->setSliderColorOn(color);
    color.setRgb(111, 122, 126);
    ui->switchBtn2->setSliderColorOff(color);

    color.setRgb(148,232,31);
    ui->switchBtn3->setBgColorOn(color);
    color.setRgb(229,97,97);
    ui->switchBtn3->setBgColorOff(color);


    color.setRgb(38,231,70);
    ui->switchBtn6->setBgColorOn(color);
    color.setRgb(0,0,0);
    ui->switchBtn6->setBgColorOff(color);
}

MainWindow::~MainWindow()
{
    delete ui;
}

2 mainwindow.h

/******************************************************************************
 * Copyright CSDN 双子座断点 Co., Ltd.
 * Copyright www.dreambeging.vip Co., Ltd.
 * All right reserved. See COPYRIGHT for detailed Information.
 *
 * @file       mainwindow.cpp
 * @version    V 1.0
 *
 * @author     断点<dream.2017@qq.com>
 * @date       2022/11/22
 * @history
 *****************************************************************************/

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    setWindowTitle("自绘开关按钮 V1.0 双子座断点 QQ群:1037037294  blog:https://blog.csdn.net/qq_37529913?type=lately/");



    ui->switchBtn4->setTextOn("");
    ui->switchBtn4->setTextOff("");

    ui->switchBtn5->setTextOn("开启");
    ui->switchBtn5->setTextOff("关闭");


    color.setRgb(148,232,31);
    ui->switchBtn2->setSliderColorOn(color);
    color.setRgb(111, 122, 126);
    ui->switchBtn2->setSliderColorOff(color);

    color.setRgb(148,232,31);
    ui->switchBtn3->setBgColorOn(color);
    color.setRgb(229,97,97);
    ui->switchBtn3->setBgColorOff(color);


    color.setRgb(38,231,70);
    ui->switchBtn6->setBgColorOn(color);
    color.setRgb(0,0,0);
    ui->switchBtn6->setBgColorOff(color);
}

MainWindow::~MainWindow()
{
    delete ui;
}

3 ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>350</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="radioswitch" name="switchBtn" native="true">
    <property name="geometry">
     <rect>
      <x>80</x>
      <y>80</y>
      <width>100</width>
      <height>40</height>
     </rect>
    </property>
    <property name="minimumSize">
     <size>
      <width>100</width>
      <height>40</height>
     </size>
    </property>
   </widget>
   <widget class="radioswitch" name="switchBtn3" native="true">
    <property name="geometry">
     <rect>
      <x>210</x>
      <y>80</y>
      <width>100</width>
      <height>40</height>
     </rect>
    </property>
    <property name="minimumSize">
     <size>
      <width>100</width>
      <height>40</height>
     </size>
    </property>
   </widget>
   <widget class="radioswitch" name="switchBtn2" native="true">
    <property name="geometry">
     <rect>
      <x>210</x>
      <y>140</y>
      <width>100</width>
      <height>40</height>
     </rect>
    </property>
    <property name="minimumSize">
     <size>
      <width>100</width>
      <height>40</height>
     </size>
    </property>
   </widget>
   <widget class="radioswitch" name="switchBtn4" native="true">
    <property name="geometry">
     <rect>
      <x>80</x>
      <y>200</y>
      <width>100</width>
      <height>40</height>
     </rect>
    </property>
    <property name="minimumSize">
     <size>
      <width>100</width>
      <height>40</height>
     </size>
    </property>
   </widget>
   <widget class="radioswitch" name="switchBtn5" native="true">
    <property name="geometry">
     <rect>
      <x>80</x>
      <y>140</y>
      <width>100</width>
      <height>40</height>
     </rect>
    </property>
    <property name="minimumSize">
     <size>
      <width>100</width>
      <height>40</height>
     </size>
    </property>
   </widget>
   <widget class="radioswitch" name="switchBtn6" native="true">
    <property name="geometry">
     <rect>
      <x>210</x>
      <y>200</y>
      <width>100</width>
      <height>40</height>
     </rect>
    </property>
    <property name="minimumSize">
     <size>
      <width>100</width>
      <height>40</height>
     </size>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>400</width>
     <height>22</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <customwidgets>
  <customwidget>
   <class>radioswitch</class>
   <extends>QWidget</extends>
   <header location="global">radioswitch.h</header>
   <container>1</container>
  </customwidget>
 </customwidgets>
 <resources/>
 <connections/>
</ui>

4 完整版本代码

完整代码下载连接： 双子座断点 / QT 开关按钮 · GitCode