求教音量调节界面设计 [复制链接]

求教~怎么做一个音量调节的按钮啊，像暴风影音5那样的~，我用的是Qt4.7.4，求大神指点，先谢谢了！

toby520:这个有点歪用了 QProgressBar是一个进度条 与QSlider还是有些差别的[表情]  (2014-08-12 17:12) 

版主还是夸夸我机智吧

这个有点歪用了 QProgressBar是一个进度条 与QSlider还是有些差别的

描述:样式图

图片:1.PNG

图片不知道为什么上传不上去，我就传个附件吧！

这是我做的音量调节控件，烦请大家批评指正

ButtonVoice::ButtonVoice(QWidget *parent) : QWidget(parent),ui(new Ui::ButtonVoice)
{
   ui->setupUi(this);
   m_drag = false

   ui->bar->setStyleSheet("QProgressBar#bar::chunk{background:blue}");

  m_frame = new QFrame(this);
  m_frame->setMaximumSize(30);
  m_frame->setMinimumSize(30);
  m_frame->setMouseTracking(true);
  m_frame->setStyleSheet("QFrame{border-radius:15px;border-image:url(***.png)}");
  m_frame->move(QPoint(this->width()*ui->bar->value()/100-15,this->y()/2));
  m_frame->show();

  m_frame->setVisible(false);
}

ButtonVoice::~ButtonVoice
{
  delete ui;
}

void ButtonVoice::mousePressEvent(QMouseEvent *e)
{
  if(e && e->button() == Qt::LeftButton && e->x()>m_frame->x() && e->x()<m_frame->x()+m_frame->width())
{
   m_drag = true;
}
else
{
   m_frame->move(e->pos().x()-15,0);
   ui->bar->setValue((e->pos.x()-15)*100/(this->width()-30));
   m_drag=true;
}
e->accept();
}

void ButtonVoice::mouseMoveEvent(QMouseEvent *e)
{
  m_frame ->setVisible(true);
  
  if(m_drag == true)
  {
    if(e->pos().x()-15<0 || e->pos().x()+15 > this->width())
    {
      return;
    }
    m_frame->move(e->pos().x()-15,0);
    ui->bar->setValue((e->pos().x()-15)*100/(this->width()-30));
  }
}

void ButtonVoice::mouseReleaseEvent(QMouseEvent *e)
{
  m_drag = false;
}


ui文件就不上传了，就是一个高度固定为30的widget，里面是一个progressbar，固定高度20，使用栅格布局，上下左右间距分别为5,5,15,15

和附件效果不同，但是稍加修改就可以相同了，请大家指正！

shiziyang:看看文档
QSlider::groove:vertical
{
background: red;
....... (2014-08-12 11:36) 

我看了，QSlider最后的效果和我想要的不一样~我已经解决了~还是谢谢您

toby520:你说了半天暴风影音 能贴下他们的效果图吗？QSlider+QSS可以搞定吧 (2014-08-12 11:23) 

忘了贴图了~抱歉，问题已经解决，QSlider+QSS貌似真不行，我用QProgress+QFrame做出来了，代码我稍后贴出来，谢谢版主

lxxxzxx:我想过用slider，但是和我想的效果差别很大
1：slider的背景那条进度条怎么取到？我用qss只取到了整个背景，所以不知道怎么做到按键原始slider的样子(按键在进度条上滑动)
2：音量调节时，按键左右进度条的颜色是不同的，怎么根据按键为分界，设置slider按键左右两边进度条的颜色 .. (2014-08-12 10:34)

看看文档
QSlider::groove:vertical
{
background: red;
position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
left: 4px;
right: 4px;
}
QSlider::handle:vertical
{
height: 10px;
background: green;
margin: 0 -4px; /* expand outside the groove */
}
QSlider::add-page:vertical
{
background: white;
}
QSlider::sub-page:vertical
{
background: pink;
}
依次应该是改背景，滑块，左边和右边吧，都试过没？
垂直还是水平自己看着改

你说了半天暴风影音 能贴下他们的效果图吗？QSlider+QSS可以搞定吧

彩阳:那种的？
QDial是那种仿古的老式调音旋钮
QSlider则是滑块调音条。 (2014-08-12 09:55) 

谢谢您的回答~我想要的是QSlider那样的滑块进度条，但想做出暴风影音5音量调节那样的效果

toby520:不知道暴风影音音量调节 是啥样的，无法就是一个slider，按比例进行拖动来控制音量百分比 (2014-08-12 09:53) 

我想过用slider，但是和我想的效果差别很大
1：slider的背景那条进度条怎么取到？我用qss只取到了整个背景，所以不知道怎么做到按键原始slider的样子(按键在进度条上滑动)
2：音量调节时，按键左右进度条的颜色是不同的，怎么根据按键为分界，设置slider按键左右两边进度条的颜色？
3：进度条的宽度可以调节吗？
求版主赐教

那种的？
QDial是那种仿古的老式调音旋钮
QSlider则是滑块调音条。

不知道暴风影音音量调节 是啥样的，无法就是一个slider，按比例进行拖动来控制音量百分比