QListWidget與QTableWidget的使用以及樣式設置


QListWidget和QTableWidget的使用和屬性,QTableWidget和QListWidget樣式表的設置,滾動條的樣式設置

一、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; }" "QListWidget::Item:hover{background:skyblue; }" "QListWidget::item:selected{background:lightgray; color:red; }" "QListWidget::item:selected:!active{border-width:0px; background:lightgreen; }" );
  • 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

二、QTableWidget的使用

//二、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-"*/ /*設置交替顏色*/ "selection-color:red;" "selection-" "border:1px solid gray;" ); //設置表頭樣式 table_widget->horizontalHeader()->setStyleSheet(""); #if 0 //樣式二 table_widget->horizontalHeader()->setStyleSheet( "QHeaderView::section{background:skyblue; padding-left:4px; border:3px solid red; }" "QHeaderView::section:checked{ }" ); #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

三、可以使用.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

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

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; }
  • 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

這里寫圖片描述

http://blog.csdn.net/u011125673/article/details/51753997


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM