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

为了更好的写好与布局有关的代码，杰洛君这几天花了一点时间去整理代码，来跟着杰洛君写比较复杂的控制台的代码吧~

控制台的布局

根据前几篇文章中看到的布局图，杰洛君知道，这个地方最终一定是一个很大的水平布局。

以水平布局去看的话，这个界面分为4个部分。

1.连接服务器按钮+状态栏+二维码按钮

2.一个分隔栏

3.一列可选按钮

4.一列滑动条

接下来就根据这四个部分来写界面吧~

第一部分

连接服务器按钮，自然是用一个QPushButton了，在这个程序中杰洛君把它称为

connectBut

。

代码一如既往得耿直：

connectBut = new QPushButton(this);
connectBut->setText("连接服务器");
connectBut->setFixedSize(200,80);

不过默认的字体不一定好看。

这时就需要添加自己的字体文件了，这里杰洛君使用的是

熊猫的一天.ttf

。

把这个文件添加进资源文件中，起个好听的别名就可以在程序中使用了~

在mainwindow.h添加QFontDatabase的头文件，再在构造函数中加上代码：

int loadedFontID = QFontDatabase::addApplicationFont(":/project/dingding.fon");     //加载字体到字体数据库，字体文件放在资源文件中
QStringList loadedFontFamilies = QFontDatabase::applicationFontFamilies(loadedFontID);      //在字体数据库中找我们的这个字体，找到就调用。
if(!loadedFontFamilies.empty())
myFontStr = loadedFontFamilies.at(0);

其中这里的

myFontStr

是一个QString 类型。不过这个值要保存好，以后需要用新字体的地方都需要用到它。

用法:

connectBut->setFont(QFont(myFontStr,20,1));

状态栏

statusLabel

就是一个QLabel 而已， 利用void setText(const QString &) 函数设置它的内容就可以了。

//服务器按钮下方的状态栏文字，不过这里和那个显示二维码的按钮一起布局了
statusLabel = new QLabel("当前状态:未连接",this);
statusLabel->setFixedWidth(285);
statusLabel->setFont(QFont(myFontStr,20,1));

qrencodeBut = new QPushButton(this);
qrencodeBut->setFixedSize(50,50);
qrencodeBut->setStyleSheet("QPushButton{border-image: url(:/new/erwei3);}"
"QPushButton:hover{border-image: url(:/new/erwei3);}"
"QPushButton:pressed{border-image: url(:/new/erwei3);}");

上面的qrencodeBut 也是一个按钮，不过用样式表设置了三个状态。参考图片：







布局的话是状态栏和二维码按钮在同一个水平布局

qrenLayout

中，然后再一个垂直布局中加入

connnectBut

和

qrenLayout

。

QVBoxLayout * firstlayout = new QVBoxLayout();
firstlayout->addWidget(connectBut);
firstlayout->addLayout(qrenLayout);

第二部分

第二部分更加简单，就是一个QLabel 上面显示一张分隔条的图片~

通过上一篇文章中写的在QLabel 中加载图片的代码，这里很容易得到：

QLabel * fenge = new QLabel(this);
QPixmap f;
f.load(":/project/fenge");        //加了条分隔线
fenge->setPixmap(f);
fenge->setFixedSize(f.size());

小C：居然用拼音。。。

杰洛君：怎么方便怎么来~ (/▽＼=)

第三部分

这里用到一个新的控件QCheckBox 就是勾选框。

用法简单，代码耿直：

showDanmuBut = new QCheckBox("隐藏弹幕",this);
showDanmuBut->setFont(QFont(myFontStr,20,1));

就是这么简单就做好了一个勾选框~要实现三个勾选框垂直分布，就用垂直布局就可以了。这里就略去繁杂的代码啦~

第四部分

这个地方更加规律了，实现的话我们先观察：

弹幕透明度

霸气程度

弹幕速度

这些都是用QLabel 并且上面设置相应的字体。在每一串文字下，都有一个水平布局。每一个小水平布局包括三个控件。

1.一个QLabel

2.一个水平的滑动条

3.再来一个QLabel。

滑动条可以用Qt 中的 QSlider 实现：

transparencySlider = new QSlider(Qt::Horizontal);       //Horizontal参数表明滑动条是水平的
transparencySlider->setRange(0,255);        //设置数值范围
transparencySlider->setFixedWidth(150);     //最长长度
transparencySlider->setValue(255);      //设置现在的数值

既然我们传入了参数H 自然也可以不传入参数看看它是垂直的还是水平的~（噫~又是和H有关，真糟糕(/▽＼=)）

这两个QLabel 分别表示水平滑动条两边各个极端所代表的效果。

最终三组这样的组合用一个垂直布局套起来。

小A：又开始水了，有开始水了。。。

杰洛君：不要这么说嘛。。。（慌张）下面会有重点啦~

进度条的样式美化

原生的进度条好丑呀，能不能把它弄得好看点呢？

这是当然的，如果你不喜欢太复杂的重载重绘控件，不妨也用样式表来美化它~

transparencySlider->setStyleSheet(
"QSlider::groove:horizontal {                                "
"     border: 1px   solid #999999;                           "
"     height: 1px;                                           "
"     margin: 0px 0py;                                       "
"     left: 9px; right: 9px;                                 "
" }                                                          "
"QSlider::handle:horizontal {                                "
"     border: 1px solid #5c5c5c;                             "
" border-image:url(:/project/whiteHandle);                   "
"     width: 20px;                                           "
"     margin: -11px -11px -11px -11px;                       "
" }                                                          "
"QSlider::handle:hover:horizontal{                           "
"     border: 1px solid #5c5c5c;                             "
" border-image:url(:/project/whiteHandle);                   "
"     width: 20px;                                           "
"     margin: -11px -11px -11px -11px;                       "
"}                                                           "
"QSlider::handle:pressed:horizontal{                         "
"     border: 1px solid #5c5c5c;                             "
" border-image:url(:/project/whiteHandle);                   "
"     width: 20px;                                           "
"     margin: -11px -11px -11px -11px;                       "
"}                                                           "
"                                                            "
"QSlider::sub-page:horizontal{                               "
" background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(11, 119, 225, 255), stop:0.65 rgba(11,119, 225, 255), stop:1 rgba(92, 184, 254, 255));                      "
"}                                                           "
"QSlider::add-page:horizontal{                               "
" background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:1, stop:0 rgba(201,201,201, 255));  "
"}"
);

这个地方也是用到了QSS 进行界面的美化。

需要注意的是

QSlider::handle

这个是滚动条上的那个小手柄，这里也可以把它设置为类似按钮的三种状态，这样会比较好看。

background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:1, stop:0 rgba(201,201,201, 255));

而上面这一句写明，进度条是有一个渐变效果的~

最终用一个最大的水平布局把这几个部分水平分布就可以了~

后续

今天也是把界面代码做了个分组，让它们更好维护了~

接下来再把那个隐藏的窗体布局写好就可以完成界面的编写了~

杰洛君该去练练手，画一幅画了~

今天就这样吧~