Qt自定義ComboBox

Qt自定義ComboBox

---

qt style sheet(qss)

/*下拉按鈕左邊的框*/
QComboBox[combo_summary="true"]{
    border:2px solid white;
	border-radius: 10px;
	padding: 1px;
    background-color: #67B5B7;
	color: white;
	selection-background-color: yellow;
	selection-color: black;
	min-width: 100px;
    font: 24px;
}

/*下拉按鈕右邊的向下箭頭*/
QComboBox[combo_summary="true"]::down-arrow{
    image:url(:/qss/images/add_bottom.png);
	width:10px;
	height:10px;
	right:2px;
}

/*下拉按鈕右邊的包含箭頭的框*/
QComboBox[combo_summary="true"]::drop-down{
    subcontrol-origin:padding;
	subcontrol-position:top right;
	width:15px;
	border-left-width:0px;
	border-left-style:solid;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
	border-left-color: blue;
}

ListItem

	QComboBox *combox_1 = new QComboBox();
    combox_1->setProperty("combo_summary",true);
    QListView *listview = new QListView(combox_1);
    combox_1->addItem("1");
    combox_1->addItem("1");
    combox_1->addItem("1");
    combox_1->addItem("回到首頁");
    combox_1->addItem("查看信息");
    listview->setStyleSheet(
        "QListView{"
        "   font:   16px;"
        "}"
        "QListView::item{"
        "   border: 1px solid transparent;"
        "   min-height: 20px;"
        "   background-color: white;"
        "   color:  #272B31;"
        "}"
        "QListView::item:alternate {"
        "   background: #EEEEEE;"
        "}"
        "QListView::item:selected:!active {"
        "   background: white;"
        "}"
        "QListView::item:selected:active {"
        "   background: white;"
        "}"
        "QListView::item:selected{"
        "   border: 1px solid #52CC8E;"
        "   background-color: white;"
        "}"
        "QListView::item:hover{"
        "   border: 1px solid #52CC8E;"
        "   background-color: white;"
        "}"
    );
    combox_1->setView(listview);
    combox_1->setModel(listview->model());
    combox_1->setFixedSize(78,50);

自定義ListItem

ComboBoxItem.cpp

ComboBoxItem::ComboBoxItem(QString color, QWidget *parent)
{
    m_img = new QLabel(this);
    m_img->setFixedSize(47,19);
    m_img->setStyleSheet(""
        "QLabel{"
        "   background-color:"+color+";"
        "   border: none;"
        "}");

    QHBoxLayout *m_layout = new QHBoxLayout(this);
    m_layout->setMargin(0);
    m_layout->setSpacing(0);
    m_layout->setContentsMargins(0,0,0,0);

    m_layout->addSpacing(5);
    m_layout->addSpacing(50);
    m_layout->addWidget(m_img);
    m_layout->addSpacing(5);

    setLayout(m_layout);
}

mainwidget.cpp

 	QComboBox *combox_1 = new QComboBox();
    combox_1->setProperty("combo_summary",true);
    QListWidget *listview = new QListWidget(combox_1);
    listview->setSpacing(5);
    listview->setViewMode(QListView::ListMode);
    QListWidgetItem *item1 = new QListWidgetItem("淺色");
    QListWidgetItem *item2 = new QListWidgetItem("深色");
    item1->setForeground(QColor(Qt::transparent));
    ComboBoxItem *c_item1 = new ComboBoxItem("#67B5B7","淺色");
    ComboBoxItem *c_item2 = new ComboBoxItem("#272C32","深色");
    listview->addItem(item1);
    listview->addItem(item2);
    listview->setItemWidget(item1,c_item1);
    listview->setItemWidget(item2,c_item2);
    listview->setStyleSheet(
        "QListView{"
        "   font:   20px;"
        "}"
        "QListView::item{"
        "   border: 1px solid #52CC8E;"
        "   min-height: 20px;"
        "   background-color: #FFFFFF;"
        "   color:  #1B1B1B;"
        "}"
        "QListView::item:selected{"
        "   background-color: lightgray;"
        "}"
        "QListView::item:hover{"
        "   background-color: lightgray;"
        "}"
    );
    combox_1->setView(listview);
    combox_1->setModel(listview->model());
    combox_1->setFixedSize(150,50);

參考

QListWidget加入小控件
組合框QComboBox的定製