Use of Qlistwidget and Qtablewidget and style settings

Qlistwidget and Qtablewidget use and properties, Qtablewidget and Qlistwidget style sheet settings, scroll bar style settings


First, the use of Qlistwidget

// 1, QListWidget

list_widget = new QListWidget ();

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


// Set the item icon size
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"));
// Set the text position in the item
// add_item-> setTextAlignment (Qt :: AlignHCenter);
// add_item-> setFlags (Qt :: ItemIsSelectable | Qt :: ItemIsEnabled);


// Set viewModel to determine to use different views for display
// Make the icon in ListWidgetItem above and the text below
// list_widget-> setViewMode (QListView :: IconMode);
// list_widget-> setViewMode (QListWidget :: IconMode); // This form can also
// list_widget-> setViewMode (QListView :: ListMode);


// To change the item size, use QListWidgetItem :: setSizeHint ()
// add_item-> setSizeHint (QSize (60,60));


// Set ListWidget to select multiple items
list_widget-> setSelectionMode (QAbstractItemView :: ExtendedSelection);


// There are two ways to add item in ListWidget
// A way to specify the parent Widget when constructing an item
QListWidgetItem * cubby_item = new QListWidgetItem (QIcon (": / res / pix / cubby.png"),
                                                  tr ("Cubby"), list_widget);
// The second method is to use QListWidget :: additem () to add the item after constructing the item
QListWidgetItem * dropbox_item = new QListWidgetItem ();
dropbox_item-> setIcon (QIcon (": / res / pix / dropbox.png"));
dropbox_item-> setText (tr ("Dropbox"));
list_widget-> addItem (dropbox_item);


// Insert item into the position specified in QListWidget, use QListWidget :: addItem ()
QListWidgetItem * google_item = new QListWidgetItem (QIcon (": / res / pix / google.png"),
                                                     tr ("Google"));
list_widget-> insertItem (1, google_item);


// Use QListWidget :: takeItem (int index) to delete an item in the table
// list_widget-> takeItem (0);

// To delete an item, you must add delete item, otherwise you cannot delete it
// list_widget-> removeItemWidget (add_item);
// delete add_item;


// Open and close the item can be edited, the default is not editable
// Use QListWidget :: openPersistenEditor (QListWidgetItem *) and
// QListWidget :: closePersistentEditor (QListWidgetItem *)
// list_widget-> openPersistentEditor (cubby_item);


// Set the current item to the first line
// Which line to point to when initializing ListWidget display
list_widget-> setCurrentRow (1);


// Set whether ListWidget can be sorted automatically, the default is false
// list_widget-> setSortingEnabled (true);


// Set the adjustment mode of the icon when the size of QLisView changes.
// list_widget-> setResizeMode (QListView :: Adjust);
// Set the list can be dragged, if you want to fix it can not be dragged, use QListView :: Static
// Drag item to copy
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);
// Implement replacement, custom item
list_widget-> setItemWidget (button_item, button);

// Use QListWidget :: count () to count the total number of items in ListWidget
int item_count = list_widget-> count ();
qDebug () << item_count;


// Set the style, set directly in the function
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;}"
                           );
Second, the use of QTableWidget

// 2, 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";

// Set header label
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"));

// I. Realization of the effect of QtableWidget itself
// 1, set the table to prohibit editing
table_widget-> setEditTriggers (QAbstractItemView :: NoEditTriggers);

// 2, set the table to the entire row selection
table_widget-> setSelectionBehavior (QAbstractItemView :: SelectRows);

// 3. Single selection and multiple selection settings
// Set to select multiple targets
// The main function is: Under normal circumstances, it is a single selection, but after pressing the Ctrl or Shift key, you can select multiple
table_widget-> setSelectionMode (QAbstractItemView :: ExtendedSelection);

// 4. Display and hide the header
table_widget-> verticalHeader ()-> setVisible (false); // Hide the list header
// table_widget-> horizontalHeader ()-> setVisible (false); // Hide row header

// 5. Set the font and color of the header text
// Get the item object in the horizontal header
QTableWidgetItem * columnHeaderItem = table_widget-> horizontalHeaderItem (1);
columnHeaderItem-> setFont (QFont ("Helvetica")); // Set font
columnHeaderItem-> setBackgroundColor (QColor (0,60,10)); // Set the cell background color
columnHeaderItem-> setTextColor (QColor (200,111,30)); // Set the text color

// 6. Add controls to cells
// Add a drop-down box to the cell
QComboBox * comBo = new QComboBox ();
comBo-> addItem ("Y");
comBo-> addItem ("N");
table_widget-> setCellWidget (0,2, comBo);

// Two, set the cell
// 1, the cell sets the font color, background color, font character
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);

// Set the font for all cells
// table_widget-> setFont (QFont ("Courier"));

// 2, set the text alignment in the cell
item-> setTextAlignment (Qt :: AlignHCenter | Qt :: AlignVCenter);

// 3, merge cells
// The parameters are: number of starting rows and columns to merge (0,0), number of rows to merge (3 rows), number of columns to merge (1 column)
table_widget-> setSpan (0,0,3,1);

// 4, set the cell size
// You can specify the size of a single row or column
table_widget-> setColumnWidth (3,200);
table_widget-> setRowHeight (3,60);
// Set the size of rows and columns to match the content
// table_widget-> resizeColumnsToContents ();
// table_widget-> resizeRowsToContents ();

// Set alternate line color options (default is false)
// corresponding to alternate-background-color: blue; / * blue * /
// Otherwise, the colors cannot be displayed alternately
// table_widget-> setAlternatingRowColors (true);

// Complete the last space of the header, only by extending the last cell, there is no cell bisection
table_widget-> horizontalHeader ()-> setStretchLastSection (true);

// After the cell is extended, the cell is evenly divided
table_widget-> horizontalHeader ()-> setResizeMode (QHeaderView :: Stretch);


// Three, header settings
// 1, set the table header not to be clickable (sort by default)
table_widget-> horizontalHeader ()-> setClickable (false);
table_widget-> verticalHeader ()-> setClickable (false);

// 2, set the header font bold
QFont font;
font.setBold (true);
table_widget-> horizontalHeader ()-> setFont (font);
table_widget-> verticalHeader ()-> setFont (font);

// Set the line height, regardless of the height of the header
// table_widget-> verticalHeader ()-> setDefaultSectionSize (50);
// Set the width
// table_widget-> horizontalHeader ()-> setDefaultSectionSize (30);

// Set the display format of the header text
table_widget-> horizontalHeader ()-> setDefaultAlignment (Qt :: AlignHCenter | Qt :: AlignVCenter);

// Set no border
// table_widget-> setFrameShape (QFrame :: NoFrame);

// Set to not display grid lines
// table_widget-> setShowGrid (false);

// Set the width of the first column of the table header to 150
// table_widget-> horizontalHeader ()-> resizeSection (0,150);

// Set the header height
// table_widget-> horizontalHeader ()-> setFixedHeight (150);

// Set the table style
table_widget-> setStyleSheet (
            "color: green;"
            / * "gridline-color: red;" * / / * Grid line color in the table * /
            "background: white;"
            / * "alternate-background-color: red;" * / / * Set alternate color * /
            "selection-color: red;"
            "selection-background-color: lightgray;"
            "border: 1px solid gray;"
            );

// Set header style
table_widget-> horizontalHeader ()-> setStyleSheet ("background-color: # F0F0F0;");
#if 0
// Style 2
table_widget-> horizontalHeader ()-> setStyleSheet (
            "QHeaderView :: section {background: skyblue; padding-left: 4px; border: 3px solid red;}"
            "QHeaderView :: section: checked {background-color: green;}"
            );
#endif

#if 1
// Set the vertical scroll bar style
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


// Clear all visible data (including header), the line is still
// tableWidget-> clear ();
// Only clear the data in the table, do not clear the content of the table header
// tableWidget-> clearContents ();
// Clear even lines
// tableWidget-> setRowCount (0);
// tableWidget-> setColumnCount (0);


// Get the current total number of rows in the table
int row = table_widget-> rowCount ();
qDebug () << row;
// Add a line
// tableWidget-> setRowCount (row + 1);
// Clear existing ranks
// tableWidget-> removeRow (row);

// Remove the horizontal scroll bar
// tableWidget-> setHorizontalScrollBarPolicy (Qt :: ScrollBarAlwaysOff);
// The vertical scroll bar moves by item
// tableWidget-> setVerticalScrollMode (QAbstractItemView :: ScrollPerItem);
// Remove the automatic scroll bar
// tableWidget-> setAutoScroll (false);
Third, you can use .qss to set the style sheet

// Set the style and optimize the interface
QFile file (": / my.qss");
file.open (QFile :: ReadOnly);
QString style = tr (file.readAll ());
this-> setStyleSheet (style);


// Set ListWidget scroll bar style
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);


// Set TableWidget scroll bar style
table_widget-> verticalScrollBar ()-> setCursor (Qt :: PointingHandCursor);
// table_widget-> verticalScrollBar ()-> setStyleSheet (scroll_file.readAll ());
table_widget-> verticalScrollBar ()-> setStyleSheet (scroll_style);
qss file format setting style sheet
1. QListWidget and QTableWidget style setting my.qss

//my.qss
QListWidget
{
    border: 1px solid gray; / * Border line: width, color * /
    / * background: gray; * / / * Table background color * /
    color: black; / * Foreground color: text color * /
    / * margin: 5px, 5px, 0px, 50px; * / / * up, down, left, right, spacing * /
}

/ *
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;
}

/ * The state retained after the last selection, displayed after the mouse left * /
QListWidget :: item: selected:! Active
{
    border-width: 0px;
    background: lightgreen;
}


/ * QTableWidget * /
QTableWidget
{
    color: green; / * Foreground color: text color * /
    / * gridline-color: red; * / / * Grid line color in the table * /
    background: white;
    / * To set alternate colors, you need to set in the function properties: tableWidget-> setAlternatingRowColors (true) * /
    / * alternate-background-color: red; * /
    selection-color: red; / * Foreground color when selected by mouse: text color * /
    selection-background-color: lightgray; / * Background color when the mouse is selected * /
    border: 1px solid gray; / * Width and color of border line * /
    / * border: none; * / / * Remove the boundary line * /
    / * border-radius: 5px; * /
    / * padding: 10px 10px; * / / * The distance between the table and the border * /
}

/ * Set header properties * /
QTableWidget QHeaderView :: section
{
    background-color: # F0F0F0; / * lightgray * /
    / * color: black; * /
    / * padding-left: 4px; * /
    / * border: 3px solid red; * / / * Width and color of header border line * /
    / * border: 1px solid gray; * /
}
2. Scroll bar style setting scroll.qss

//scroll.qss
/ * Vertical scrollbar overall * /
QScrollBar: vertical
{
    width: 8px;
    background: rgb (0,0,0,0%);
    margin: 0px, 0px, 0px, 0px;
    padding-top: 12px; / * Reserved position on top * /
    padding-bottom: 12px; / * Reserved position * /
}

/ * The style of the slider in the scroll bar * /
QScrollBar :: handle: vertical
{
    width: 8px;
    background: rgb (0,0,0,25%);
    border-radius: 4px;
    min-height: 20px;
}

/ * Mouse touches the slider style * /
QScrollBar :: handle: vertical: hover
{
    width: 9px;
    background: rgb (0,0,0,50%);
    border-radius: 4px;
    min-height: 20;
}

/ * Set the down arrow * /
QScrollBar :: add-line: vertical
{
    height: 12px;
    width: 10px;
    border-image: url (: / selectfile / scroll / 3.png);
    subcontrol-position: bottom;
}

/ * Set up arrow * /
QScrollBar :: sub-line: vertical
{
    height: 12px;
    width: 10px;
    border-image: url (: / selectfile / scroll / 1.png);
    subcontrol-position: top;
}

/ * Set the down arrow: floating state * /
QScrollBar :: add-line: vertical: hover
{
    height: 12px;
    width: 10px;
    border-image: url (: / selectfile / scroll / 4.png);
    subcontrol-position: bottom;
}

/ * Set up arrow: floating state * /
QScrollBar :: sub-line: vertical: hover
{
    height: 12px;
    width: 10px;
    border-image: url (: / selectfile / scroll / 2.png);
    subcontrol-position: top;
}

/ * When the scroll bar scrolls, the upper part and the lower part * /
QScrollBar :: add-page: vertical, QScrollBar :: sub-page: vertical
{
    background: rgb (0,0,0,10%);
    border-radius: 4px;
}