运用知识点:1、事件循环。2、控件使用。3、qss使用。4、信号槽机制。5、【通信模块(暂无)】。6、自适应布局。
1、首先这两个页面切换,用到的控件StackWidget实现两个类切换
//短信
void Widget::on_Note_3_clicked()
{
if(ui->stackedWidget->currentWidget() != widget_1){
ui->stackedWidget->setCurrentWidget(widget_1);
}
ui->Note_3->setStyleSheet("background: transparent;color:#10bacb;font-size:14px;font-family:Microsoft YaHei;border-width:3px;border-style:none none solid none;border-color:#10bacb;");
ui->Mms_3->setStyleSheet("border:none;color:rgb(258,258,258);");
}
//彩信
void Widget::on_Mms_3_clicked()
{
if(ui->stackedWidget->currentWidget() != widget_2){
ui->stackedWidget->setCurrentWidget(widget_2);
}
ui->Mms_3->setStyleSheet("background: transparent;color:#10bacb;font-size:14px;font-family:Microsoft YaHei;border-width:3px;border-style:none none solid none;border-color:#10bacb;");
ui->Note_3->setStyleSheet("border:none;color:rgb(258,258,258);");
}
根据判断StackWidget等于哪个来显示页面。
这里有在类定义的widget_1和widget_2才可以用到其他的类。
#include "widget.h"
#include "ui_widget.h"
#include <QLayout>
#include <QStackedWidget>
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
widget_1 = new Note(ui->stackedWidget);
widget_2 = new Mms(ui->stackedWidget);
ui->stackedWidget->addWidget(widget_1);
ui->stackedWidget->addWidget(widget_2);
ui->stackedWidget->setCurrentWidget(widget_1);
}
Widget::~Widget()
{
delete ui;
}
//文本超出省略
QString getElidedText(QFont font, QString str, int MaxWidth)
{
if (str.isEmpty())
{
return "";
}
QFontMetrics fontWidth(font);
//计算字符串宽度
int width = fontWidth.width(str);
//当字符串宽度大于最大宽度时进行转换
if (width >= MaxWidth)
{
//右部显示省略号
str = fontWidth.elidedText(str, Qt::ElideRight, MaxWidth);
}
//返回处理后的字符串
return str;
}
//短信
void Widget::on_Note_3_clicked()
{
if(ui->stackedWidget->currentWidget() != widget_1){
ui->stackedWidget->setCurrentWidget(widget_1);
}
ui->Note_3->setStyleSheet("background: transparent;color:#10bacb;font-size:14px;font-family:Microsoft YaHei;border-width:3px;border-style:none none solid none;border-color:#10bacb;");
ui->Mms_3->setStyleSheet("border:none;color:rgb(258,258,258);");
}
//彩信
void Widget::on_Mms_3_clicked()
{
if(ui->stackedWidget->currentWidget() != widget_2){
ui->stackedWidget->setCurrentWidget(widget_2);
}
ui->Mms_3->setStyleSheet("background: transparent;color:#10bacb;font-size:14px;font-family:Microsoft YaHei;border-width:3px;border-style:none none solid none;border-color:#10bacb;");
ui->Note_3->setStyleSheet("border:none;color:rgb(258,258,258);");
}
private:
Note * widget_1;
Mms * widget_2;
Ui::Widget *ui;
这是一块流式布局。用官方的轮子的,需要把官方的代码.h和.cpp拷进来,但是也并非要那么麻烦,还有一个方法是可以简单的实现流式布局的,用listview,改里面的几个属性就可以啦。这边就不展开,有需要的话找我,我有录那个的视频。
细心的读者还发现一个小细节,就是一行的输入过长,会用…省略号显示的。但是鼠标放上去,是会显示完全的,比较人性化的。
上面那个帧的按钮是一个自定义控件的。因为点击哪一页就要跳转到那一页的过去的。还有那个红色的X,删除帧数页用的。
所以我做成一个自定义控件,点击的话会发出一个信号,对应两个槽函数。点击button本身的槽函数是用来切换页面的,点解红色X与之对应的槽函数是用来删除帧数页面的。
这个我用QMap实现的。键值对的形式。通过键(帧)来找到对应的值(页面)。
所以这是比较主要的内容,但是还有一些小细节,就是删除后,你需要重新遍历把帧数名给改掉。
假设你删掉了第三帧。那以前的第四帧就要变成第现在的第三帧了。
选择图片上传路径。
帧的页面是另外写的一个类。所以就是每添加一帧,他会new一个页面出来。
void Mms::on_AddFrame_2_clicked()
{
//弹窗提示标签页最多为5页--阻塞
if(buttons.size() >= 5 )
{
QMessageBox::critical(NULL, "hinit", "The TAB has peaked", QMessageBox::Yes | QMessageBox::No, QMessageBox::Yes);
return;
}
MyButton *bt = new MyButton(QString("第%1帧").arg(numbers[buttons.size()]));//自定义的button控件
buttons.push_back(bt);
bt->setStyleSheet("color: rgb(137,188,237);background-color: rgb(255, 255, 255);border:1px solid #8e8e8e;");
bt->setFixedSize(80,32);// 固定大小
ui->horizontalLayout_11->addWidget(bt);
connect(bt, &MyButton::clicked, this, &Mms::showPage);
connect(bt,&MyButton::close,this,&Mms::closePage);
diy *w = new diy;
ui->groupBox_2->layout()->addWidget(w);
w->hide();
buttonWidgetMap.insert(bt,w);
bt->click();
}
欢迎大家加入Qt交流群~~723516989