Qt自定义控件(一)-- 状态栏按键

自定义控件功能说明

1.想要在状态栏显示按键。
2.按键左边能显示信息。
3.按键显示圆形,按下按键能够切换按键的显示状态。
4.按按键能够跳到对应的事件中去。

实现的效果图

在这里插入图片描述

源代码:

#ifndef STATUSBUTTON_H
#define STATUSBUTTON_H

#include <QWidget>

namespace Ui {
class StatusButton;
}

class StatusButton : public QWidget
{
    Q_OBJECT
    enum ButtonColor{RED,GREEN};

public:
    explicit StatusButton(QWidget *parent = nullptr);
    ~StatusButton();
    void setText(const QString text);
    void setButtonColor(ButtonColor color=RED);
    void setTextAndButton(const QString text,ButtonColor color);
private slots:
    void on_toolButton_triggered(QAction *arg1);
    void on_toolButton_clicked();

private:
    Ui::StatusButton *ui;
    QStringList m_listColor;
};

#endif // STATUSBUTTON_H

cpp

#include "statusbutton.h"
#include "ui_statusbutton.h"
#include <QDebug>

StatusButton::StatusButton(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::StatusButton)
{
    ui->setupUi(this);
    QString green="QToolButton { border-radius:9px;background-color: rgb(85, 255, 0);}"
                  "QToolButton:pressed {border-width:3;border-color:orange;border-style:solid;;background-color: rgb(255, 255, 255);}";
    QString red="QToolButton { border-radius:9px; background-color: rgb(255, 0, 0);}"
                "QToolButton:pressed {border-width:3;border-color:orange;border-style:solid;;background-color: rgb(255, 255, 255);}";
    m_listColor.push_back(red);
    m_listColor.push_back(green);
    //设置开始默认颜色
    setButtonColor();
}

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


void StatusButton::on_toolButton_triggered(QAction *arg1)
{
    qDebug()<<u8"点击了按键";
}

void StatusButton::on_toolButton_clicked()
{
    qDebug()<<u8"点击了按键";
    //ui->toolButton->setStyleSheet("QToolButton{border-radius:9px;background-color: rgb(255, 0, 0);}");
    QString str="QToolButton {border-radius:9px; background-color: rgb(255, 0, 0);background-color: rgb(85, 255, 0);}"
                "QToolButton::pressed {color:orange;border-width:3;border-color:orange;border-style:solid;;background-color: rgb(255, 255, 255);}}";
    ui->toolButton->setStyleSheet(str);
}

void StatusButton::setText(const QString text)
{
   ui->label->setText(text);
}

void StatusButton::setButtonColor(ButtonColor color)
{
    ui->toolButton->setStyleSheet(m_listColor[color]);
    qDebug()<<m_listColor[color];
}

void StatusButton::setTextAndButton(const QString text,ButtonColor color)
{
    setText(text);
    setButtonColor(color);
}


已经上传到平台,有需要自行免费下载。
https://download.csdn.net/download/simple_core/85393269

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt QML是一种用于创建跨平台应用程序的框架,它结合了Qt的强大功能和QML的声明性语言。在Qt QML中,可以使用QML语言来设计用户界面,并通过JavaScript来处理逻辑。 要创建一个时间设置界面,可以按照以下步骤进行: 1. 创建一个QML文件,例如TimeSettings.qml。 2. 在QML文件中,使用Qt Quick Controls中的组件来构建界面。例如,可以使用TextField组件来输入时间,Button组件来保存设置等。 3. 使用Qt Quick Controls中的Dialog组件来创建一个对话框,用于显示时间设置界面。 4. 在QML文件中,使用JavaScript来处理逻辑。例如,可以使用信号和槽机制来响应按钮的点击事件,将输入的时间保存到变量中等。 5. 在主程序中,加载并显示TimeSettings.qml文件。 以下是一个简单的示例代码: ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 Dialog { id: timeSettingsDialog title: "Time Settings" standardButtons: Dialog.Ok | Dialog.Cancel Column { spacing: 10 TextField { id: timeInput placeholderText: "Enter time" } Button { text: "Save" onClicked: { // Save the time to a variable or perform other actions var time = timeInput.text; console.log("Time saved:", time); timeSettingsDialog.accept(); } } } } ``` 在主程序中,可以使用以下代码加载并显示时间设置界面: ```cpp #include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQmlComponent> int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine; QQmlComponent component(&engine, QUrl(QStringLiteral("qrc:/TimeSettings.qml"))); if (component.status() == QQmlComponent::Error) { qWarning() << component.errorString(); return -1; } QObject *dialog = component.create(); if (dialog) { dialog->setProperty("visible", true); int result = app.exec(); delete dialog; return result; } return -1; } ``` 这样,当主程序运行时,会显示一个对话框,用户可以在其中输入时间并保存。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值