物联网双轴光伏追踪系统——Qt UI布局与美化

 

目录

如下所示为上一篇

一、效果预览

二、UI布局

1、控件介绍

2、控件改名

三、UI美化

1、图片的初始化与美化

2、输入框的的初始化与美化

3、按钮的的初始化与美化

4、组的的初始化与美化

5、滑动条的的初始化与美化

四、应用图标设置

---

如下所示为上一篇

物联网双轴光伏追踪系统——项目介绍与硬件设计https://blog.csdn.net/weixin_63780683/article/details/135642692?spm=1001.2014.3001.5501

一、效果预览

二、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);

四、应用图标设置

 

有需要做单片机设计或想被指导可以私聊我