您的位置：首页 > Web前端 > CSS

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

2017-06-17 12:00 726 查看

一、QListWidget的使用

//一、QListWidget

list_widget = new QListWidget();

//list_widget->resize(200,300);
list_widget->setFixedWidth(300);

//设置item图标大小
list_widget->setIconSize(QSize(50,30));

QListWidgetItem *add_item = new QListWidgetItem(list_widget);
add_item->setIcon(QIcon(":/res/pix/add.png"));
add_item->setText(tr("Add"));
//设置item项中的文字位置
//add_item->setTextAlignment(Qt::AlignHCenter);
//add_item->setFlags(Qt::ItemIsSelectable | Qt::ItemIsEnabled);

//设置viewModel，来确定使用不同的视图进行显示
//使ListWidgetItem中的图标在上，文字在下
//list_widget->setViewMode(QListView::IconMode);
//list_widget->setViewMode(QListWidget::IconMode);  //这样的形式也可以
//list_widget->setViewMode(QListView::ListMode);

//改变item大小，使用QListWidgetItem::setSizeHint()
//add_item->setSizeHint(QSize(60,60));

//设置ListWidget可以选择多个item
list_widget->setSelectionMode(QAbstractItemView::ExtendedSelection);

//有两种方法在ListWidget中添加item
//一种在构造item的时候，指定其父Widget
QListWidgetItem *cubby_item = new QListWidgetItem(QIcon(":/res/pix/cubby.png"),
tr("Cubby"),list_widget);
//第二种方法是在构造完item后，使用QListWidget::additem()来添加item
QListWidgetItem *dropbox_item = new QListWidgetItem();
dropbox_item->setIcon(QIcon(":/res/pix/dropbox.png"));
dropbox_item->setText(tr("Dropbox"));
list_widget->addItem(dropbox_item);

//向QListWidget中指定的位置插入itemm，使用QListWidget::addItem()
QListWidgetItem *google_item = new QListWidgetItem(QIcon(":/res/pix/google.png"),
tr("Google"));
list_widget->insertItem(1,google_item);

//使用QListWidget::takeItem(int index)来删除表中的某一项
//list_widget->takeItem(0);

//删除item，必须要加上delete item，否则删不掉
//list_widget->removeItemWidget(add_item);
//delete add_item;

//打开和关闭item是否可以编辑,默认不可编辑
//使用QListWidget::openPersistenEditor(QListWidgetItem*)和
//QListWidget::closePersistentEditor(QListWidgetItem*)
//list_widget->openPersistentEditor(cubby_item);

//设置当前的item是第几行
//初始化ListWidget显示时，指向哪一行
list_widget->setCurrentRow(1);

//设置ListWidget是否可以自动排序,默认是false
//list_widget->setSortingEnabled(true);

//设置QLisView大小改变时，图标的调整模式，默认是固定的，可以改成自动调整
//list_widget->setResizeMode(QListView::Adjust);
//设置列表可以拖动，如果想固定不能拖动，使用QListView::Static
//拖动item，进行复制
list_widget->setMovement(QListWidget::Free);

QListWidgetItem *computer_item = new QListWidgetItem();
QString str(tr("Computer"));
computer_item->setData(Qt::DisplayRole,str);
computer_item->setIcon(QIcon(":/res/pix/computer.png"));
list_widget->addItem(computer_item);

QPushButton *button = new QPushButton(tr("Button"));
QListWidgetItem *button_item = new QListWidgetItem();
list_widget->addItem(button_item);
//实现替换，自定义item
list_widget->setItemWidget(button_item,button);

//使用QListWidget::count()来统计ListWidget中总共的item数目
int item_count = list_widget->count();
qDebug()<<item_count;

//设置样式，直接在函数中设置
list_widget->setStyleSheet("QListWidget{border:1px solid gray; color:black; }"
"QListWidget::Item{padding-top:20px; padding-bottom:4px; }"

26a9b
"QListWidget::Item:hover{background:skyblue; }"
"QListWidget::item:selected{background:lightgray; color:red; }"
"QListWidget::item:selected:!active{border-width:0px; background:lightgreen; }"
);

//二、QTableWidget
table_widget = new QTableWidget(15,5);

QStringList header;
header<<"Name"<<"Date"<<"Description"<<"Size"<<"Other";

QStringList vertical_header;
vertical_header<<"One"<<"Two"<<"Three"<<"Four"<<"Five"<<"Six";

//设置表头标签
table_widget->setHorizontalHeaderLabels(header);
table_widget->setVerticalHeaderLabels(vertical_header);

table_widget->setItem(0,0,new QTableWidgetItem("Jan"));
table_widget->setItem(1,0,new QTableWidgetItem("Feb"));
table_widget->setItem(2,0,new QTableWidgetItem("Mar"));

table_widget->setItem(0,1,new QTableWidgetItem(QIcon(":/res/pix/refresh.png"),"Refresh"));

//一、对QtableWidget本身的效果实现
//1、将表格设置为禁止编辑
table_widget->setEditTriggers(QAbstractItemView::NoEditTriggers);

//2、将表格设置为整行选择
table_widget->setSelectionBehavior(QAbstractItemView::SelectRows);

//3、单个选中和多个选中设置
//设置为可以选中多个目标
//主要功能是：在正常情况下是单选，但按下Ctrl或Shift键后，可以多选
table_widget->setSelectionMode(QAbstractItemView::ExtendedSelection);

//4、表头的显示与隐藏
table_widget->verticalHeader()->setVisible(false);  //隐藏列表头
//table_widget->horizontalHeader()->setVisible(false);    //隐藏行表头

//5、对表头文字的字体、颜色进行设置
//获得水平方向表头的item对象
QTableWidgetItem *columnHeaderItem = table_widget->horizontalHeaderItem(1);
columnHeaderItem->setFont(QFont("Helvetica"));  //设置字体
columnHeaderItem->setBackgroundColor(QColor(0,60,10));  //设置单元格背景颜色
columnHeaderItem->setTextColor(QColor(200,111,30));     //设置文字颜色

//6、在单元格里加入控件
//把一个下拉框加入单元格
QComboBox *comBo = new QComboBox();
comBo->addItem("Y");
comBo->addItem("N");
table_widget->setCellWidget(0,2,comBo);

//二、对单元格进行设置
//1、单元格设置字体颜色、背景颜色、字体字符
QTableWidgetItem *item = new QTableWidgetItem("Apple");
item->setBackgroundColor(QColor(0,60,10));
item->setTextColor(QColor(200,111,100));
item->setFont(QFont("Helvetica"));
table_widget->setItem(0,3,item);

//对所有单元格设置字体
//table_widget->setFont(QFont("Courier"));

//2、设置单元格内文字对齐方式
item->setTextAlignment(Qt::AlignHCenter | Qt::AlignVCenter);

//3、合并单元格
//参数为：合并的起始行列数(0,0),合并的行数(3行),合并的列数(1列)
table_widget->setSpan(0,0,3,1);

//4、设置单元格大小
//可以指定单个行或者列的大小
table_widget->setColumnWidth(3,200);
table_widget->setRowHeight(3,60);
//将行和列的大小设为与内容相匹配
//table_widget->resizeColumnsToContents();
//table_widget->resizeRowsToContents();

//设置交替行颜色选项(默认是false)
//对应于alternate-background-color:blue;   /*蓝色*/
//否则无法交替显示颜色
//table_widget->setAlternatingRowColors(true);

//将header最后的空间补全，仅仅是通过延伸最后一个单元格实现的，而没有单元格平分
table_widget->horizontalHeader()->setStretchLastSection(true);

//单元格延伸后，实现单元格平分
table_widget->horizontalHeader()->setResizeMode(QHeaderView::Stretch);

//三、表头设置
//1、设置表头不可点击(默认点击后进行排序)
table_widget->horizontalHeader()->setClickable(false);
table_widget->verticalHeader()->setClickable(false);

//2、设置表头字体加粗
QFont font;
font.setBold(true);
table_widget->horizontalHeader()->setFont(font);
table_widget->verticalHeader()->setFont(font);

//设置行高，与表头高度无关
//table_widget->verticalHeader()->setDefaultSectionSize(50);
//设置宽度
//table_widget->horizontalHeader()->setDefaultSectionSize(30);

//设置表头文字显示格式
table_widget->horizontalHeader()->setDefaultAlignment(Qt::AlignHCenter | Qt::AlignVCenter);

//设置无边框
//table_widget->setFrameShape(QFrame::NoFrame);

//设置不显示格子线
//table_widget->setShowGrid(false);

//设置表头第一列的宽度为150
//table_widget->horizontalHeader()->resizeSection(0,150);

//设置表头高度
//table_widget->horizontalHeader()->setFixedHeight(150);

//设置表格样式
table_widget->setStyleSheet(
"color:green;"
/*"gridline-color:red;"*/   /*表格中的网格线条颜色*/
"background:white;"
/*"alternate-background-color:red;"*/  /*设置交替颜色*/
"selection-color:red;"
"selection-background-color:lightgray;"
"border:1px solid gray;"
);

//设置表头样式
table_widget->horizontalHeader()->setStyleSheet("background-color:#F0F0F0;");
#if 0
//样式二
table_widget->horizontalHeader()->setStyleSheet(
"QHeaderView::section{background:skyblue; padding-left:4px; border:3px solid red; }"
"QHeaderView::section:checked{background-color:green; }"
);
#endif

#if 1
//设置垂直滚动条样式
table_widget->verticalHeader()->setStyleSheet(
"QScrollBar{background:transparent; height:10px; }"
"QScrollBar::handle{background:lightgray; border:2px solid transparent; border-radius:5px; }"
"QScrollBar::handle:hover{background:gray; }"
"QScrollBar::handle:pressed{background:black;}"
"QScrollBar::sub-line{background:transparent;}"
"QScrollBar::add-line{background:transparent;}"
);
#endif

//清除所有可见数据(包括表头)，行还在
//tableWidget->clear();
//只清除表中数据，不清除表头内容
//tableWidget->clearContents();
//连行也清除
//tableWidget->setRowCount(0);
//tableWidget->setColumnCount(0);

//获取表格中当前总行数
int row = table_widget->rowCount();
qDebug()<<row;
//添加一行
//tableWidget->setRowCount(row+1);
//清除已有的行列
//tableWidget->removeRow(row);

//去掉水平滚动条
//tableWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
//垂直滚动条按项移动
//tableWidget->setVerticalScrollMode(QAbstractItemView::ScrollPerItem);
//去掉自动滚动条
//tableWidget->setAutoScroll(false);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

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

//设置样式，优化界面
QFile file(":/my.qss");
file.open(QFile::ReadOnly);
QString style = tr(file.readAll());
this->setStyleSheet(style);

//设置ListWidget滚动条样式
list_widget->verticalScrollBar()->setCursor(Qt::PointingHandCursor);

QFile scroll_file(":/scroll.qss");
scroll_file.open(QFile::ReadOnly);
QString scroll_style = tr(scroll_file.readAll());
list_widget->verticalScrollBar()->setStyleSheet(scroll_file.readAll());
//list_widget->verticalScrollBar()->setStyleSheet(scroll_style);

//设置TableWidget滚动条样式
table_widget->verticalScrollBar()->setCursor(Qt::PointingHandCursor);
//table_widget->verticalScrollBar()->setStyleSheet(scroll_file.readAll());
table_widget->verticalScrollBar()->setStyleSheet(scroll_style);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

qss文件格式设置样式表
1、QListWidget和QTableWidget样式设置my.qss

//my.qss
QListWidget
{
border:1px solid gray;   /*边界线:宽度、颜色*/
/*background:gray;*/    /*表格背景色*/
color:black;        /*前景色：文字颜色*/
/*margin:5px,5px,0px,50px;*/   /*上、下、左、右，间距*/
}

/*
QListWidget::item
{
padding-top:24px;
padding-bottom:4px;
}
*/

QListWidget::item:hover
{
show-decoration-selected:5;
background:skyblue;
}

QListWidget::item:selected
{
/*border:0px;*/
background:lightgray;
padding:0px;
margin:0px;
color:red;
}

/*上次选择后保留的状态，鼠标离开后显示*/
QListWidget::item:selected:!active
{
border-width:0px;
background:lightgreen;
}

/*QTableWidget*/
QTableWidget
{
color:green;    /*前景色：文字颜色*/
/*gridline-color:red;   */     /*表格中的网格线条颜色*/
background:white;
/*设置交替颜色，需要在函数属性中设置:tableWidget->setAlternatingRowColors(true)*/
/*alternate-background-color:red;   */
selection-color:red;    /*鼠标选中时前景色：文字颜色*/
selection-background-color:lightgray;   /*鼠标选中时背景色*/
border:1px solid gray;  /*边框线的宽度、颜色*/
/*border:none;*/    /*去除边界线*/
/*border-radius:5px;*/
/*padding:10px 10px;*/  /*表格与边框的间距*/
}

/*设置表头属性*/
QTableWidget QHeaderView::section
{
background-color:#F0F0F0;  /*lightgray*/
/*color:black;*/
/*padding-left:4px;*/
/*border:3px solid red;*/   /*表头边框线的宽度、颜色*/
/*border:1px solid gray;*/
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

2、滚动条样式设置scroll.qss

//scroll.qss
/*垂直滚动条整体*/
QScrollBar:vertical
{
width:8px;
background:rgb(0,0,0,0%);
margin:0px,0px,0px,0px;
padding-top:12px;   /*上预留位置*/
padding-bottom:12px;    /*下预留位置*/
}

/*滚动条中滑块的样式*/
QScrollBar::handle:vertical
{
width:8px;
background:rgb(0,0,0,25%);
border-radius:4px;
min-height:20px;
}

/*鼠标触及滑块样式*/
QScrollBar::handle:vertical:hover
{
width:9px;
background:rgb(0,0,0,50%);
border-radius:4px;
min-height:20;
}

/*设置下箭头*/
QScrollBar::add-line:vertical
{
height:12px;
width:10px;
border-image:url(:/selectfile/scroll/3.png);
subcontrol-position:bottom;
}

/*设置上箭头*/
QScrollBar::sub-line:vertical
{
height:12px;
width:10px;
border-image:url(:/selectfile/scroll/1.png);
subcontrol-position:top;
}

/*设置下箭头:悬浮状态*/
QScrollBar::add-line:vertical:hover
{
height:12px;
width:10px;
border-image:url(:/selectfile/scroll/4.png);
subcontrol-position:bottom;
}

/*设置上箭头：悬浮状态*/
QScrollBar::sub-line:vertical:hover
{
height:12px;
width:10px;
border-image:url(:/selectfile/scroll/2.png);
subcontrol-position:top;
}

/*当滚动条滚动的时候，上面的部分和下面的部分*/
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical
{
background:rgb(0,0,0,10%);
border-radius:4px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航