用Qt实现一个桌面弹幕程序(八)-- -- 桌面客户端实现④

呀呀，最近杰洛君又非常得忙了，所以又跳票了一段时间，不过现在回来啦~

让我们继续界面的编写吧~

我们接下来要实现的是下面的设定栏已经屏蔽词汇的界面

这个界面一开始是隐藏起来的，没有显示出来~

继承一个最普通的QWidget类实现HideWidget就好

    //这个时候创建第四个Widget    hideWidget = new HideWidget(this);

这个HideWidget中重载了paintEvent 函数。

void HideWidget::paintEvent(QPaintEvent *){    QPixmap pixmap = QPixmap(":/project/hidebg").scaled(this->size());    QPainter painter(this);    painter.drawPixmap(this->rect(), pixmap);}

和你想象得一样，就是在背景画上背景图片，就是这么简单~

让我们来实现一个自定义样式的输入框吧

这个界面中什么控件是杰洛君之前没有讲过的呢？

没错那就是输入框了~

输入框在Qt 中是使用QLineEdit 实现的。

使用起来的代码也是非常简单呀~

    QLabel * hostLabel = new QLabel("域名:端口",this);    hostLabel->setFont(QFont("Microsoft Yahei",15,1));    //QLineEdit代码    hostEdit = new QLineEdit(this);    hostEdit->setPlaceholderText("请输入域名");

小C：新建对象，诶，下面这个setPlaceholderText 是什么呀？ (～￣▽￣)→))￣▽￣)o

杰洛君：快快按下F1，看看QLineEdit 的帮助文档吧~o（￣▽￣)o

placeholderText : QString
This property holds the line edit’s placeholder text.

Setting this property makes the line edit display a grayed-out placeholder text as long as the line edit is empty.

也就是说，当你的输入框没有任何输入时会把这个字符串以灰色不可编辑的方式显示出来。

在杰洛君这里就是提示用户这里是要输入域名的作用~

当然了，不要指望用户会乖乖地听你的指挥在输入框中输入你要求的输入哦。

比如域名，用户要是输入了ta的生日，三围，舰C账号（噫~我是不是暴露了什么（滑稽）

那程序不就出错不能用了。

所以我们要想些办法规范用户的输入，域名（IP）的话，可以用正则表达式呀~

    QRegExp ipRx("((2[0-4]\\d|25[0-5]|[01]?\\d\\d?)\\.){3}(2[0-4]\\d|25[0-4]|[01]?\\d\\d?)");    QRegExpValidator *pIpValidator = new QRegExpValidator(ipRx,this);    hostEdit->setValidator(pIpValidator);    QLabel * portLabel = new QLabel(":",this);    portLabel->setFont(QFont("Microsoft Yahei",15,1));    portEdit = new QLineEdit(this);    portEdit->setValidator(new QIntValidator(1024, 65535, this));    portEdit->setPlaceholderText("请输入端口号");

这里就用到了正则表达式进行规范用户的输入，使得不规范的输入都会失败~啦啦啦~

其他输入框同样如法炮制就好啦~利用QLabel 显示提示字，用布局把它们布局号就可以啦~

小A： 又开始水了←_←

杰洛君：不不，啊啊，冤枉呀，还有重点！还有重点！

或许，你按照杰洛君的代码写上之后比不能像杰洛君上面所展示的那样，你或许会想到，有时qss起的作用。

是的！在这里样式表的使用时这样的：

hostEdit->setStyleSheet("QLineEdit{font: bold  large \"Times New Roman\";font-size:18px;color:rgb(0,0,0);height:40px;border:4px solid rgb(155,200,33);border-radius:2px;selection-color:pink;background-color: rgb(255,255, 255);}"                            "QLineEdit:hover{ border: 2px groove rgb(26,58,93);color:rgb(0,0,0);  background-color: rgb(255,255, 255); }"                            "QLineEdit:!hover{border: 2px groove rgb(36,37, 39);color:rgb(0,0,0);  background-color: rgb(255,255, 255);}"                            "QLineEdit:focus {border: 2px groove rgb(0,0,255);color:rgb(0,0,255);  background-color: rgb(255,255, 255););}"                            );

哇哇，好大一串，不用慌张，仔细得一个字符一个字符看，我相信你会看懂大部分的。

看不懂的部分可以学一学基础的Css再回来看代码哦，相信你不会后悔学习css，这也会对qss的理解起到事半功倍的作用。(●’◡’●)

让我们来实现一个自定义样式的列表框吧

在这个界面中另外一个没有介绍的空间就是列表框了

在Qt 中 复杂的列表栏会涉及到Model Delegate 的知识，要理解透这些知识是很重要的。

不过，这个系统杰洛君说过很简单。

所以Model Delegate的知识我们就不在这里详述，要详细讲的话，那就完全可以写个新的博文了~

这里，杰洛君用到了最简单的QListWidget

这里杰洛君继承了QListWidget实现了一个BanListWidget类：

#ifndef BANLISTWIDGET_H#define BANLISTWIDGET_H#include <QListWidget>#include <QAction>#include <QMenu>#include <QMessageBox>class BanListWidget:public QListWidget{    Q_OBJECTpublic:    BanListWidget(QWidget * parent=0);protected:    //该控件的右键菜单，这里杰洛君说一句，MainWindow同样可以重载这个函数实现一个右键菜单    void contextMenuEvent(QContextMenuEvent * event);  private slots:    void deleteListItem();  //删除一个列表项    void clearAll();  //清楚全部列表项};#endif // BANLISTWIDGET_H

实现就有些需要说明的了

void BanListWidget::deleteListItem(){    //删除前弹出确认菜单    QMessageBox box;    box.setWindowTitle("警告");    box.setIcon(QMessageBox::Warning);    box.setText("确定要删除此屏蔽词吗？");    box.setStandardButtons(QMessageBox::Yes|QMessageBox::No);    box.setFixedSize(187,123);    if(box.exec()==QMessageBox::Yes){        //如果确认，取出列表中当前选中的列表项        QListWidgetItem * list1=this->currentItem();        //去除这一项        this->takeItem(this->currentRow ());        //释放这一项的内存        if(list1)            delete list1;    }}

这里要注意到我们用的是takeItem函数

QListWidgetItem * QListWidget::takeItem(int row)
Removes and returns the item from the given row in the list widget; otherwise returns 0.

Items removed from a list widget will not be managed by Qt, and will need to be deleted manually.

需要我们手动析构那个列表项，所以加上了delete的代码，不然就内存泄露了。

void BanListWidget::clearAll(){    QMessageBox box;    box.setWindowTitle("警告");    box.setIcon(QMessageBox::Warning);    box.setText("确定要删除全部屏蔽词吗？");    box.setStandardButtons(QMessageBox::Yes|QMessageBox::No);    box.setFixedSize(187,123);    if(box.exec()==QMessageBox::Yes){        //清楚所有列表项        this->clear();    }}

这里你可以看到，只是一个简单的clear()函数，那那些项不用delete吗？

按下F1 ，从帮助文档中我们看到：

void QListWidget::clear()
Removes all items and selections in the view.

Warning: All items will be permanently deleted.

呼，原来会自动删除呀，这下杰洛君就放心了。

好，右键菜单：

void BanListWidget::contextMenuEvent(QContextMenuEvent *){    QCursor cur=this->cursor();    //创建action    QAction * takeItem=new QAction("删除",this);    QAction * clearall=new QAction("删除全部",this);    QMenu * listMenu=new QMenu();    //连接触发事件与相应的槽函数    connect(takeItem,SIGNAL(triggered()),this,SLOT(deleteListItem()));    connect(clearall,SIGNAL(triggered()),this,SLOT(clearAll()));    listMenu->addAction(takeItem);    listMenu->addAction(clearall);    listMenu->exec(cur.pos());    listMenu->deleteLater(); //析构    delete takeItem;  //析构    delete clearall;  //析构}

这个右键菜单好难看呀！

身为界面驱动编程的人，界面难看怎么能忍？( T-T )

上qss！！！：

listMenu->setStyleSheet("QMenu{"                            "padding:5px;"                            "background:white;"                            "border:1px solid gray;"                            "}"                            " QMenu::item{"                            "padding:0px 40px 0px 30px;"                            "height:25px;"                            "}"                            "QMenu::item:selected:enabled{"                            "       background:rgb(90,182,253);"                            "       color:white;"                            "}"                            " QMenu::item:selected:!enabled{"                            "       background:transparent;"                            "}"                            "QMenu::separator{"                            "height:1px;"                            "background:lightgray;"                            "margin:5px 0px 5px 0px;"                            "}");

好了真正到在MainWindow的initUI() 函数中去使用了~

    banlist = new BanListWidget(this);    banlist->setFocusPolicy(Qt::NoFocus);    banlist->setFixedHeight(185);

Ok啦。

小C：这样真的好吗？右键菜单和这个列表一点都不配呀，列表丑成狗！

杰洛君：。。。。。上Qss咯 （挖鼻）

banlist->setStyleSheet("QToolTip {border: 2px solid rgb(43,43,45);color:white;background-color: rgb(27,27,28);padding: 5px; border-radius: 3px;opacity: 200;}"                           "QListWidget{border: 4px groove rgb(43,43,43); border-radius:4px;font: 75 15pt ;color: rgb(0, 0, 0);background-color: rgb(255, 255, 255,255);}"                           "QListWidget::item{font: 75 20pt ;color: rgb(7, 7, 7);background-color: rgb(255, 255, 255,255);}"                           "QListWidget::item:selected{font: 75 20pt ;color: rgb(255, 255, 255);background-color: rgb(11,119,225);}"                           "QListWidget::item:hover:!selected {font: 75 20pt;color:rgb(255,255,255);background-color:rgb(90,182,253);}"                           "QListWidget::item:hover:selected {font: 75 20pt;color:rgb(255, 255, 255);background-color:rgb(90,182,253);}"                           "QListWidget::scrollbar {background-color:rgb(27,27,28);}" );

此处设置了 tooltip 的样式，嗯嗯，就是悬停在控件上时会弹出的提示框。

小C： 能不能更给力一点呀。我发现侧边滚动栏不好看呀！

杰洛君：继续Qss （暴走了）

//列表的滑条样式美化样式表    banlist->verticalScrollBar()->setStyleSheet("QScrollBar:vertical {"                                                "background: transparent;"                                                "width:  10px;"                                                "margin: 22px 0px 22px 0px;"                                                "}"                                                " QScrollBar::handle:vertical {"                                                " border: 0px solid #3d7bad;"                                                "background-color:rgb(27,27,28);"                                                "border-radius: 3px;"                                                "min-height: 5px;"                                                "margin: 0px -1px 0 -0.5px;"                                                "}"                                                "QScrollBar::handle:hover{"                                                "background: rgb(47, 47, 47);"                                                "min-height: 20px;"                                                "margin: 0px -1px 0px -0.5px;"                                                "border-radius: 3px;"                                                "border: none;"                                                "}"                                                "QScrollBar::handle:pressed{"                                                "background-color:rgb(47,47,47);"                                                "}"                                                "QScrollBar::add-line:vertical {"                                                "subcontrol-origin: margin;"                                                " border: 0px solid green;"                                                " height: 20px;"                                                "subcontrol-position: bottom;"                                                "  subcontrol-origin: margin;"                                                "}"                                                " QScrollBar::sub-line:vertical {"                                                "subcontrol-origin: margin;"                                                " border: 0px solid red;"                                                " height: 20px;"                                                "subcontrol-position: top;"                                                "  subcontrol-origin: margin;"                                                "}"                                                "QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {"                                                "background: none;"                                                "};");

就是这样，这样你就完成了一个好看的列表了~

如何添加列表项呢？

这里杰洛君给个关键代码~相信机智的你很快就能看懂~

//banlist 为上文中的QListWidget / BanListWidgetQListWidgetItem * item =new QListWidgetItem("啦啦啦",banlist);item->setData(Qt::UserRole,"啦啦啦");item->setToolTip("啦啦啦");banlist->insertItem(Qt::UserRole, item);

后续

今天也是写了好多关于界面的内容呢，是不是感觉到Qt真心强大？

大概，以后会有更加有趣的内容哦，大概吧。。。哈哈

今天就到这里吧~

题外话：

我才不会告诉你最近没更博文是因为去画妹子了呢