QT开发（六十五）——QT样式表编程实例

最新推荐文章于 2022-04-30 11:43:39 发布

weixin_34326558

最新推荐文章于 2022-04-30 11:43:39 发布

阅读量317

点赞数

原文链接：http://blog.51cto.com/9291927/1890685

版权

QT开发（六十五）——QT样式表编程实例

一、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;
}

二、选择按钮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);
}

三、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中的数据。

转载于:https://blog.51cto.com/9291927/1890685