用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

这里杰洛