首页 > 代码库 > QT开发(六十五)——QT样式表编程实例
QT开发(六十五)——QT样式表编程实例
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 { image: 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 { # 未选中时状态,也即正常状态 image: url(:/images/radiobutton_unchecked.png); } QRadioButton::indicator:unchecked:hover { # 未选中时,鼠标悬停时的状态 image: url(:/images/radiobutton_unchecked_hover.png); } QRadioButton::indicator:unchecked:pressed { #未选中时,按钮下按时的状态 image: url(:/images/radiobutton_unchecked_pressed.png); } QRadioButton::indicator::checked { # 按钮选中时的状态 image: url(:/images/radiobutton_checked.png); } QRadioButton::indicator:checked:hover { # 按钮选中时,鼠标悬停状态 image: url(:/images/radiobutton_checked_hover.png); } QRadioButton::indicator:checked:pressed { # 按钮选中时,鼠标下按时的状态 image: url(:/images/radiobutton_checked_pressed.png); } QCheckBox: QCheckBox { spacing: 5px; } QCheckBox::indicator { width: 15px; height: 15px; } QCheckBox::indicator:unchecked { image: url(:/buttonbg/checkbox_normal); } QCheckBox::indicator:unchecked:disabled { image: url(:/buttonbg/checkbox_disable); } QCheckBox::indicator:unchecked:hover { image: url(:/buttonbg/checkbox_hover); } QCheckBox::indicator:checked { image: url(:/buttonbg/checkbox_down); } QCheckBox::indicator:indeterminate { image: 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中的数据。
本文出自 “生命不息,奋斗不止” 博客,谢绝转载!
QT开发(六十五)——QT样式表编程实例