Qt之實現工具箱界面程序

　　最近終於有點空閑時間了，就寫寫博客，就把上次給客戶實現的一個程序開發過程寫出來；客戶要求的是在主界面上能有幾個很好看的按鈕，單擊各個按鈕能彈出不同的應用窗口，如游戲窗口，顯示圖像窗口等等，同時保持界面也要美觀；最后開發給客戶的效果圖，其中主界面如下圖所示：

　　在主界面上，單擊時鍾按鈕則顯示當前時間，單擊圖片按鈕則顯示圖片瀏覽窗口，單擊音樂按鈕則顯示音樂播放器窗口，單擊游戲按鈕則彈出游戲界面窗口；如單擊圖片按鈕后，彈出的圖片瀏覽窗口如下圖所示：

　　下面我就大概講講其實現方式：

　　一、統一格式和色調
　　不管是程序主界面還是彈出界面，界面的色調應該保持一致，這樣看起來就會舒服些，關於如何統一格式和色調，請查看我的博文<<Qt之統一的UI界面格式基調，漂亮的UI界面>>，里面有詳細介紹，我這里就不多說了。

　　二、設計主界面
　　這個主界面當然在設計器里設計最方便了，設計的主界面如下圖所示：

　　然后再應用統一格式和色調，這樣界面最終就很美觀了，當然按鈕要稍微美化下，我用的樣式如下所示：

QToolButton{border:0px;border-radius:15px;font-weight:bold;color:white;}
QToolButton:hover{
background:qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(100,100,100,200),
stop: 0.5 rgba(0,255,100,200), 
stop:1 rgba(100,100,100,200));
}
QToolButton:focus{
background:qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(150,150,150,150),
stop: 0.5 rgba(50,50,50,255), 
stop:1 rgba(0,0,0,200));
}";

　　最終所形成的界面就是我開始所貼的那種效果圖了。

　　三、創建以及初始化各個子界面
　　在主界面窗口中創建和初始化各個子界面，代碼如下圖所示：

void QMainFrame::init()
{
//時鍾界面
m_pClockFrame = new QClockFrame();
m_pClockBaseWidget = new QBaseWidget(true,m_pClockFrame,false,this);
m_pClockFrame->init();
//圖片界面
m_pImageFrame = new QImageFrame();
m_pImageBaseWidget = new QBaseWidget(true,m_pImageFrame,false,this);
m_pImageFrame->init();
//音樂界面
m_pMusicFrame = new QMusicFrame();
m_pMusicBaseWidget = new QBaseWidget(true,m_pMusicFrame,false,this);
m_pMusicFrame->init();
//游戲界面
m_pGameFrame = new QGameFrame();
m_pGameBaseWidget = new QBaseWidget(true,m_pGameFrame,false,this);
m_pGameFrame->init();
//文本界面
m_pTextFrame = new QTextFrame();
m_pTextBaseWidget = new QBaseWidget(true,m_pTextFrame,false,this);
m_pTextFrame->init();
//關機界面
m_pOPFrame = new QOPFrame();
m_pOPBaseWidget = new QBaseWidget(true,m_pOPFrame,false,this);
m_pOPFrame->init();
}

　　四、設計圖片瀏覽界面
　　同理，在設計器里設計圖片瀏覽界面，一個List控件，一個label控件，如下圖所示：

　　初始化該界面，如下代碼所示：

QBaseWidget *pBaseWidget = (QBaseWidget *)parentWidget();
pBaseWidget->setWidgetTitleInfo(tr("圖片"));
pBaseWidget->setWidgetBtnShow(true,false,true);
pBaseWidget->setWindowFlags(Qt::Window | Qt::FramelessWindowHint);
pBaseWidget->resize(rect().width(),rect().height()+WIDGET_TITLE_H);
pBaseWidget->setFixSizeBool(true);

　　五、結束語
　　由於是客戶程序，所以只能大概講解下，也就只能寫到這里了，希望對大家有所幫助，謝謝；

　　我把二進制文件打包供下載，希望大家提出意見，有什么不對的地方望指教；下載地址為：點擊下載