Qt之實現360安全衛士主界面(一)


      該博文只是模仿360安全衛士的主界面,並不牽涉其中的任何業務功能;重在個人見解以及界面實現;關於360安全衛士的主界面,我想大家都見到過,畢竟基本大部分人都安裝過這個軟件,基於我對其界面的個人見解,對主界面分割為四部分:分別為標題欄、工具欄、內容區域、狀態欄,分割圖例如下圖所示:

      由於標題欄、工具欄、內容區域和狀態欄都不是標准的部件,因此只能子類化部件進行自定義開發;主窗口繼承於QFrame,而標題欄、工具欄、內容區域與狀態欄都繼承於QWidget;最后在主窗口中使用QVBoxLayout布局將其他部件加入到該布局中即可,其中標題欄和工具欄以及狀態欄都是固定高度的,寬度和內容區域是隨窗口縮放而縮放的。
      使用Qt實現主界面的效果如下圖所示(按【Alt+F4】鍵退出主界面):

      大家可以對比一下,如果在該界面中再添加一些內容,就會越來越像了,后續博文會繼續添加內容。
      下面講解具體實現方法,當然方法不只一種,也歡迎各位博友提出自己的看法與實現方式。

1、自定義主窗口

      標題欄屬於操作系統,我們不能控制標題欄;因此要去掉窗口默認的標題欄,我們使用Qt::FramelessWindowHint窗口樣式即可,這樣就沒有了默認的標題欄,這時需增加我們自定義的標題欄部件即可,再依次增加其他部件到布局中;這些都是很基本的,不多闡述,代碼如下:

setWindowFlags(Qt::FramelessWindowHint);
//創建標題欄
m_pTitleBar = new TitleBar(this);
//創建工具欄
m_pToolBar = new ToolBar(this);
//創建內容區域
m_pContentWidget = new ContentWidget(this);
//創建狀態欄
m_pStatuBar = new StatuBar(this);

//創建布局
m_pMainLayout = new QVBoxLayout(this);
//將部件加入到布局中
m_pMainLayout->addWidget(m_pTitleBar);
m_pMainLayout->addWidget(m_pToolBar);
m_pMainLayout->addWidget(m_pContentWidget);
m_pMainLayout->addWidget(m_pStatuBar);
//設置間距與邊緣空白
m_pMainLayout->setSpacing(0);
m_pMainLayout->setContentsMargins(0,0,0,0);

2、主窗口背景以及圓角實現
      主窗口背景使用圖片平鋪實現,當然使用Qt的樣式表是最為簡單方便的了;Qt的樣式表格式和css基本一致;如果對css熟悉的話,對Qt的樣式表(qss)就會很快熟悉起來;

setStyleSheet("QFrame {background-image:url(:/image/frame.jpg);border:1px solid black;}");

      360安全衛士的主界面是圓角的,我們的主界面當然也要實現圓角的了;在主窗口的重繪事件中添加如下代碼即可:

//生成一張位圖
QBitmap objBitmap(size());
//QPainter用於在位圖上繪畫
QPainter painter(&objBitmap);
//填充位圖矩形框(用白色填充)
painter.fillRect(rect(),Qt::white);
painter.setBrush(QColor(0,0,0));
//在位圖上畫圓角矩形(用黑色填充)
painter.drawRoundedRect(this->rect(),10,10);
//使用setmask過濾即可
setMask(objBitmap);

3、主窗口大小

      主窗口縮放到一定值之后便不能縮小,所以應該設置其最小寬度和高度;

setMinimumWidth(850);
setMinimumHeight(600);

      OK,主界面基本看起來有點像樣了,當然這個主界面還不能移動,不能縮放,沒有工具欄等,這些功能在后續的博文中會闡述添加。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM