背景
最近项目需要做一个显控界面来实现监视信号状态的功能,界面是由model/view的框架搭成的。在实现过程中,为了操作人员更方便快捷的搜取符合相关条件的表格项,我们加入QComboBox下拉列表控件。
效果
代码
QComboBox *p_QcomboBox = new QComboBox(); //创建QComboBox
p_QcomboBox->setEditable(false); //设置不可编辑
p_QcomboBox->addItem("检测信号来源"); //设置下拉列表第一栏
p_QcomboBox->addItem("option 0"); //设置下拉列表第二栏
p_QcomboBox->addItem("option 1"); //设置下拉列表第三栏
connect(p_QcomboBox3, static_cast<void(QComboBox::*)(const QString &)>(&QComboBox::activated), this, [=](){
QString m_cur_type = p_QcomboBox3->currentText(); //取当前选中的条件
qDebug() << m_cur_type;
if (m_cur_type == "option 1") //如果符合第三栏的条件
{
p_tableView->setRowHidden(0, true); //隐藏偶数行
p_tableView->setRowHidden(1, false); //显示奇数行
p_tableView->setRowHidden(2, true);
p_tableView->setRowHidden(3, false);
p_tableView->setRowHidden(4, true);
p_tableView->setRowHidden(5, false);
}else if(m_cur_type == "option 0") //如果符合第二栏的条件
{
p_tableView->setRowHidden(0, false); //显示偶数行
p_tableView->setRowHidden(1, true); //隐藏奇数行
p_tableView->setRowHidden(2, false);
p_tableView->setRowHidden(3, true);
p_tableView->setRowHidden(4, false);
p_tableView->setRowHidden(5, true);
}else
{
for (int i = 0; i < 6; ++i) { //如果符合第一栏的条件
p_tableView->setRowHidden(i, false); //显示全部行
}
}
});
...
//填充表格数据:第三列的偶数行显示option 0,奇数行显示option 1
p_TableModel= new QStandardItemModel();
p_tableView = new QTableView();
p_tableView->setModel(p_dbTableModel);
for (int row = 0; row < 6; ++row) {
if(row%2 == 0)
{
p_TableModel->setItem(row, 3, new QStandardItem(QString("option 0")));
}else
{
p_TableModel->setItem(row, 3, new QStandardItem(QString("option 1")));
}
}
...
样式
QComboBox{
background-color: transparent;
border-radius : 5px;
border : 1px solid #yourcolor1;
padding : 5px;
padding-left : 10px;
color : #FFFFFF;
font-size : 15px;
font-weight : bold;
font-family : "SimHei";
}
QComboBox:hover{
border: 2px solid #7284b9;
}
QComboBox::drop-down {
subcontrol-origin : padding;
subcontrol-position : top right;
width : 25px;
border-left-width : 3px;
border-left-color : #yourcolor1;
border-left-style : nopen;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
background-image: url(:/images/arrow.png);
background-position: center;
background-repeat: no-reperat;
}
QComboBox QAbstractItemView {
color : #FFFFFF;
background-color : #yourcolor2;
padding : 10px;
selection-background-color: #yourcolor2;
}