目錄

一、新建Qt項(xiàng)目

二、添加組件和布局

三、添加資源

1. 新建資源文件

2. 添加圖標(biāo)資源?

四、frameHead

1. toolBtnGenData

2. toolBtnCounting

3. comboTheme

4. comboAnimation

5. Horizontal Spacer

6. toolBtnQuit

7. 設(shè)置toolBtnQuit的功能?

8. frameHead的屬性?

9. 布局

10. frameHead的層次?

五、frameData

1. groupBoxGrade

2. groupBoxCount

3. frameData布局

4. 設(shè)置treeWidget內(nèi)容

5. 設(shè)置treeWidget屬性

5.5.1 不可以被編輯

5.5.2 寬度、大小設(shè)置?

6. frameData的層次?

7. 布局

六、tabWidget

1. 添加和設(shè)置tab

6.1.1 修改當(dāng)前兩個(gè)tab的屬性

6.1.2 添加新頁(yè)面

6.1.3 tabWidget的層次?

2. tabBar柱狀圖頁(yè)

6.2.1?widgetBar

6.2.2 tabStackedBar層疊柱狀圖頁(yè)

6.2.3 tabPercentBar百分比柱狀圖頁(yè)

6.2.4 tabPieChart餅圖頁(yè)

---

一、新建Qt項(xiàng)目

二、添加組件和布局

添加兩個(gè)frame和一個(gè)tabWidget，兩個(gè)frame分別命名為frameHead和frameData，放置的位置如圖

當(dāng)前的結(jié)構(gòu)如圖?

三、添加資源

1. 新建資源文件

2. 添加圖標(biāo)資源?

?

四、frameHead

1. toolBtnGenData

放一個(gè)tool button，命名為toolBtnGenData，text設(shè)為重新生成數(shù)據(jù)，icon如圖，tooltip為重新生成數(shù)據(jù)并統(tǒng)計(jì)

?

?

2. toolBtnCounting

放一個(gè)tool button，命名為toolBtnCounting，text為重新統(tǒng)計(jì)，tooltip為重新統(tǒng)計(jì)，icon如圖

?

label

圖表主題

3. comboTheme

放一個(gè)combo box，命名為comboTheme

雙擊組件，在彈出的組合框中輸入如下內(nèi)容

label

圖表動(dòng)畫效果

4. comboAnimation

??

放一個(gè)combo box，命名為comboAnimation，內(nèi)容如下?

?

5. Horizontal Spacer

6. toolBtnQuit

放一個(gè)tool button，命名為toolBtnQuit， tooltip為退出，text為退出，圖標(biāo)如下

?

7. 設(shè)置toolBtnQuit的功能?

8. frameHead的屬性?

9. 布局

選擇frameHead，設(shè)置成水平布局，效果如下

?

10. frameHead的層次?

五、frameData

在frameData里面放兩個(gè)group box，上下排列，分別為groupBoxGrade和groupBoxCount

1. groupBoxGrade

在這個(gè)group box里面放一個(gè)tableView，命名為tableView

層次結(jié)構(gòu)為

界面樣子為?

選擇groupBoxGrade，選擇水平布局，變成這樣?

2. groupBoxCount

放一個(gè)treeWidget，命名就叫treeWidget

?

選擇groupBoxCount，設(shè)為柵格布局

3. frameData布局

4. 設(shè)置treeWidget內(nèi)容

雙擊treeWidget

設(shè)置各列屬性為居中?

項(xiàng)目?

5. 設(shè)置treeWidget屬性

5.5.1 不可以被編輯

這是統(tǒng)計(jì)表，不允許編輯里面的數(shù)據(jù)，設(shè)置成不可編輯的

點(diǎn)開editTriggers前面的符號(hào)

?

取消其中的兩個(gè)勾?

editTriggers屬性設(shè)為NnEditTriggers?

5.5.2 寬度、大小設(shè)置?

6. frameData的層次?

7. 布局

選中frameData，設(shè)為垂直布局，變成這樣

六、tabWidget

1. 添加和設(shè)置tab

6.1.1 修改當(dāng)前兩個(gè)tab的屬性

選中tabWidget，修改三個(gè)current屬性

?

換tab_2，修改?

完成后是這樣的?

6.1.2 添加新頁(yè)面

選中treeWidget，點(diǎn)右鍵，選擇在當(dāng)前頁(yè)之后插入頁(yè)

?

設(shè)置

再插入一個(gè)，設(shè)置

插入后，變成這樣

6.1.3 tabWidget的層次?

2. tabBar柱狀圖頁(yè)

6.2.1?widgetBar

在該頁(yè)下放一個(gè)widget，命名為widgetBar

選中tabWidget，選擇水平布局，這時(shí)widgetBar填充滿整個(gè)tabWidget區(qū)域，在上面放組件。?

在wigdetBar上放一個(gè)frame和一個(gè)Graphis View。

frame命名為frameBar，frameShape設(shè)為Panel

在frameBar放兩個(gè)push Button和一個(gè)horizontal Spacer。兩個(gè)push Button分別命名為btnBuildBarChart和btnBuildBarChartH，text為繪制柱狀圖和繪制水平柱狀圖。

將frameBar設(shè)置為水平布局

在graphics View上點(diǎn)右鍵，選提升為?

如圖進(jìn)行設(shè)置?

點(diǎn)擊添加按鈕?

提升完后，將其改名為chartViewBar。

層次結(jié)構(gòu)如圖

點(diǎn)擊tabWidget，將當(dāng)前頁(yè)設(shè)為垂直布局，如圖?

6.2.2 tabStackedBar層疊柱狀圖頁(yè)

將tabBar里面的frameBar和chartViewBar拷貝到tabStackedBar下。點(diǎn)擊tabWidget，設(shè)置垂直布局。修改相應(yīng)名稱

?

顯示如下?

6.2.3 tabPercentBar百分比柱狀圖頁(yè)

照樣拷貝，修改

?

6.2.4 tabPieChart餅圖頁(yè)

將tabBar里面的frameBar和chartViewBar拷貝到tabPieBar下。點(diǎn)擊tabWidget，設(shè)置垂直布局。修改相應(yīng)名稱

刪除framePie上的兩個(gè)按鈕和一個(gè)Spacer

右鍵點(diǎn)擊framePie，選擇打破布局，等所有組件都放了后再布局

在framePie上放一個(gè)label，一個(gè)Combo Box，一個(gè)push Button，一個(gè)label，一個(gè)double spinbox，一個(gè)label，一個(gè)double spinbox，一個(gè)checkbox和一個(gè)horizontal spacer

其中combobox命名為comboCourse，內(nèi)容如下

pushbutton命名為tbnDrawPieChart，text為繪制餅圖

兩個(gè)double spin box分別命名為spinHoleSize和spinPieSize，屬性如下

checkBox命名chkBoxPieLegend，屬性如下?

再放一個(gè)horizontal spacer

放好后層次結(jié)構(gòu)

設(shè)置framPieBar布局為水平布局

顯示如圖