【1】设置按钮按下的时候镜像背景图片 用于主窗口的样式设计
QPushButton:pressed{
background-image: url(:/button_down.png);
}
【2】设置指定按钮regBt按钮按下时候镜像背景图片 用于主窗口的样式设计
QPushButton:pressed#regBt{
background-image: url(:/button_down.png);
}
【3】 用于主窗口的样式设计 鼠标移动到按钮时 鼠标进入控件设置背景颜色
QPushButton:hover{
background-color:#ff00ff;
}
【4】对某个按钮 整体设置风格
QPushButton{
font-size: 36px;//字体大小(像素)
font-family: "PingFang SC Medium";//字体族
color: #000000;//字体颜色(黑色)
background-color: rgba(255, 255, 255, 0);//背景颜色
}
【5】
QPushButton{border-image: url(:/PIC/button_1_u.png);//按钮边界效果
font-size: 26px;
font-family: "PingFang SC Medium";
color: #0EA1B1;//字体颜色青色
padding-bottom: 6px;//字体在按钮的上下位置的哪里 微调
}
【6】设置按钮字体跳动 方面看出点击了按钮动作
QPushButton:pressed{padding-top:2px;padding-left:2px;}//右下跳动2像素
2.QPushButton
qproperty-icon: url(); //设置图标居左,文字居右
qproperty-iconSize: 20px 20px; //设置图标大小
QPushButton:checked //选中
QPushButton:unchecked //未选中
QPushButton:pressed //按下
QPushButton:hover //悬停
QPushButton{border-image: url(:/PIC/button_1_u.png);//背景镜像
font-size: 26px;//字体大小
font-family: "PingFang SC Medium";//字体族
color: #0EA1B1;//字体颜色
padding-bottom: 6px;}//底部字体移动 值越大字体向上移动 值小向下移动
QPushButton:pressed{padding-top:2px;padding-left:2px;}//按钮按压效果
QPushButton[check=true]:enabled{border-image: url(:/PIC/button_1_d.png);color: rgb(255, 255, 255);}
//设置属性 并且按钮使能触发
QPushButton[check=true]:disabled{border-image: url(:/PIC/button_1_d.png);color: rgb(125, 125, 125);}
//设置属性 并且按钮不使能触发
QPushButton[check=false]:disabled{border-image: url(:/PIC/button_1_u.png);color: rgba(11, 158, 174, 0.36);}
//设置属性 并且按钮不使能触发
QPushButton[check=false]:enabled{border-image: url(:/PIC/button_1_u.png);color: #0EA1B1;}
//设置属性 并且按钮使能触发
QPushButton:pressed{border-image: url(:/PIC/button_3_d.png);}//按压时
QPushButton:checked{border-image:url(:/PIC/button_10_d.png);}//可检查时
QPushButton:disabled{border-image: url(:/PIC/button_3_o.png);}//不使能时背景
// 构造函数
参数:
- icon: 按钮上显示的图标
- text: 按钮上显示的标题
- parent: 按钮的父对象, 可以不指定
【重点:指定父对象,内嵌在父对象内;不指定,单独显示】
QPushButton::QPushButton(const QIcon &icon, const QString &text, QWidget *parent = nullptr);
QPushButton::QPushButton(const QString &text, QWidget *parent = nullptr);
QPushButton(const QString &text, QWidget *parent = nullptr)
参数:text --》按钮的字面信息
parent --》按钮的父窗口
geometry:定位坐标,长宽大小;
geometry --》函数名setGeometry() ;
font --》设置字体
font --》函数名setFont()
ui->pushButton->setFont(QFont("宋体", 15));
//获取按钮上的文本信息
QString content = ui->pushButton->text();
qDebug() << content.toUtf8().data(); // QString 类型转 char* 类型,解决打印中文乱码问题
设置按钮上的文本信息
ui->pushButton->setText("按钮");
重新设定按钮的位置
ui->pushButton->move(100, 50);
重新设定按钮的大小
ui->pushButton->resize(80, 50);//宽高
ui->pushButton->setText("我是一个很长很长很长的文本");
自动调整控件的大小,以适应其内容;
ui->pushButton->adjustSize();
设置控件获取焦点
ui->pushButton->setFocus();
获取控件是否具有焦点;如果控件有焦点,返回 true;
bool b = ui->pushButton->hasFocus();
qDebug() << b;
清除控件的焦点
ui->pushButton->clearFocus();
设置鼠标位于按钮控件区域时,光标的类型
ui->pushButton->setCursor(QCursor(Qt::BusyCursor));
禁用控件
ui->pushButton->setDisabled(true);
//当属性成立时,显示对应的功能
ui->pushButton->setProperty("check",true);
//按钮必须使能,且检查属性为真
QPushButton[check=true]:enabled{border-image: url(:/PIC/button_1_d.png);color: rgb(255, 255, 255);}
//按钮不使能,无法点击,且属性为真
QPushButton[check=true]:disabled{border-image: url(:/PIC/button_1_u.png);color: rgb(255, 0, 0);}
Qss语句入下框中:
QPushButton[check=true]:enabled{border-image: url(:/PIC/button_1_d.png);color: rgb(255, 255, 255);}//【1】
QPushButton[check=true]:disabled{border-image: url(:/PIC/button_1_d.png);color: rgb(125, 125, 125);}//【2】
QPushButton[check=false]:disabled{border-image: url(:/PIC/button_1_u.png);color: rgba(11, 158, 174, 0.36);}//【3】
QPushButton[check=false]:enabled{border-image: url(:/PIC/button_1_u.png);color: #0EA1B1;}//【4】
//代码实现选中背景状态,且按钮可点击,以此类推
ui->PB_setup->setProperty("check",true);//设置属性check 和 true
ui->PB_setup->style()->unpolish(ui->PB_setup);//取消初始化给定的小部件的外观。【qss语句没变哦】
ui->PB_setup->style()->polish(ui->PB_setup);//初始化给定的小部件的外观。
ui->PB_setup->update();//更新
按钮设置使能后才可以点击
ui->pushButton->setEnabled(true);
按钮不使能,无法点击
ui->pushButton->setEnabled(false);
隐藏控件
ui->pushButton->setVisible(false);
显示控件
ui->pushButton->setVisible(true);
设置控件背景透明:即将控件外观设为平铺
ui->pushButton->setFlat(true);
QPushButton *btn = new QPushButton(this); //在当前界面创建按钮
btn->setText("我是非扁平状"); //设置按钮显示文本
btn->setGeometry(150, 100, 100, 50);//设置显示位置
btn->setFlat(true);//设置按钮为扁平状
if (btn->isFlat())//判断是否为扁平状
{
btn->setText("我是扁平状");
}
设置在控件上按下 回车键 时,响应控件的 click 事件
ui->pushButton->setDefault(true);
设置图片路径
QIcon(":/Image/Luffy.png");
设置按钮上显示的图标
ui->pushButton->setIcon(QIcon(":/Image/Luffy.png"));
设置图标的大小
ui->pushButton->setIconSize(QSize(24, 24));
//设置按钮button1的风格
button1.setStyleSheet("
QPushButton{font-family:'宋体';font-size:32px;color:rgb(0,0,0,255);}\
QPushButton{background-color:rgb(170,200,50)}\
QPushButton:hover{background-color:rgb(50, 170, 200)}");
QString style = ui->label->styleSheet();//获取已有风格
//字符串替换,style.indexOf("color:")找到索引位置,向后偏移6个位置,从第7个位置开始,替换为#000000
style.replace(style.indexOf("color:")+6,7,"#000000");
ui->label->setStyleSheet(style);//设置重新显示
按钮有三种状态,鼠标 悬停、按下、默认。
QString a1 = "\
QPushButton#pushButton{\
border-image: url(:/1.png);\
}\
QPushButton#pushButton:hover{\
border-image: url(:/2.png);\
}"\
"QPushButton#pushButton:pressed{\
border-image: url(:/3.png);\
}";
ui->pushButton->setStyleSheet(a1);
设置圆角,边框,字体颜色,字体大小等属性。
QString a2 = "QPushButton {\
border: 2px solid #8f8f91;\
border-radius: 6px;\
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,\
stop: 0 #f6f7fa, stop: 1 #dadbde);\
font-size: 24px;\
font-family: Microsoft YaHei;\
color: #ff0000;\
min-width: 80px;\
}";
ui->pushButton->setStyleSheet(a2);//设置风格
ui->PB_setup->style()->unpolish(ui->PB_setup);//先取消动态风格属性
ui->PB_setup->style()->polish(ui->PB_setup);//重新更新动态风格属性生效
返回控件的x坐标
QPushButton* btn=new QPushButton("按钮",this);
btn->move(15,10);
x=btn->x(); //返回控件的x坐标
y=btn->y(); //返回控件的y坐标
QPoint point; //坐标点 x,y
point=btn->pos(); //返回控件的坐标--QPoint(15,10)
i=point.x();//提取x坐标
i=point.y();//提取y坐标
i=btn->width(); //控件的宽度,不包含任何窗口框架
i=btn->height(); //控件的高度,不包含任何窗口框架
QSize size;
size=btn->size(); //返回控件的宽和高;width和height的组合QSize(100, 30);
i=size.width(); //提取宽度
i=size.height();//提取高度
QRect rect;
rect=btn->geometry(); //相对于父控件的位置和尺寸的组合QRect(15,10 100x30);
i=rect.x(); //提取x坐标
i=rect.y(); //提取y坐标
size=rect.size();//提取大小--宽和高
i=rect.width(); //提取宽
i=rect.height(); //提取高
setFixedSize(500,400); // 设置固定尺寸(宽和高)
QPushButton{
【1】background-color: #2786ba;/* 背景颜色 方式1*/
background-color: rgba(255, 255, 255, 0);/*白色背景 方式2*/
【2】border-radius:5px;/* 按钮边框的圆角设置,值大就圆 */
/* 按钮背景图标设置 */
【3】background-image: url(:/configIcon.png); /* 背景图片 */
【4】background-position: center;/* 背景图片的位置 */
【5】padding-right: 40px; /* 文字向左移动 +*/
padding-right: 1px;/*值小向右,值大向左*/
【6】padding-left: 2px;/* 值大文本右移,值小左移 */
【7】padding-top: 2px;/*值大文字底部下移,值小上移*/
【8】padding-bottom: 2px;/* 值大文字向上移动,值小向下 */
【9】background-repeat: no-repeat; /* 设置背景图像的平铺模式 */
/* 按钮文本设置 */
【10】text-align: top/left/center; /* 对齐:左,低,中,右,上 */
【11】font-size: 12px;/*字体大小*/
【12】color: #FFFFFF; /* 文本颜色 */
【13】font-family: "PingFang SC Medium";/*字体族*/
【14】border-image: url(:/PIC/button_1_u.png);/*背景+边框*/
}
/*边框+背景=蓝色,字体颜色白色,*/
【15】QPushButton[check=true]:enabled
{border-image:url(:/PIC/button_1_d.png);
color: rgb(255, 255, 255);}
ui->pushButton->setProperty("check",true);//这句代码触发【15】
//检查为真,按钮不使能触发,显示边框背景和字体颜色
QPushButton[check=true]:disabled{border-image: url(:/PIC/button_1_u.png);color: rgb(255, 0, 0);}
//检查假,按钮不使能。显示效果
QPushButton[check=false]:disabled{border-image: url(:/PIC/button_1_u.png);color: rgba(11, 158, 174, 0.36);}
//检查假,按钮使能 ,显示效果
QPushButton[check=false]:enabled{border-image: url(:/PIC/button_1_u.png);color: #0EA1B1;}
【16】QPushButton:checked{border-image: url(:/PIC/button_10_d.png);}
//自动选中背景色,触发的条件:
ui->pushButton->setCheckable(true);//可检查使能
ui->pushButton->setChecked(true);//开启检查
//需要人为点击,才选中背景色
ui->pushButton->setCheckable(true);
ui->pushButton->setChecked(false);
//自动选中背景色,并且按钮不可按
ui->pushButton->setCheckable(true);
ui->pushButton->setChecked(true);
ui->pushButton->setEnabled(false);
/*左部+底部=字体右下抖动*/
QPushButton:pressed{padding-top:2px; padding-left:2px;}
/*右部+底部=字体右上抖动*/
QPushButton:pressed{padding-right:4px; padding-bottom:4px;}
/*顶部+右部=字体左下抖动*/
QPushButton:pressed{padding-top:4px;padding-right:4px;}
/*左部+底部=文字右上抖动*/
QPushButton:pressed{padding-left:4px;padding-bottom:4px;}
// 判断按钮是不是默认按钮
bool isDefault() const;
将弹出菜单与此按钮关联起来。这将把按钮变成一个菜单按钮,
在某些样式中会在按钮文本的右边产生一个小三角形。
void QPushButton::setMenu(QMenu *menu);
/*
显示(弹出)相关的弹出菜单。如果没有这样的菜单,这个函数什么也不做。
这个函数直到弹出菜单被用户关闭后才返回。
*/
[slot] void QPushButton::showMenu();
QPushButton *button = qobject_cast<QPushButton *>(sender());
void clicked(bool checked = false)
void pressed()
void released()
void setAutoExclusive(bool) 此属性保存是否启用了自动独占
设置自动独占
可以看到任何时候只有一个高亮。
ui->pushButton->setCheckable(true);
ui->pushButton_2->setCheckable(true);
ui->pushButton_3->setCheckable(true);
ui->pushButton_4->setCheckable(true);
ui->pushButton->setAutoExclusive(true);
ui->pushButton_2->setAutoExclusive(true);
ui->pushButton_3->setAutoExclusive(true);
ui->pushButton_4->setAutoExclusive(true);
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 普通按钮, 没有checked属性
ui->normalBtn->setText("我是小猪佩奇");
ui->normalBtn->setIcon(QIcon(":/Peppa-Pig.png"));
ui->normalBtn->setIconSize(QSize(30, 30));
connect(ui->normalBtn, &QPushButton::clicked, this, [=]()
{
qDebug() << "我是一个普通按钮, 图标是小猪佩奇...";
});
// 有checked属性的按钮
ui->checkedBtn->setCheckable(true);
connect(ui->checkedBtn, &QPushButton::toggled, this, [=](bool bl)
{
qDebug() << "我是一个checked按钮, 当前状态为:" << bl;
});
// 关联菜单
ui->menuBtn->setText("你喜欢哪种人妖?");
QMenu* menu = new QMenu;
QAction* act = menu->addAction("可爱的");
menu->addAction("人的");
menu->addAction("大的");
menu->addAction("翘的");
ui->menuBtn->setMenu(menu);
connect(act, &QAction::triggered, this, [=]{
qDebug() << "我是一个 可爱的 小丑";
});
}
后期会持续更新