qt编写网易云界面（1）----标题框的实现

大家都知道，在qt基本的做完后，想要对界面美化，其实在qt 使用qss 还是很好的，因为之前实习的时候做过java web ，相比网页来说还是有点差距，话不多说，先看看目标界面。

 哈哈，我是非常喜欢周深的，当然不知道你喜不喜欢。

目前我完成：

 就完成自定义给的标题栏，后期有时间我会不断的完善。其中比较麻烦的就是ui，本身我不会ui设计，图标都是在网上找的，推荐给大家网站：

iconfont-阿里巴巴矢量图标库

代码核心：

AllMain::AllMain(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::AllMain)
{
    ui->setupUi(this);
    //首先去除自带的边框
    this->setWindowFlag(Qt::FramelessWindowHint);
}


void AllMain::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event)
    QPainter painter_mainback(this);
    painter_mainback.drawPixmap(0,0,this->width(),this->height(),QPixmap(":/mianwindow/images/mainback.png"));
    ui->pushButton_people->setMask(QRegion(0,0,28,28,QRegion::Ellipse));
}

void AllMain::mousePressEvent(QMouseEvent *event)
{
    //获取title widget 的高度，这里固定为60px
    int titleHeight = ui->title_Widget->height();
    if(event->y() <titleHeight)
    {
        last = event->globalPos(); //获取到按压的位置
    }
}

void AllMain::mouseMoveEvent(QMouseEvent *event)
{
    int titleHeight = ui->title_Widget->height();
    if(event->y() <titleHeight)
    {
        int dx = event->globalX() - last.x();
        int dy = event->globalY() - last.y();
        last = event->globalPos();
        this->move(this->x()+dx,this->y()+dy);
    }

}

void AllMain::mouseReleaseEvent(QMouseEvent *event)
{
    int titleHeight = ui->title_Widget->height();
    if(event->y() <titleHeight)
    {
        int dx = event->globalX() - last.x();
        int dy = event->globalY() - last.y();
        this->move(this->x()+dx,this->y()+dy);
    }
}

 对应的qss 表：

/*背景颜色*/
QWidget#title_Widget
{
    background-color:rgb(236,65,65);
}
QWidget#centralWidget
{
     background-color:rgb(255,255,255);
}

/*标题LOGO文件*/
QLabel#label_title_logo
{
	border-image:url(./images/wylog.png);
}
/*关闭按钮*/
QPushButton#pushButton_close
{
	border-image:url(images/关闭.png);
}
QPushButton::hover#pushButton_close
{
	border-image:url(images/关闭.png);
}
QPushButton::pressed#pushButton_close
{
	border-image:url(images/关闭.png);
}

/*最大化按钮*/
QPushButton#pushButton_max
{
	border-image:url(images/最大化.png);
}
QPushButton::hover#pushButton_max
{
	border-image:url(images/最大化.png);
}
QPushButton::pressed#pushButton_max
{
	border-image:url(images/最大化.png);
}
/*最小化按钮*/
QPushButton#pushButton_min
{
	border-image:url(images/最小化.png);
}
QPushButton::hover#pushButton_min
{
	border-image:url(images/最小化.png);
}
QPushButton::pressed#pushButton_min
{
	border-image:url(images/最小化.png);
}
/*迷你按钮*/
QPushButton#pushButton_mini
{
	border-image:url(images/mini.png);
}
QPushButton::hover#pushButton_mini
{
	border-image:url(images/mini.png);
}
QPushButton::pressed#pushButton_mini
{
	border-image:url(images/mini.png);
}

/*后退按钮*/
QPushButton#pushButton_title_left
{
	border-image:url(images/后退.png); 
    background-color: rgb(217,59,59);
    border-radius:10px;
}
QPushButton::hover#pushButton_title_left
{
	border-image:url(images/后退.png);
    
}
QPushButton::pressed#pushButton_title_left
{
	border-image:url(images/后退.png);

}
/*前进按钮*/
QPushButton#pushButton_title_right
{
	border-image:url(images/前进.png);
    background-color: rgb(217,59,59);
    border-radius:10px;
    
}

QPushButton::hover#pushButton_title_right
{
	border-image:url(images/前进.png);
}
QPushButton::pressed#pushButton_title_right
{
	border-image:url(images/前进.png);
}
/*话筒按钮*/
QPushButton#pushButton_title_listen
{
  
   border-image:url(images/话筒.png);
}

/*个人中心按钮*/
QPushButton#pushButton_people
{
	border-image:url(images/比卡丘不皮.jpg);
}

/*个人中心按钮*/
QPushButton#pushButton_name
{
	border-image:url(images/btn_people_h.png);
}
QPushButton::hover#pushButton_name
{
	border-image:url(images/btn_people_h.png);
}
QPushButton::pressed#pushButton_name
{
	border-image:url(images/btn_people_h.png);
}

QLabel#label_people
{
	color: rgb(251,217,217);
}

QPushButton#pushButton_vip
{
	border-image:url(images/vip.png);
}

/*皮肤主题按钮*/
QPushButton#pushButton_cloth
{
	border-image:url(images/皮肤.png);
}

/*设置主题按钮*/
QPushButton#pushButton_set
{
	border-image:url(images/设置.png);
}

/*皮肤主题按钮*/
QPushButton#pushButton_message
{
	border-image:url(images/邮件.png);
}

/*消息提示框*/
QLabel#label_message_Tip
{
	color: rgb(255, 0, 0);
	background-color: rgb(255, 255, 255);
	border-radius: 7px;
}

QLabel#label_shuxian
{
	color: rgb(255, 255, 255);
}

后期有时间我会一点一点完善下去，喜欢例子可以私聊，也希望大家多多关注我。