用Qt实现一个桌面弹幕程序(七)-- -- 桌面客户端实现③
来源:互联网 发布:马克威算法学院 编辑:程序博客网 时间:2024/05/22 17:39
为了更好的写好与布局有关的代码,杰洛君这几天花了一点时间去整理代码,来跟着杰洛君写比较复杂的控制台的代码吧~
控制台的布局
根据前几篇文章中看到的布局图,杰洛君知道,这个地方最终一定是一个很大的水平布局。
以水平布局去看的话,这个界面分为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));
而上面这一句写明,进度条是有一个渐变效果的~
最终用一个最大的水平布局把这几个部分水平分布就可以了~
后续
今天也是把界面代码做了个分组,让它们更好维护了~
接下来再把那个隐藏的窗体布局写好就可以完成界面的编写了~
杰洛君该去练练手,画一幅画了~
今天就这样吧~
- 用Qt实现一个桌面弹幕程序(七)-- -- 桌面客户端实现③
- 用Qt实现一个桌面弹幕程序(五)-- -- 桌面客户端实现①
- 用Qt实现一个桌面弹幕程序(六)-- -- 桌面客户端实现②
- 用Qt实现一个桌面弹幕程序(八)-- -- 桌面客户端实现④
- 用Qt实现一个桌面弹幕程序(四)--实现一个弹幕③
- 来用Qt实现一个桌面弹幕程序吧
- 用Qt实现一个桌面弹幕程序(一)--前期准备
- 用Qt实现一个桌面弹幕程序(二)--实现一个弹幕①
- 用Qt实现一个桌面弹幕程序(三)--实现一个弹幕②
- qt实现桌面弹幕
- 用Qt实现一个桌面弹幕程序(九)-- -- 服务端的实现
- 用Qt实现一个桌面弹幕程序(十)-- -- 网页服务端的实现①
- 一个虚拟桌面程序的实现
- 程序实现显示桌面
- Qt 实现桌面雪花飘落
- Qt实现360桌面精灵
- Qt实现桌面截屏
- Qt实现嵌入桌面的半透明窗口
- JLTrackLabelView
- poj 3254Corn Fields(状态压缩dp)
- OpenCL函数-1
- [c++]继承的经典例子
- 不同的2个程序彼此调用
- 用Qt实现一个桌面弹幕程序(七)-- -- 桌面客户端实现③
- Java反射-精简小结
- 关于js和java的一点点不同
- 【bzoj3926】[Zjoi20150]诸神眷顾的幻想乡 后缀自动机+trie
- 关于javascript的类的详解
- java的if else if语句的判断条件不能相同
- TabPageIndicator 分割线
- 1>XxxDlg.obj : error LNK2005: "char * * tabPageData" (?tabPageData@@3PAPADA) 已经在 XxxDlg.obj 中定义
- bootstrap样式使用标准(转)