目录
如下所示为上一篇
一、效果预览
二、UI布局
1、控件介绍
UI布局使用GroupBox分为三个区域,分别为连接区、操作区、天气区 。
在天气区中使用Label控件显示文本与图片
在连接区中使用LineEdit控件显示IP地址与端口号,使用Label控件显示图片按钮
在操作区中使用3的PushButton控件实现按钮操控功能,使用vertical Slider来操控每次移动舵机的精度
2、控件改名
如图所示在红框的一列,自定义控件名称,为后续的功能代码铺垫
三、UI美化
1、图片的初始化与美化
//初始化图片
QPixmap px;
px.load(QString(":/dingwei.png"));
ui->tu_dingwei->setPixmap(px);
px.load(QString(":/shijian.png"));
ui->tu_shijian->setPixmap(px);
px.load(QString(":/feng.png"));
ui->tu_feng->setPixmap(px);
px.load(QString(":/caiji_wnedu.png"));
ui->tu_shineiwendu->setPixmap(px);
px.load(QString(":/shinei_shidu.png"));
ui->tu_shineishidu->setPixmap(px);
px.load(QString(":/sun.png"));
ui->tu_sun->setPixmap(px);
px.load(QString(":/qing.png"));
ui->tu_jin->setPixmap(px);
px.load(QString(":/qing.png"));
ui->tu_ming->setPixmap(px);
px.load(QString(":/duoyun.png"));
ui->tu_hou->setPixmap(px);
//图片按钮初始化
ui->btn_connect->setIcon(QIcon(":/bi_off.png"));
ui->btn_connect->setIconSize(QSize(300,300));
2、输入框的的初始化与美化
//输入框的初始化
ui->edit_ip->setReadOnly(true);
ui->edit_port->setText(QString("8089"));
ui->edit_ip->setStyleSheet("QLineEdit {"
"border: 2px solid #3498db;"
"border-radius: 10px;"
"padding: 2px;"
"}");
ui->edit_port->setStyleSheet("QLineEdit {"
"border: 2px solid #3498db;"
"border-radius: 10px;"
"padding: 2px;"
"}");
3、按钮的的初始化与美化
//按钮样式设计
ui->btn_shang->setStyleSheet("QPushButton{background-color: rgb(225, 225, 225);border:2px groove gray;border-radius:15px;padding:2px 4px;border-style: outset;}"
"QPushButton:hover{background-color:rgb(229, 241, 251); color: black;}"
"QPushButton:pressed{background-color:rgb(204, 228, 247);border-style: inset;}");
ui->btn_xia->setStyleSheet("QPushButton{background-color: rgb(225, 225, 225);border:2px groove gray;border-radius:15px;padding:2px 4px;border-style: outset;}"
"QPushButton:hover{background-color:rgb(229, 241, 251); color: black;}"
"QPushButton:pressed{background-color:rgb(204, 228, 247);border-style: inset;}");
ui->btn_zuo->setStyleSheet("QPushButton{background-color: rgb(225, 225, 225);border:2px groove gray;border-radius:15px;padding:2px 4px;border-style: outset;}"
"QPushButton:hover{background-color:rgb(229, 241, 251); color: black;}"
"QPushButton:pressed{background-color:rgb(204, 228, 247);border-style: inset;}");
ui->btn_you->setStyleSheet("QPushButton{background-color: rgb(225, 225, 225);border:2px groove gray;border-radius:15px;padding:2px 4px;border-style: outset;}"
"QPushButton:hover{background-color:rgb(229, 241, 251); color: black;}"
"QPushButton:pressed{background-color:rgb(204, 228, 247);border-style: inset;}");
ui->btn_rst->setStyleSheet("QPushButton{background-color: rgb(225, 225, 225);border:2px groove gray;border-radius:40px;padding:2px 4px;border-style: outset;}"
"QPushButton:hover{background-color:rgb(229, 241, 251); color: black;}"
"QPushButton:pressed{background-color:rgb(204, 228, 247);border-style: inset;}");
4、组的的初始化与美化
// 给组添加一个样式
QString groupStyle = "QGroupBox {"
"font-weight: bold;"
"border: 2px solid #7EAEFF;" // 边框颜色
"border-radius: 8px;"
"margin-top: 1ex;"
"color: #333333;" // 文本颜色
"}"
"QGroupBox:title {"
"subcontrol-origin: margin;"
"left: 10px;"
"padding: 0 3px;"
"color: #7EAEFF;" // 标题颜色
"}"
"QGroupBox::indicator {"
"width: 16px;"
"height: 16px;"
"}";
ui->groupBox->setStyleSheet(groupStyle);
ui->groupBox_2->setStyleSheet(groupStyle);
ui->groupBox_3->setStyleSheet(groupStyle);
5、滑动条的的初始化与美化
// 滑动条样式
QString sliderStyle = "QSlider::groove:vertical {"
"background: #ddd;" /* 槽的背景颜色 */
"border: 1px solid #bbb;" /* 槽的边框样式 */
"width: 15px;" /* 槽的宽度 */
"border-radius: 20px;" /* 槽的边角半径 */
"}"
"QSlider::handle:vertical {"
"background: #ed8b18;" /* 滑块的背景颜色 */
"border: 1px solid #2d772e;" /* 滑块的边框样式 */
"height: 20px;" /* 滑块的高度 */
"width: 30px;"
"margin: 0 -2px;" /* 调整滑块位置居中 */
"border-radius: 10px;" /* 滑块的边角半径 */
"box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);" /* 滑块的阴影效果 */
"}"
"QSlider::add-page:vertical {"
"background: #187bed;" /* 滑块下侧未选择区域的背景颜色 */
"border-radius: 5px;" /* 边角半径 */
"}"
"QSlider::sub-page:vertical {"
"background: #ddd;" /* 滑块上侧已选择区域的背景颜色 */
"border-radius: 5px;" /* 边角半径 */
"}";
ui->slider->setStyleSheet(sliderStyle);
ui->slider->setMinimum(0);
ui->slider->setMaximum(10);
ui->slider->setValue(1);
ui->slider->setSingleStep(1);
ui->slider->setPageStep(1);
四、应用图标设置
有需要做单片机设计或想被指导可以私聊我