Qt-网易云音乐界面实现-8 主导航的实现-QtabWidget

简介: 哎呀,堕落了,快有小两周没哟更新了,是在是没有动力了,浏览量连三位数都没有,是在是没有写下去的信心。
 
         

还有就是这个网易云音乐的代码量绝对是不可小视的,完全低估了这个软件的能量。昨天仔细想了一下,写不下去的原因就是我给自己定的目标有点太大了,直接复制一个网易云音乐的界面出来,这么目标有点难度,不放先给自己一个小目标,今天就先把网易音乐的主界面的一级导航写了。

看小效果图

image.png

其实,这里没有太多的东西,我用的就是一个QtabWidget来实现的,下面看下具体的image.png

软件布局

剩下的就是完成这个空间的样式表了

这个样式表有两部分,一部分是在qss中实现,一部分是在代码中实现,之所以这样,是我在qss文件中实现不了部分样式的局部美化,加了筛选器也是不行

看下美化代码

QTabWidget::pane#tabWidget_main { /* The tab widget frame */
     border-top: 2px solid #00C2C7CB;
     position: absolute;
     top: 10px;
   background: #002d2f33;
 }
 QTabWidget#tabWidget_main::tab-bar {
     alignment: center;
 }

上面的部分就是把主界面设置成透明并且把tabbar居中显示了。

ui->tabWidget_main->setStyleSheet("QTabBar::tab {background: #00000000;border: none;border-bottom: 2px solid #3c3e42;min-width: 10px;margin-right: 20px;"
                                      "padding-left:20px;padding-right:20px;padding-top:5px;padding-bottom:5px;color:#686a6e;}"
                                      "QTabBar::tab:hover {background: #3a3a3f;}"
                                      "QTabBar::tab:selected {border-color: #3a3a3f;color:#dcdde4;border-bottom-color: #dcdde4;}");

这部分就是tabbar的样式。

 

还有呢,就是Qtabwidget的文本设置了

ui->tabWidget_main->setTabText(0,"个性推荐");
    ui->tabWidget_main->setTabText(1,"歌单");
    ui->tabWidget_main->setTabText(2,"主播电台");
    ui->tabWidget_main->setTabText(3,"排行榜");
    ui->tabWidget_main->setTabText(4,"歌手");
    ui->tabWidget_main->setTabText(5,"最新音乐");

以上就是今天的内容


目录
相关文章
|
4月前
|
监控 C++ 容器
【qt】MDI多文档界面开发
【qt】MDI多文档界面开发
109 0
|
2月前
|
编译器
【项目开发】QT简单练习之QQ登录界面模仿
为了进一步加深对QT开发的理解,在学习完基础操作之后要进行一个简单的练习。
|
7月前
|
编解码 C++
Qt第一课 第一个ui界面
Qt第一课 第一个ui界面
97 2
|
7月前
|
区块链
【qt】最快的开发界面效率——混合编程3
【qt】最快的开发界面效率——混合编程
110 1
|
7月前
【qt】最快的开发界面效率——混合编程2
【qt】最快的开发界面效率——混合编程
85 1
|
7月前
【qt】设计器实现界面
【qt】设计器实现界面
54 1
|
7月前
|
搜索推荐
【qt】自定义界面类
【qt】自定义界面类
67 0
|
7月前
|
数据可视化 开发工具 C++
Qt Creator 界面
Qt Creator 界面
|
7月前
|
Windows
解决windows下Qt Creator显示界面过大的问题
解决windows下Qt Creator显示界面过大的问题
|
7月前
【qt】最快的开发界面效率——混合编程1
【qt】最快的开发界面效率——混合编程
89 0