仿QQ音乐播放器（1）

仿QQ音乐播放器（1）

界面开发

主界⾯布局设计

【主窗⼝的布局】

① 选中QQMusic，在弹出的属性中找到geometry属性，将窗⼝宽度修改为：1040，⾼度修改为700

② 从控件区拖拽⼀个Widget到窗⼝区域，objectName修改为：background，选中QQMusic，然后点击垂直布局，background就填充满了整个窗⼝。

整个窗⼝由head和body上下两部分组成。

直接拖两个Widget放到设计区，双击将名字修改为head和body；

head和body平分了整个background，并且head和body的margin有间隔。再次选中background对象，右侧属性部分下滑找到Layout，将Margni和Space修改为0

修完完成后，head和body之间的间隔就没有了。

但是head占区域过⼤，选中head对象，将head的minimumSize和maxmumSize属性的⾼度都调整为80，这样head的⼤⼩就固定了。

head内部设计

head内部由两部分构成，headLeft区域显⽰图标，headRight区域为搜索框和功能按钮区域。

拖两个widget到head中，将objectName修改为headLeft和headRight

然后选中head对象，点击⽔平布局(垂直布局左侧就是⽔平布局)，就会呈现如下布局：

继续选中head对象，下滑找到Layout属性，将Margin和Spacing全部设置为0；

选中headLeft对象，将minimumSize和maximumSize的宽度修改为200，就能看到head的初步效果。

【headLeft】

拖⼀个QLabel控件放置headLeft内，将QLabel的objectName修改为logo，text属性修改为空；然后选中headLeft，点击⽔平布局，此时QLabel就会填充满headLeft。同样需要选中headLeft，下滑找到Layout属性，将Margin和spacing全部设置为0.

【headRight】

headRight内部也是由两部分构成：搜索框和按钮区域

拖拽两个widget到headRight，修改objectName为SearchBox和SettingBox，将SearchBox的minimumSize和maximumSize的宽度修改为300，背景颜⾊分别修改为：

选中headRight，然后点击⽔平布局，并将headRight的Margin和Spacing修改为0，就能看到下⾯的效果。

【searchBox】

拖⼀个QLineEdit进去，然后选中searchBox点击⽔平布局。

【settingBox】

拖拽⼀个按钮到SettingBox，按钮的minimumSize和maximumSize的宽度和⾼度都修改为30，然后

⿏标选中，按着ctrl键+⿏标拖拽，复制3个出来摆放好，依次将四个按钮的objectName从左往右修改

为：skin、max、min、quit，并将按钮的text属性也修改为空，将来设置图⽚。

在控件区域找到Spacers，找到Horizontal Spacer控件，拖拽到SettingBox区域

选中SettingBox，点击⽔平布局，并将SettingBox的Margin和Spacing修改为0

Body部分布局

整个body部分是由bodyLeft和bodyRight两部分组成。

① 拖两个Widget到Body中，将objectName修改为bodyLeft和bodyRight

②选中body，点击⽔平布局，将bodyLeft的minimumSize和maxmumSize的宽度修改为200

③选中Body，将body的Margin和Spacing修改为0

bodyLeft内部布局

① 拖拽⼀个Widget到bodyLeft，将objectName修改为leftBox

② 拖拽Vertical Spacer到bodyLeft

③ 选中leftBox，将minmumSize和maxmumSize的⾼度修改为400

④ 选中bodyLeft，点击垂直布局，并将bodyLeft的Margin和Spacing修改为0

leftBox内部布局

leftBox内部包含：在线⾳乐 和 我的⾳乐两部分。

① 拖拽两个Widget到leftBox中，将objectName依次修改为：onlineMusic和myMusic

② 选中leftBox，点击垂直布局，然后将Margin和Spacing设置为0

③ onlineMusic 和 myMusic内部的元素都是相同的，由⼀个QLabel和三个Widget构成，后期Widget会替换为⾃定义按钮，此处先⽤Widget占位。因此分别向onlineMusic和myMusic内部拖拽⼀个QLabel和三个QWidget，并选中onlineMusic 和 myMusic点击垂直布局，然后将Margin和Spacing设置为0

bodyRight布局

bodyRight由层叠窗⼝、进度滑竿、播放控制区三部分组成。

① 拖拽层叠窗⼝控件Stacked Widget，就在Widget控件上⽅到bodyRight中

② 拖拽Widget到bodyRight，将objectName修改为processBar，将minimumSize和maximumSize

的⾼度修改为30，背景颜⾊修改为绿⾊

③ 拖拽Widget到bodyRight，将objectName修改为controlBox，将minmumSize⾼度修改为60

④ 选中bodyRight，点击垂直布局，然后将bodyRight的Margin和Spacing修改为0

stackedWidget内部增加⻚⾯

stackedWidget默认会提供两个⻚⾯，还需添加四个⻚⾯。

在对象区域选中stackedWidget控件，然后右键单击弹出菜单中选择添加⻚：

ControlBox内部布局

该区域内部由三部分组成：歌曲信息部分、播放控制部分、时间显⽰

① 拖拽三个Widget到ControlBox中，将ObjectName依次修改为play_1、play_2、play_3

② 选中ControlBox，点击⽔平布局，将ControlBox的Margin和Spacing修改为0

play1内部：

拖拽3个QLabel，放置歌曲图⽚、歌⼿名和歌曲名字，调整好位置，将QLabel的objectName修改为：musicCover、musicName、musicSinger然后选中play1，点击栅格布局

play2内部：

从左到右依次摆放6个按钮，按钮的minimumSize和maxmumSize均修改为30*30，将objectName从左往右依次修改为：playMode、playUp、Play、playDown、volume、addLocal；然后选中play2，点击⽔平布局，并将play_2的Margin和Spacing修改为0

play3内部：

拖四个QLabel和⼀个按钮，调整⼤⼩位置，从左往右QLabel的objectName依次修改为：labelNull、currentTime、line、totalTime，按钮的objectName修改为lrcWord，按钮的maxmumSize的宽度和⾼度修改为30*30；选中play3，点击⽔平布局，并将play3的Margin和Spacing修改为0

往右QLabel的objectName依次修改为：labelNull、currentTime、line、totalTime，按钮的objectName修改为lrcWord，按钮的maxmumSize的宽度和⾼度修改为30*30；选中play3，点击⽔平布局，并将play3的Margin和Spacing修改为0