QT 简单仿写QQ界面

因为要写一个跨平台内网传输工具DKD，为了最大程度的代码复用，所以考虑使用QT，对QT不熟悉，10天的摸索，终于画出简易的仿QQ界面，开发环境为：qt creator+gcc,效果如下：

主窗口的区域切割为三部分：

主窗口类派生于QFrame，关键代码如下：

    //without system titlebarsetWindowFlags(Qt::FramelessWindowHint);setWindowFlags(Qt::WindowStaysOnTopHint);//place windowQRect deskRect = QApplication::desktop()->availableGeometry();this->move(deskRect.right()-280,30);//new subclass widgetsm_titlebar = new TitleBar(this);m_centerWgt = new CenterWidget(this);m_bottomWgt = new BottomWidget(this);m_skinmgr = new SkinMgr(this);m_hostinfwnd = new HostInfWnd(this);//layoutQVBoxLayout * pMainLayout = new QVBoxLayout(this);pMainLayout->addWidget(m_titlebar,0,Qt::AlignTop);pMainLayout->addWidget(m_centerWgt);pMainLayout->addWidget(m_bottomWgt,0,Qt::AlignBottom);pMainLayout->setSpacing(0);pMainLayout->setContentsMargins(0,0,0,0);setLayout(pMainLayout);//qssOnSkinChange(m_strMainSkin);//signal handlerconnect(m_titlebar,SIGNAL(evtClose()),this,SLOT(CloseEvtHandler()));connect(m_titlebar,SIGNAL(evtMinWnd()),this,SLOT(showMinimized()));connect(m_titlebar,SIGNAL(evtSkinMgr()),this,SLOT(SkinMgrHandler()));connect(m_skinmgr,SIGNAL(SigSkinChange(const QString &)),this,SLOT(OnSkinChange(const QString&)));connect(m_titlebar,SIGNAL(evtShowHostInf()),this,SLOT(OnShowHostInf()));

先不管细节，来看看标题栏的实现。

网上资料很多，qss可以轻松实现界面需要，窗口拖动，换肤方面网上都有代码，不多说，至于图片资源，我是用MultiExtractor从腾讯的PE文件里提取的，非商业用途，用下也没问题。

再说，底栏，底栏同标题栏一样简单，QQ的半透明效果是用一张比较透明的Png图片打底mask出来的，我也随便找了一张，实现了类似效果，也是QSS实现。但是在windows下会出现焦点按钮被虚线框住的情况，暂时我没管他。

主区域中的搜索框是一个子类化的QLineEeEdit实现的，我还没搞好他。

"tab"是用PUSHBUTTON实现的，有图片就简单，不多说。

剩下的列表控件原生QLISTWIDGET，通过方法setItemWidget实现，虽然方法笨，但是满足了需求。需要注意的细节有：item的Hover,pressed的背景设置，item的高度设置，和滚动条，滚动条我没深究，只是简单的设置了背景色，效果差强人意：

关于QLISTWDIGET的QSS如下：

{QString myss = QString("QListWidget::item:selected {background-color:rgb(252,235,171);}""QListWidget::item:hover:!selected {background-color:rgb(252,240,193);}""QListWidget::scrollbar {background-color:rgb(252,235,171);}");m_richlist->setStyleSheet(myss);m_richlist->verticalScrollBar()->setStyleSheet("QScrollBar:vertical {border: 2px solid grey;background:rgb(109,111,111)}");m_richlist->setMouseTracking(true);m_richlist->setAutoScroll(true);for(int i=0;i<100;++i){UsersListItem * myitem = new UsersListItem(m_richlist); QListWidgetItem * Item = new QListWidgetItem();m_richlist->addItem(Item);Item->setSizeHint(myitem->sizeHint());m_richlist->setItemWidget(Item,myitem);}}

UserListItem定义：

class UsersListItem : public QWidget
{Q_OBJECT
public:explicit UsersListItem(QWidget *parent = 0);virtual QSize   sizeHint() const{return QSize(100,48);}
private:QLabel * m_labAddress;QLabel * m_labHeaderPic;QLabel * m_labUser;signals:public slots:};

QT新手，不多说话。下一步写功能实现的历程

QT 简单仿写QQ界面相关推荐

WPF系列教程——(一)仿TIM QQ界面 - 简书
WPF系列教程--(一)仿TIM QQ界面 - 简书原文: WPF系列教程--(一)仿TIM QQ界面 - 简书 TIM QQ 我们先来看一下TIM QQ长什么样,整体可以将界面分为三个部分 TIM ...
【Qt】仿360安全卫士界面(自定义阴影边框类)
00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 自定义阴影边框类设计与实现 04. 测试代码 05. 示例下载 06. 附录 01. 概述 Qt默认的QDialog和QW ...
Flutter | 超简单仿微信QQ侧滑菜单组件（改）
文章目录一.明确需求二.实现需求 1. 滑动菜单实现使用`SingleChildScrollView`: 2. 列表滑动不够距离则菜单再次隐藏,距离足够则完全展示菜单. 3. 菜单支持事件处理. ...
Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例
vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例. 运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊 ...
【仿写酷界面】【HenCoder】仿小米运动的运动记录界面
MISportsConnectWidget 项目地址:sickworm/MISportsConnectWidget 简介:[仿写酷界面][HenCoder]仿小米运动的运动记录界面更多:作者 ...
Vue3 PC桌面端聊天室｜vue3.0+elementPlus仿微信/QQ界面
vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例. 运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊 ...
仿写 QQ 和微信联系人列表：
QQ聊天联系人界面效果仿写: 1,先上效果图 ,因为未找到比较好用的 gif录制工具 .所以上的都是静态图片: 2,代码: 主界面: 两个 Fragment交互: class MainActivit ...
QT开发--仿写一个智能家居APP
一.给工程添加图片二.引用添加的图片在界面设置界面点击按钮或者文本控件,右键改变样式表,然后再添加资源选择border-image,然后就可以找到图片进行编译控制. 三.qt布局水平布局,垂直布 ...
模拟jQuery，简单仿写API
jQuery是一个高效.精简并且功能丰富的 JavaScript 工具库.它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作.事件处理.动画和 Ajax 操作更加简单.最近 ...

QT 简单仿写QQ界面

QT 简单仿写QQ界面相关推荐

最新文章

热门文章