QT開發（六十五）——QT樣式表編程實例

QT開發（六十五）——QT樣式表編程實例

1、QComboBox組合框樣式定製

1、基本定義

QComboBox 
{
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 2px 1px 2px;  # 針對於組合框中的文本內容
    min-width: 9em;   # 組合框的最小寬度
}
QComboBox::drop-down
{
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;
 
    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
    border-top-right-radius: 3px; /* same radius as the QComboBox */
    border-bottom-right-radius: 3px;
}
 
QComboBox::down-arrow
{
    p_w_picpath: url(:/misc/down_arrow.png);
}

2、高級自定義

設置QComboBox爲可編輯。

    QComboBox *combo = new QComboBox(this);

    combo->setEditable(true);

    combo->addItem("apple");

    QComboBox內部使用Model/View框架維護下拉框內容。所以，能夠定義一個     QListWidget，將QListWidget設置爲QComboBox的View，而將QListWidget的Model設置爲 QComboBox的Model。QListWidget只是一個View類，所以須要自定義View類中的Item。

自QWidget派生一個子類，實現水平佈局，將全部子組件添加到裏面。

ComboboxItem::ComboboxItem(QWidget *parent):QWidget(parent)
{
    m_img = new QLabel(this);
    QPixmap pic(QStringLiteral(":/misc/preference"));
    m_img->setPixmap(pic);
    m_img->setFixedSize(pic.size());
    m_label = new QLabel(this);
 
    m_layout = new QHBoxLayout(this);
    m_layout->addWidget(m_label);
    m_layout->addStretch();
    m_layout->addWidget(m_img);
 
    m_layout->setSpacing(5);
    m_layout->setContentsMargins(5, 5, 5, 5);
 
    setLayout(m_layout);
}
ThemeRoller::ThemeRoller(QWidget *parent):QMainWindow(parent)
{
    ui.setupUi(this);
 
    m_listWidget = new QListWidget(this);
    m_listWidget->setItemDelegate(new NoFocusFrameDelegate(this));
    ui.comboBox->setEditable(true);
    ui.comboBox->setModel(m_listWidget->model());
    ui.comboBox->setView(m_listWidget);
    for (int i = 0; i < 5; ++i)
    {
        ComboboxItem* item = new ComboboxItem(this);
        item->setLabelContent(QString("Account") + QString::number(i, 10));
        connect(item, SIGNAL(chooseAccount(const QString&)), this, SLOT(onChooseAccount(const QString&)));
        QListWidgetItem* widgetItem = new QListWidgetItem(m_listWidget);
        m_listWidget->setItemWidget(widgetItem, item);
    }
}

    將ComboboxItem的chooseAccount()信號關聯到onChooseAccount()槽。當用戶點擊了選項中的某一個選項時，可以在QComboBox的文本框中顯示選中的項。

QComboBox QAbstractItemView::item {
    height: 25px;
}
 
QListView::item {
    background: white;
}
 
QListView::item:hover {
    background: #BDD7FD;
}

2、選擇按鈕QRadioButton、QCheckBox樣式定製

    QRadioButton和QCheckBox是界面設計中的重要元素。QRadioButton只容許用戶在一組選項中選擇一個，且當其中一個被選中的時候，按鈕組中的其餘單選按鈕自動取消。QCheckBox則能夠讓用戶同時選中多個選項，QCheckBox通過設置還具有第三種狀態：未決狀態（partially checked）。

QRadioButton：
QRadioButton::indicator 
{   # indicator是一個子組件，這裏的width和height分別指定按鈕的寬和高
    width: 13px;
    height: 13px;
}
 
QRadioButton::indicator::unchecked 
{   # 未選中時狀態，也即正常狀態
    p_w_picpath: url(:/p_w_picpaths/radiobutton_unchecked.png);
}
 
QRadioButton::indicator:unchecked:hover 
{   # 未選中時，鼠標懸停時的狀態
    p_w_picpath: url(:/p_w_picpaths/radiobutton_unchecked_hover.png);
}
 
QRadioButton::indicator:unchecked:pressed 
{   #未選中時，按鈕下按時的狀態
    p_w_picpath: url(:/p_w_picpaths/radiobutton_unchecked_pressed.png);
}
 
QRadioButton::indicator::checked 
{   # 按鈕選中時的狀態
    p_w_picpath: url(:/p_w_picpaths/radiobutton_checked.png);
}
 
QRadioButton::indicator:checked:hover 
{   # 按鈕選中時，鼠標懸停狀態
    p_w_picpath: url(:/p_w_picpaths/radiobutton_checked_hover.png);
}
 
QRadioButton::indicator:checked:pressed 
{ # 按鈕選中時，鼠標下按時的狀態
    p_w_picpath: url(:/p_w_picpaths/radiobutton_checked_pressed.png);
}
QCheckBox：
QCheckBox {
    spacing: 5px;
}
 
QCheckBox::indicator {
    width: 15px;
    height: 15px;
}
 
QCheckBox::indicator:unchecked {
    p_w_picpath: url(:/buttonbg/checkbox_normal);
}
 
QCheckBox::indicator:unchecked:disabled {
    p_w_picpath: url(:/buttonbg/checkbox_disable);
}
 
QCheckBox::indicator:unchecked:hover {
    p_w_picpath: url(:/buttonbg/checkbox_hover);
}
 
QCheckBox::indicator:checked {
    p_w_picpath: url(:/buttonbg/checkbox_down);
}
 
QCheckBox::indicator:indeterminate {
    p_w_picpath: url(:/buttonbg/checkbox_indeterminate);
}

3、QLineEdit行編輯框樣式定製

A、設置QLineEdit行編輯框的大小和佔位符

    edit->setPlaceholderText(QStringLiteral("E-Mail:"));

    edit->setFixedSize(200, 30);

B、QLineEdit行編輯框的樣式設置

設置QLineEdit行編輯框的邊框、圓角、背景色、選中背景色、字體大小

QLineEdit

{

    border: 1px solid rgb(41, 57, 85);

    border-radius: 3px;

    background: white;

    selection-background-color: green;

    font-size: 14px ;

}

    設置鼠標懸停時QLineEdit行編輯框的邊框、背景色

QLineEdit:hover

{

    border: 1px solid red;

    background:blue;

}

C、設置QLineEdit行編輯框做爲密碼輸入框

設置QLineEdit行編輯框做爲密碼輸入框

    edit->setEchoMode(QLineEdit::Password);

    利用QSS中的lineedit-password-character屬性，能夠更改密文顯示字符內容。

使用一個屬性選擇器來進行選擇，當QLineEdit對象的echoMode屬性值爲2時，將密文顯示字符設置爲某個字符。35在ASCII碼中對應字符爲‘#’，‘*’對應的ASCII碼值爲42。

D、自動補全功能

    文本編輯框的自動補全功能在數據過濾器中使用較爲常見，用於過濾不相干數據直奔目標數據。

    QT提供了一個類QCompleter來完成自動補全功能。

    m_model = new QStandardItemModel(0, 1, this);

    m_completer = new QCompleter(m_model, this);

    lineEdit->setCompleter(m_completer);               connect(m_completer, SIGNAL(activated(const QString&)), this,SLOT(onTextChoosed(const QString&)));

connect(ui.lineEdit, SIGNAL(textChanged(const QString&)), this, SLOT(onTextChanged(const QString&)));

    使用一個Model類來存儲數據。當用戶輸入發生變化時，將文本內容提取出來添加一個郵箱後綴並保存到Model類中。因爲已經將m_model設置成了QCompleter類的Model，所以當更新Model類的數據時，QCompleter的下拉列表的內容也會同步更新。實現兩個槽函數來響應文本變化信號和列表項激活的信號：

void onTextChoosed(const QString& email)
{
    lineEdit->clear();    
    lineEdit->setText(email);
}
 
void onTextChanged(const QString& str)
{
    if (str.contains("@")) 
    {
        return;
    }
    QStringList strlist;
    strlist << "@163.com" << "@qq.com" << "@gmail.com" << "@hotmail.com" << "@126.com";
 
    m_model->removeRows(0, m_model->rowCount());   
    for (int i = 0; i < strlist.size(); ++i)
    {
        m_model->insertRow(0);
        m_model->setData(m_model->index(0, 0), str + strlist.at(i));
    }
}

    將信號activated()鏈接到槽onTextChoosed()。當用戶用鼠標選擇了某一項後就把選中的項更新到文本框中，補全完成。信號textChanged()鏈接到onTextChanged()用於更新Model中的數據。