Qt/C++打造超酷界面：从圆角窗口到自定义日历控件

Qt/C实现的效果比较好的界面实现圆角窗口窗口阴影部分列表添加widget使用listWidget添加自定义item自定义的日历控件左侧是日历右侧是滚动可选的时间。 列表以报文数据的形式显示界面使用QSS样式表实现界面效果不错。 可代码讲解。 源码 使用Qt5.6.1_MinGW、Qt5.13.1_MinGW、Qt5.15.1_MinGW编译通过其他Qt版本请自行尝试。在Qt开发中实现一个美观且功能丰富的界面是众多开发者的追求。今天就来聊聊如何用Qt/C实现一系列超赞的界面效果包括圆角窗口、窗口阴影、列表添加自定义widget以及自定义日历控件。圆角窗口与窗口阴影实现圆角窗口主要借助于QRegion和setMask函数。先看代码// 设置窗口为圆角 QRegion region(this-rect(), QRegion::Ellipse); this-setMask(region);这里通过创建一个QRegion对象形状为椭圆然后将窗口设置为该形状的遮罩这样窗口就呈现出圆角效果啦。窗口阴影的实现利用QGraphicsDropShadowEffect类代码如下// 创建阴影效果对象 QGraphicsDropShadowEffect *shadow new QGraphicsDropShadowEffect(this); shadow-setBlurRadius(10); shadow-setColor(Qt::gray); shadow-setOffset(3, 3); // 将阴影效果应用到窗口 this-setGraphicsEffect(shadow);QGraphicsDropShadowEffect可以设置阴影的模糊半径setBlurRadius、颜色setColor和偏移量setOffset让窗口阴影更加自然。列表添加widget与自定义item使用listWidget添加自定义item是很常见的需求。先自定义一个继承自QWidget的类作为item的布局假设叫CustomListItemclass CustomListItem : public QWidget { Q_OBJECT public: CustomListItem(QWidget *parent nullptr); }; CustomListItem::CustomListItem(QWidget *parent) : QWidget(parent) { // 这里可以添加自定义布局和控件 QLabel *label new QLabel(Custom Item, this); QHBoxLayout *layout new QHBoxLayout(this); layout-addWidget(label); }然后在主窗口中添加这个自定义item到listWidgetQListWidget *listWidget new QListWidget(this); CustomListItem *itemWidget new CustomListItem(); QListWidgetItem *item new QListWidgetItem(listWidget); item-setSizeHint(itemWidget-sizeHint()); listWidget-addItem(item); listWidget-setItemWidget(item, itemWidget);这段代码先创建了listWidget然后实例化自定义item的widget接着创建QListWidgetItem设置其大小提示为自定义widget的大小提示最后将item添加到listWidget并设置对应的widget。自定义日历控件自定义日历控件左侧是日历右侧是滚动可选的时间。先创建日历部分使用QCalendarWidgetQCalendarWidget *calendar new QCalendarWidget(this);右侧滚动可选时间可以用QScrollArea结合QVBoxLayout来实现假设每个时间项是一个QLabelQScrollArea *scrollArea new QScrollArea(this); QWidget *scrollWidget new QWidget(); QVBoxLayout *scrollLayout new QVBoxLayout(scrollWidget); for (int i 0; i 24; i) { QLabel *timeLabel new QLabel(QString::number(i) :00 - QString::number(i) :59); scrollLayout-addWidget(timeLabel); } scrollWidget-setLayout(scrollLayout); scrollArea-setWidget(scrollWidget);然后将日历和滚动区域布局到一个主布局中QHBoxLayout *mainLayout new QHBoxLayout(this); mainLayout-addWidget(calendar); mainLayout-addWidget(scrollArea); this-setLayout(mainLayout);界面样式与编译界面使用QSS样式表来实现整体风格的统一比如设置窗口背景色、字体颜色等样式表如下QWidget { background-color: #f0f0f0; color: #333; }这样就设置了窗口背景为浅灰色字体颜色为深灰色。Qt/C实现的效果比较好的界面实现圆角窗口窗口阴影部分列表添加widget使用listWidget添加自定义item自定义的日历控件左侧是日历右侧是滚动可选的时间。 列表以报文数据的形式显示界面使用QSS样式表实现界面效果不错。 可代码讲解。 源码 使用Qt5.6.1_MinGW、Qt5.13.1_MinGW、Qt5.15.1_MinGW编译通过其他Qt版本请自行尝试。源码使用Qt5.6.1MinGW、Qt5.13.1MinGW、Qt5.15.1_MinGW编译通过其他Qt版本大家可以自行尝试。不同版本可能会因为API的微小变化需要做一些调整但整体思路还是一致的。通过以上步骤就能实现一个效果不错的Qt界面啦从独特的外观到丰富的功能相信能满足不少项目的界面需求。