【QT入门】 QScrollArea实际运用之导航栏设计

凌~风

已于 2024-03-31 21:45:08 修改

阅读量835

点赞数 34

分类专栏： QT入门文章标签： qt 开发语言 QScrollArea QListWidget 列表模式

于 2024-03-31 21:43:50 首次发布

本文链接：https://blog.csdn.net/LF__plus/article/details/137209721

版权

QT入门专栏收录该内容

49 篇文章 5 订阅

订阅专栏

往期回顾：

【QT入门】 QTabWidget各种常见用法详解-CSDN博客

【QT入门】 QListWidget各种常见用法详解之列表模式-CSDN博客

【QT入门】 QListWidget各种常见用法详解之图标模式-CSDN博客

【QT入门】 QScrollArea实际运用之导航栏设计

我们通过一个实例来讲解QScrollArea的具体方法，并通过纯手写代码实现该实例。

一、QScrollArea

1、简单介绍

QScrollArea是Qt中用于实现滚动区域的小部件类，它提供了一个可滚动的视图区域，用于显示超出可见区域的内容。通过将其他小部件放置在QScrollArea中，可以实现在需要时自动启用滚动条来查看内容。

2、主要特点和用法

滚动内容：	QScrollArea可以容纳其他小部件作为其子部件，并在内容超出显示区域时启用滚动条，允许用户滚动查看内容。
自适应大小：	QScrollArea可以根据其子部件的大小自动调整大小，以确保内容可以正确显示，并在需要时启用滚动条。
设置滚动条策略：	可以通过设置QScrollArea的滚动条策略来指定何时显示滚动条，包括垂直滚动条、水平滚动条或两者都显示。
内边距：	可以设置内边距以控制内容与滚动区域边缘之间的间距。
放大缩小：	QScrollArea还支持放大和缩小内容，以便用户可以调整内容的大小以适应视图区域。

二、最终效果

由于QScrollArea能够提供了一个可滚动的视图区域，用于显示超出可见区域的内容，我们模仿迅雷去做一个界面，左边用QListWidget实现不同tab页面，右边用QScrollArea实现可以进行滚动的效果。

三、思路

1、左边导航栏实现

左边导航栏用的列表模式的QListWidget，这个还是很好做的，样式我们先不说，主要看逻辑。

1.1、设置边框形状

pListWidget->setFrameShape(QFrame::NoFrame);

setFrameShape()方法用于设置pListWidget的边框形状，里面的NoFrame表示无边框。

顺便看一下有哪些参数：

enum Shape {
NoFrame = 0, // no frame
Box = 0x0001, // rectangular box
Panel = 0x0002, // rectangular panel
WinPanel = 0x0003, // rectangular panel (Windows)
HLine = 0x0004, // horizontal line
VLine = 0x0005, // vertical line
StyledPanel = 0x0006 // rectangular panel depending on the GUI style
};

NoFrame：	值为0，表示无边框
Box：	值为0x0001，表示矩形框
Panel：	值为0x0002，表示矩形面板
WinPanel：	值为0x0003，表示矩形面板（Windows风格）
HLine：	值为0x0004，表示水平线
VLine：	值为0x0005，表示垂直线
StyledPanel：	值为0x0006，表示根据GUI风格而定的矩形面板

1.2、设置焦点策略

pListWidget->setFocusPolicy(Qt::NoFocus);

设置了pListWidget的焦点策略为NoFocus，即不接受焦点。这样可以避免在点击pListWidget时出现焦点框，从而让界面看起来更加美观。

没有设置这行代码以前，分别点击QListWidget和QScrollArea，会得到listwidget上不同的样式，这个记住，小细节。

1.3、设置无边框窗口

this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint)

这个应该很熟悉了，要记住，FramelessWindowHint表示无边框窗口，WindowMinMaxButtonsHint表示具有最小化和最大化按钮的窗口。

1.4、添加Item

这次在listWidget里面添加Item的时候，不再是像之前那样一个一个添加，通过一个QStringList对象和addItems方法，一次性添加到listWidget里面去。

1.5添加头文件

#include <string>
using namespace std;

设置样式的时候用到了c++里的string，那么记得，一定要添加头文件和命名空间

1.6类型转换

pListWidget->setStyleSheet(QString::fromStdString(lw_qss));

6、将一个std::string类型的变量lw_qss转换为QString类型，并将其作为样式表应用到pListWidget上。string转QString怎么转的，要熟悉记住。

1.7最终代码

    setFixedSize(150 + 900 + 30, 700);
 this->setStyleSheet("background-color:rgb(26,26,26)");

    pListWidget = new QListWidget(this);
    pListWidget->setFixedWidth(150);
 pListWidget->setFrameShape(QFrame::NoFrame);
 //这行代码解决了listWidget和QScrollArea点击时变换的问题
 pListWidget->setFocusPolicy(Qt::NoFocus);
 this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);


    pStringList << u8"基本设置" << u8"云盘设置" << u8"下载设置" << u8"接管设置" << u8"任务管理" << u8"提醒" << u8"悬浮窗" << u8"高级设置";
    pListWidget->addItems(pStringList);

 string lw_qss = R"(
  QListWidget
  {
   /*border:1px solid gray;   边界线、宽度、颜色*/
   background:rgb(26, 26, 26);   /*表格背景色*/
   color:rgb(200, 200, 200);     /*前景色，文字颜色*/
   font-size:15px;
   border-radius:1px;
  }

  QListWidget::item
  {
   height:40px;
   padding-left:10px; /*控制文本与left左边的距离*/
  }
  
  QListWidget::item:!active
  {
   background:rgb(26, 26, 26);
   margin:5px 20px 1px 20px;   /*上右下左，控制item与ListWidget的距离*/
  }

  QListWidget::item:hover
  {
   background:rgb(56, 56, 56);
   padding-left:30px;
  }

  QListWidget::item:selected
  {
   border-radius:15px;
   background:lightblue;
  }

  /*上次选择后保留的状态，鼠标离开后显示*/
  QListWidget::item:selected:!active
  {
   background:rgb(51,51,51);
   color:#3F85FF;
  })";

 pListWidget->setStyleSheet(QString::fromStdString(lw_qss));

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！