QListWidget和QTableWidget的使用和属性，QTableWidget和QListWidget样式表的设置，滚动条的样式设置
一、QListWidget的使用
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. "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. "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的使用
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设置样式表
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. /*边界线:宽度、颜色*/
31. /*background:gray;*/ /*表格背景色*/
32. /*前景色：文字颜色*/
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. /*前景色：文字颜色*/
71. /*gridline-color:red; */ /*表格中的网格线条颜色*/
72. background:white;
73. /*设置交替颜色，需要在函数属性中设置:tableWidget->setAlternatingRowColors(true)*/
74. /*alternate-background-color:red; */
75. /*鼠标选中时前景色：文字颜色*/
76. /*鼠标选中时背景色*/
77. /*边框线的宽度、颜色*/
78. /*border:none;*/ /*去除边界线*/
79. /*border-radius:5px;*/
80. /*padding:10px 10px;*/ /*表格与边框的间距*/
81. }
82.
83. /*设置表头属性*/
84. QTableWidget QHeaderView::section
85. {
86. /*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. /*上预留位置*/
104. /*下预留位置*/
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. }本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
