QMenu常規使用和樣式設置——Qt

 前言

現在的項目需要設置菜單的樣式，菜單也不說有多複雜，很簡潔的一個效果。但是我用了一個多小時才試出想要的效果。雖說我樣式寫的不多，只會一些簡單的，但是這個打擊還是有的。我想後續我要好好學學風格樣式這塊了。

 

使用和樣式設置

使用

菜單的使用很簡單，看一樣就知道，我覺得需要注意的是菜單項需要顯示位置的設置：位置是全屏的座標點，所以注意座標的轉換。

void MainWidget::initMoreFuncMenu()
{
    m_pMoreMenu=new QMenu(this);
   
    //m_pMoreMenu->setWindowFlag(Qt::NoDropShadowWindowHint);//去掉菜單的陰影

    m_pCollectAct=new QAction("收藏");
    m_pInviteAct=new QAction("邀請");
    m_pSetAct=new QAction("設置");
    m_pOpinionAct=new QAction("意見反饋");
    m_pAboutAct=new QAction("關於我們");

    m_pMoreMenu->addAction(m_pCollectAct);
    m_pMoreMenu->addAction(m_pInviteAct);
    m_pMoreMenu->addAction(m_pSetAct);
    m_pMoreMenu->addAction(m_pOpinionAct);
    m_pMoreMenu->addAction(m_pAboutAct);

    connect(ui->moreButton,&QToolButton::clicked,this,&MainWidget::moreFunc);
    
    connect(m_pCollectAct,&QAction::triggered,this,&MainWidget::moreFunc);
    connect(m_pInviteAct,&QAction::triggered,this,&MainWidget::moreFunc);
    connect(m_pSetAct,&QAction::triggered,this,&MainWidget::moreFunc);
    connect(m_pOpinionAct,&QAction::triggered,this,&MainWidget::moreFunc);
    connect(m_pAboutAct,&QAction::triggered,this,&MainWidget::moreFunc);
}

void MainWidget::moreFunc()
{
    QWidget *pWindow = this->window();
   int x=pWindow->geometry().x()+50;
   int y=pWindow->geometry().y()+pWindow->height()-170;
   QPoint pos(x,y);
   m_pMoreMenu->exec(pos);
   
}

 

樣式設置

難點：怎麼設置菜單QMenu的大小，怎麼設置菜單項的大小？

            按常規的qss來說，大小設置應該是這樣的：

QMenu{
  width:110px;
  height:170px;
}
QMenu::item{
  width:110px;
  height:34px;
}

但是，這個是錯誤的，你可以嘗試一下，一丁點效果也沒有。

後來查資料陸續看到說，這個菜單QMenu大小是由菜單項大小組成的，那我只設置項大小是不是就可以了？當然，這個答案也是否認的，不然我也不會用一個小時。揭曉答案：他很原始，他的大小是由margin、border、padding 和content組成的，是不是很眼熟，盒模型。（我偷了一張css的盒模型圖）

我不知道爲什麼這個沒有直接設置的方法或者我的沒效果。最終我還是用最原始方法拼成我想要的大小：

height=margin-top+margin-bottom+border-top+border-bottom+padding-top+padding-bottom+font-szie

然後我想要的效果用不到外邊距（margin）和邊框(border),所以高度就由字體大小（font-size）和內邊距（padding）決定了。

QMenu{
  background:rgba(255,255,255,1);
  border:none;
}
QMenu::item{
  padding:11px 32px;
  color:rgba(51,51,51,1);
  font-size:12px;
}
QMenu::item:hover{
  background-color:#409CE1;
}
QMenu::item:selected{
  background-color:#409CE1;
}

效果圖如下： 

結束語

普通的菜單項的使用和樣式設置一般就這樣，如果需要菜單項包含其他控件，比如音樂播放器的開關按鈕等，則需要用到QWidgetAction,這個在下一篇文章中寫。