QListWidget和QTableWidget的使用和属性，QTableWidget和QListWidget样式表的设置，滚动条的样式设置

QListWidget和QTableWidget的使用和属性，QTableWidget和QListWidget样式表的设置，滚动条的样式设置

一、QListWidget的使用

[cpp]  view plain  copy

1. //一、QListWidget  
2.   
3. list_widget = new QListWidget();  
4.   
5. //list_widget->resize(200,300);  
6. list_widget->setFixedWidth(300);  
7.   
8.   
9. //设置item图标大小  
10. list_widget->setIconSize(QSize(50,30));  
11.   
12. QListWidgetItem *add_item = new QListWidgetItem(list_widget);  
13. add_item->setIcon(QIcon(":/res/pix/add.png"));  
14. add_item->setText(tr("Add"));  
15. //设置item项中的文字位置  
16. //add_item->setTextAlignment(Qt::AlignHCenter);  
17. //add_item->setFlags(Qt::ItemIsSelectable | Qt::ItemIsEnabled);  
18.   
19.   
20. //设置viewModel，来确定使用不同的视图进行显示  
21. //使ListWidgetItem中的图标在上，文字在下  
22. //list_widget->setViewMode(QListView::IconMode);  
23. //list_widget->setViewMode(QListWidget::IconMode);  //这样的形式也可以  
24. //list_widget->setViewMode(QListView::ListMode);  
25.   
26.   
27. //改变item大小，使用QListWidgetItem::setSizeHint()  
28. //add_item->setSizeHint(QSize(60,60));  
29.   
30.   
31. //设置ListWidget可以选择多个item  
32. list_widget->setSelectionMode(QAbstractItemView::ExtendedSelection);  
33.   
34.   
35. //有两种方法在ListWidget中添加item  
36. //一种在构造item的时候，指定其父Widget  
37. QListWidgetItem *cubby_item = new QListWidgetItem(QIcon(":/res/pix/cubby.png"),  
38.                                                   tr("Cubby"),list_widget);  
39. //第二种方法是在构造完item后，使用QListWidget::additem()来添加item  
40. QListWidgetItem *dropbox_item = new QListWidgetItem();  
41. dropbox_item->setIcon(QIcon(":/res/pix/dropbox.png"));  
42. dropbox_item->setText(tr("Dropbox"));  
43. list_widget->addItem(dropbox_item);  
44.   
45.   
46. //向QListWidget中指定的位置插入itemm，使用QListWidget::addItem()  
47. QListWidgetItem *google_item = new QListWidgetItem(QIcon(":/res/pix/google.png"),  
48.                                                      tr("Google"));  
49. list_widget->insertItem(1,google_item);  
50.   
51.   
52. //使用QListWidget::takeItem(int index)来删除表中的某一项  
53. //list_widget->takeItem(0);  
54.   
55. //删除item，必须要加上delete item，否则删不掉  
56. //list_widget->removeItemWidget(add_item);  
57. //delete add_item;  
58.   
59.   
60. //打开和关闭item是否可以编辑,默认不可编辑  
61. //使用QListWidget::openPersistenEditor(QListWidgetItem*)和  
62. //QListWidget::closePersistentEditor(QListWidgetItem*)  
63. //list_widget->openPersistentEditor(cubby_item);  
64.   
65.   
66. //设置当前的item是第几行  
67. //初始化ListWidget显示时，指向哪一行  
68. list_widget->setCurrentRow(1);  
69.   
70.   
71. //设置ListWidget是否可以自动排序,默认是false  
72. //list_widget->setSortingEnabled(true);  
73.   
74.   
75. //设置QLisView大小改变时，图标的调整模式，默认是固定的，可以改成自动调整  
76. //list_widget->setResizeMode(QListView::Adjust);  
77. //设置列表可以拖动，如果想固定不能拖动，使用QListView::Static  
78. //拖动item，进行复制  
79. list_widget->setMovement(QListWidget::Free);  
80.   
81.   
82. QListWidgetItem *computer_item = new QListWidgetItem();  
83. QString str(tr("Computer"));  
84. computer_item->setData(Qt::DisplayRole,str);  
85. computer_item->setIcon(QIcon(":/res/pix/computer.png"));  
86. list_widget->addItem(computer_item);  
87.   
88.   
89. QPushButton *button = new QPushButton(tr("Button"));  
90. QListWidgetItem *button_item = new QListWidgetItem();  
91. list_widget->addItem(button_item);  
92. //实现替换，自定义item  
93. list_widget->setItemWidget(button_item,button);  
94.   
95. //使用QListWidget::count()来统计ListWidget中总共的item数目  
96. int item_count = list_widget->count();  
97. qDebug()<<item_count;  
98.   
99.   
100. //设置样式，直接在函数中设置  
101. list_widget->setStyleSheet("QListWidget{border:1px solid gray; color:black; }"  
102.                            "QListWidget::Item{padding-top:20px; padding-bottom:4px; }"  
103.                            "QListWidget::Item:hover{background:skyblue; }"  
104.                            "QListWidget::item:selected{background:lightgray; color:red; }"  
105.                            "QListWidget::item:selected:!active{border-width:0px; background:lightgreen; }"  
106.                            );  

二、QTableWidget的使用

[cpp]  view plain  copy

1. //二、QTableWidget  
2. table_widget = new QTableWidget(15,5);  
3.   
4. QStringList header;  
5. header<<"Name"<<"Date"<<"Description"<<"Size"<<"Other";  
6.   
7. QStringList vertical_header;  
8. vertical_header<<"One"<<"Two"<<"Three"<<"Four"<<"Five"<<"Six";  
9.   
10. //设置表头标签  
11. table_widget->setHorizontalHeaderLabels(header);  
12. table_widget->setVerticalHeaderLabels(vertical_header);  
13.   
14. table_widget->setItem(0,0,new QTableWidgetItem("Jan"));  
15. table_widget->setItem(1,0,new QTableWidgetItem("Feb"));  
16. table_widget->setItem(2,0,new QTableWidgetItem("Mar"));  
17.   
18. table_widget->setItem(0,1,new QTableWidgetItem(QIcon(":/res/pix/refresh.png"),"Refresh"));  
19.   
20. //一、对QtableWidget本身的效果实现  
21. //1、将表格设置为禁止编辑  
22. table_widget->setEditTriggers(QAbstractItemView::NoEditTriggers);  
23.   
24. //2、将表格设置为整行选择  
25. table_widget->setSelectionBehavior(QAbstractItemView::SelectRows);  
26.   
27. //3、单个选中和多个选中设置  
28. //设置为可以选中多个目标  
29. //主要功能是：在正常情况下是单选，但按下Ctrl或Shift键后，可以多选  
30. table_widget->setSelectionMode(QAbstractItemView::ExtendedSelection);  
31.   
32. //4、表头的显示与隐藏  
33. table_widget->verticalHeader()->setVisible(false);  //隐藏列表头  
34. //table_widget->horizontalHeader()->setVisible(false);    //隐藏行表头  
35.   
36. //5、对表头文字的字体、颜色进行设置  
37. //获得水平方向表头的item对象  
38. QTableWidgetItem *columnHeaderItem = table_widget->horizontalHeaderItem(1);  
39. columnHeaderItem->setFont(QFont("Helvetica"));  //设置字体  
40. columnHeaderItem->setBackgroundColor(QColor(0,60,10));  //设置单元格背景颜色  
41. columnHeaderItem->setTextColor(QColor(200,111,30));     //设置文字颜色  
42.   
43. //6、在单元格里加入控件  
44. //把一个下拉框加入单元格  
45. QComboBox *comBo = new QComboBox();  
46. comBo->addItem("Y");  
47. comBo->addItem("N");  
48. table_widget->setCellWidget(0,2,comBo);  
49.   
50. //二、对单元格进行设置  
51. //1、单元格设置字体颜色、背景颜色、字体字符  
52. QTableWidgetItem *item = new QTableWidgetItem("Apple");  
53. item->setBackgroundColor(QColor(0,60,10));  
54. item->setTextColor(QColor(200,111,100));  
55. item->setFont(QFont("Helvetica"));  
56. table_widget->setItem(0,3,item);  
57.   
58. //对所有单元格设置字体  
59. //table_widget->setFont(QFont("Courier"));  
60.   
61. //2、设置单元格内文字对齐方式  
62. item->setTextAlignment(Qt::AlignHCenter | Qt::AlignVCenter);  
63.   
64. //3、合并单元格  
65. //参数为：合并的起始行列数(0,0),合并的行数(3行),合并的列数(1列)  
66. table_widget->setSpan(0,0,3,1);  
67.   
68. //4、设置单元格大小  
69. //可以指定单个行或者列的大小  
70. table_widget->setColumnWidth(3,200);  
71. table_widget->setRowHeight(3,60);  
72. //将行和列的大小设为与内容相匹配  
73. //table_widget->resizeColumnsToContents();  
74. //table_widget->resizeRowsToContents();  
75.   
76. //设置交替行颜色选项(默认是false)  
77. //对应于alternate-background-color:blue;   /*蓝色*/  
78. //否则无法交替显示颜色  
79. //table_widget->setAlternatingRowColors(true);  
80.   
81. //将header最后的空间补全，仅仅是通过延伸最后一个单元格实现的，而没有单元格平分  
82. table_widget->horizontalHeader()->setStretchLastSection(true);  
83.   
84. //单元格延伸后，实现单元格平分  
85. table_widget->horizontalHeader()->setResizeMode(QHeaderView::Stretch);  
86.   
87.   
88. //三、表头设置  
89. //1、设置表头不可点击(默认点击后进行排序)  
90. table_widget->horizontalHeader()->setClickable(false);  
91. table_widget->verticalHeader()->setClickable(false);  
92.   
93. //2、设置表头字体加粗  
94. QFont font;  
95. font.setBold(true);  
96. table_widget->horizontalHeader()->setFont(font);  
97. table_widget->verticalHeader()->setFont(font);  
98.   
99. //设置行高，与表头高度无关  
100. //table_widget->verticalHeader()->setDefaultSectionSize(50);  
101. //设置宽度  
102. //table_widget->horizontalHeader()->setDefaultSectionSize(30);  
103.   
104. //设置表头文字显示格式  
105. table_widget->horizontalHeader()->setDefaultAlignment(Qt::AlignHCenter | Qt::AlignVCenter);  
106.   
107. //设置无边框  
108. //table_widget->setFrameShape(QFrame::NoFrame);  
109.   
110. //设置不显示格子线  
111. //table_widget->setShowGrid(false);  
112.   
113. //设置表头第一列的宽度为150  
114. //table_widget->horizontalHeader()->resizeSection(0,150);  
115.   
116. //设置表头高度  
117. //table_widget->horizontalHeader()->setFixedHeight(150);  
118.   
119. //设置表格样式  
120. table_widget->setStyleSheet(  
121.             "color:green;"  
122.             /*"gridline-color:red;"*/   /*表格中的网格线条颜色*/  
123.             "background:white;"  
124.             /*"alternate-"*/  /*设置交替颜色*/  
125.             "selection-color:red;"  
126.             "selection-"  
127.             "border:1px solid gray;"  
128.             );  
129.   
130. //设置表头样式  
131. table_widget->horizontalHeader()->setStyleSheet("");  
132. #if 0  
133. //样式二  
134. table_widget->horizontalHeader()->setStyleSheet(  
135.             "QHeaderView::section{background:skyblue; padding-left:4px; border:3px solid red; }"  
136.             "QHeaderView::section:checked{ }"  
137.             );  
138. #endif  
139.   
140. #if 1  
141. //设置垂直滚动条样式  
142. table_widget->verticalHeader()->setStyleSheet(  
143.             "QScrollBar{background:transparent; height:10px; }"  
144.             "QScrollBar::handle{background:lightgray; border:2px solid transparent; border-radius:5px; }"  
145.             "QScrollBar::handle:hover{background:gray; }"  
146.             "QScrollBar::handle:pressed{background:black;}"  
147.             "QScrollBar::sub-line{background:transparent;}"  
148.             "QScrollBar::add-line{background:transparent;}"  
149.             );  
150. #endif  
151.   
152.   
153. //清除所有可见数据(包括表头)，行还在  
154. //tableWidget->clear();  
155. //只清除表中数据，不清除表头内容  
156. //tableWidget->clearContents();  
157. //连行也清除  
158. //tableWidget->setRowCount(0);  
159. //tableWidget->setColumnCount(0);  
160.   
161.   
162. //获取表格中当前总行数  
163. int row = table_widget->rowCount();  
164. qDebug()<<row;  
165. //添加一行  
166. //tableWidget->setRowCount(row+1);  
167. //清除已有的行列  
168. //tableWidget->removeRow(row);  
169.   
170. //去掉水平滚动条  
171. //tableWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);  
172. //垂直滚动条按项移动  
173. //tableWidget->setVerticalScrollMode(QAbstractItemView::ScrollPerItem);  
174. //去掉自动滚动条  
175. //tableWidget->setAutoScroll(false);  

三、可以使用.qss设置样式表

[cpp]  view plain  copy

1. //设置样式，优化界面  
2. QFile file(":/my.qss");    
3. file.open(QFile::ReadOnly);  
4. QString style = tr(file.readAll());  
5. this->setStyleSheet(style);  
6.   
7.   
8. //设置ListWidget滚动条样式  
9. list_widget->verticalScrollBar()->setCursor(Qt::PointingHandCursor);  
10.   
11. QFile scroll_file(":/scroll.qss");      
12. scroll_file.open(QFile::ReadOnly);  
13. QString scroll_style = tr(scroll_file.readAll());  
14. list_widget->verticalScrollBar()->setStyleSheet(scroll_file.readAll());  
15. //list_widget->verticalScrollBar()->setStyleSheet(scroll_style);  
16.   
17.   
18. //设置TableWidget滚动条样式  
19. table_widget->verticalScrollBar()->setCursor(Qt::PointingHandCursor);  
20. //table_widget->verticalScrollBar()->setStyleSheet(scroll_file.readAll());  
21. table_widget->verticalScrollBar()->setStyleSheet(scroll_style);  
22.   
23.   
24. qss文件格式设置样式表   
25. 1、QListWidget和QTableWidget样式设置my.qss  
26.   
27. //my.qss  
28. QListWidget  
29. {  
30.     border:1px solid gray;   /*边界线:宽度、颜色*/  
31.     /*background:gray;*/    /*表格背景色*/  
32.     color:black;        /*前景色：文字颜色*/  
33.     /*margin:5px,5px,0px,50px;*/   /*上、下、左、右，间距*/  
34. }  
35.   
36. /* 
37. QListWidget::item 
38. { 
39.     padding-top:24px; 
40.     padding-bottom:4px; 
41. } 
42. */  
43.   
44. QListWidget::item:hover  
45. {  
46.     show-decoration-selected:5;  
47.     background:skyblue;  
48. }  
49.   
50. QListWidget::item:selected  
51. {  
52.     /*border:0px;*/  
53.     background:lightgray;  
54.     padding:0px;  
55.     margin:0px;  
56.     color:red;  
57. }  
58.   
59. /*上次选择后保留的状态，鼠标离开后显示*/  
60. QListWidget::item:selected:!active  
61. {  
62.     border-width:0px;  
63.     background:lightgreen;  
64. }  
65.   
66.   
67. /*QTableWidget*/  
68. QTableWidget  
69. {  
70.     color:green;    /*前景色：文字颜色*/  
71.     /*gridline-color:red;   */     /*表格中的网格线条颜色*/  
72.     background:white;  
73.     /*设置交替颜色，需要在函数属性中设置:tableWidget->setAlternatingRowColors(true)*/  
74.     /*alternate-background-color:red;   */  
75.     selection-color:red;    /*鼠标选中时前景色：文字颜色*/  
76.     selection-background-color:lightgray;   /*鼠标选中时背景色*/  
77.     border:1px solid gray;  /*边框线的宽度、颜色*/  
78.     /*border:none;*/    /*去除边界线*/  
79.     /*border-radius:5px;*/  
80.     /*padding:10px 10px;*/  /*表格与边框的间距*/  
81. }  
82.   
83. /*设置表头属性*/  
84. QTableWidget QHeaderView::section  
85. {  
86.     background-color:#F0F0F0;  /*lightgray*/  
87.     /*color:black;*/  
88.     /*padding-left:4px;*/  
89.     /*border:3px solid red;*/   /*表头边框线的宽度、颜色*/  
90.     /*border:1px solid gray;*/  
91. }  
92.   
93.   
94. 2、滚动条样式设置scroll.qss  
95.   
96. //scroll.qss  
97. /*垂直滚动条整体*/  
98. QScrollBar:vertical  
99. {  
100.     width:8px;  
101.     background:rgb(0,0,0,0%);  
102.     margin:0px,0px,0px,0px;  
103.     padding-top:12px;   /*上预留位置*/  
104.     padding-bottom:12px;    /*下预留位置*/  
105. }  
106.   
107. /*滚动条中滑块的样式*/  
108. QScrollBar::handle:vertical  
109. {  
110.     width:8px;  
111.     background:rgb(0,0,0,25%);  
112.     border-radius:4px;  
113.     min-height:20px;  
114. }  
115.   
116. /*鼠标触及滑块样式*/  
117. QScrollBar::handle:vertical:hover  
118. {  
119.     width:9px;  
120.     background:rgb(0,0,0,50%);  
121.     border-radius:4px;  
122.     min-height:20;  
123. }  
124.   
125. /*设置下箭头*/  
126. QScrollBar::add-line:vertical  
127. {  
128.     height:12px;  
129.     width:10px;  
130.     border-image:url(:/selectfile/scroll/3.png);  
131.     subcontrol-position:bottom;  
132. }  
133.   
134. /*设置上箭头*/  
135. QScrollBar::sub-line:vertical  
136. {  
137.     height:12px;  
138.     width:10px;  
139.     border-image:url(:/selectfile/scroll/1.png);  
140.     subcontrol-position:top;  
141. }  
142.   
143. /*设置下箭头:悬浮状态*/  
144. QScrollBar::add-line:vertical:hover  
145. {  
146.     height:12px;  
147.     width:10px;  
148.     border-image:url(:/selectfile/scroll/4.png);  
149.     subcontrol-position:bottom;  
150. }  
151.   
152. /*设置上箭头：悬浮状态*/  
153. QScrollBar::sub-line:vertical:hover  
154. {  
155.     height:12px;  
156.     width:10px;  
157.     border-image:url(:/selectfile/scroll/2.png);  
158.     subcontrol-position:top;  
159. }  
160.   
161. /*当滚动条滚动的时候，上面的部分和下面的部分*/  
162. QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical  
163. {  
164.     background:rgb(0,0,0,10%);  
165.     border-radius:4px;  
166. }