《QT项目》平移台控制

主要涉及到上位机的布局、样式的调整、材质的阴影美化、完成标识的弹框动画、点击QLineEdit的虚拟键盘弹出。

源代码：https://github.com/tsuiwade/translationTableControlSystem210909

这是一个简单的平移台控制软件，主要用到的是qt的串口功能。

https://blog.csdn.net/Mark_md/article/details/109048127

重写ComboBox下拉框的鼠标点击事件，实现点击下拉框扫描可用串口

修改项目文件：

把新的 timeshow 文件夹重命名为 timeshowfixed，并把 timeshowfixed 里面 timeshow.pro.user 用户文件删掉。
进入 timeshowfixed 文件夹，把 timeshow.pro 重命名为 timeshowfixed.pro。
③用记事本打开 timeshowfixed.pro，修改里面的 TARGET 一行，变成下面这句：
TARGET = timeshowfixed
进行这样三步操作后，我们本章第一个例子的项目 timeshowfixed 就建立好了。
初始布局：

经过几天的优化。总体样式如下：

项目结构如下：

先定分辨率1024768，又布局了几天。布局采用Card的想法，分组放置，故研究阴影的放置，但出现groupBox与子组件的样式和阴影不兼容问题，查了好几天没找到是什么问题，最终偶然间下载qt5.14时，发现是*5.9的bug。

除了布局的设计，还有样式和阴影的设计。在qss文件和窗口文件中设置。

加阴影的代码已经经过优化，优化前写的较重复且乱，有个问题一个阴影对象只可以幅值给一个对象，因此…

QList<QWidget*> qList = {ui->horizontalSlider, ui->comboBox_portName,  ui->centralWidget}; //

   QList<QPushButton*> btnList = ui->centralWidget->findChildren<QPushButton*>();
   QList<QLineEdit*> lineList = ui->centralWidget->findChildren<QLineEdit*>();
   for (auto i : btnList)  qList.append(i);
   for (auto i : lineList)  qList.append(i);

   for (auto i : qList) {
       QGraphicsDropShadowEffect * shadow_effect = new QGraphicsDropShadowEffect(this);
       shadow_effect->setOffset(2, 2);
       shadow_effect->setColor(QColor(55, 55, 55));
       shadow_effect->setBlurRadius(8);

       i->setGraphicsEffect(shadow_effect);
   }

QPushButton{
    background-color:rgb(253,253,253);
    border-radius:8px;
    border-width:1px;
    border-color:rgba(0,0,0,50);
    border-style:outset;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #f6f7fa, stop: 1 #dadbde);
}

QPushButton:hover{
    background-color:rgb(224,238,249);
    border:1px solid rgb(11,137,234);
}

QPushButton:pressed {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #dadbde, stop: 1 #f6f7fa);
    padding-left:2px;
    padding-top:2px;
    border-style:inset;
    border-color:rgba(0,0,0,50);
}


QSlider::horizontal{
    min-height: 24px;
}
QSlider::groove:horizontal{
    background: "#EC7064";
    height: 12px;
    border-radius: 6px;
}
QSlider::add-page:horizontal{
    background: "#EC7064";
    height: 12px;
    border-radius: 6px;
}
QSlider::sub-page:horizontal{
    background: "#2EE1C1";
    height: 12px;
    border-radius: 6px;
}
QSlider::handle:horizontal{
    width: 24px;
    margin-top: -6px;
    margin-bottom:-6px;
    border-radius: 12px;
    background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 "#FFFFFF",stop:0.8 "#34495E");
}


QGroupBox#groupBox_1, #groupBox_2, #groupBox_3{

    background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
    stop: 0 #f6f7fa, stop: 1 #dadbde);
    border-radius:20px;

    border-width:1px;
    border-color:rgba(0,0,0,50);
    border-style:outset;
}

样式包括圆角、偏移、渐变及渐变的颠倒、滑动条的前后样式和滑块样式。

还有一个小tip是加上icon会生动许多。

还有完成标志的动画。

截图看不出动画的效果，是有关位置和透明度的动画。

主要是设计了一个新对话框窗体，以非模态的方式出现3秒后自动消失。对话框淡入淡出的动画代码如下：

    //获取主屏幕分辨率
    QRect screenRect = QGuiApplication::primaryScreen()->geometry();

    QPropertyAnimation *appearPositionAnimation = new QPropertyAnimation(this, "geometry");
    appearPositionAnimation->setDuration(1000);
    appearPositionAnimation->setStartValue(QRect((screenRect.width() / 2) - 80, screenRect.height() / 2 - 40, 0, 0));
    appearPositionAnimation->setEndValue(QRect(screenRect.width() / 2 - 80, screenRect.height() / 2, 160, 80));
    appearPositionAnimation->setEasingCurve(QEasingCurve::InOutElastic);

//    QPropertyAnimation *vanishPostionAnimation = new QPropertyAnimation(this, "geometry");
//    vanishPostionAnimation->setDuration(1000);
//    vanishPostionAnimation->setStartValue(QRect(1024 / 2 - 80, 768 / 2, 160, 80));
//    vanishPostionAnimation->setEndValue(QRect(1024 / 2 - 80, 768 / 2 - 40, 0, 0));
//    vanishPostionAnimation->setEasingCurve(QEasingCurve::InBounce);

    QSequentialAnimationGroup *positionAnimationGroup = new QSequentialAnimationGroup(this);
    positionAnimationGroup->addAnimation(appearPositionAnimation);
    positionAnimationGroup->addPause(2000);
//    pScaleGroup->addAnimation(vanishPostionAnimation);

    this->setWindowOpacity(0.0);

    QPropertyAnimation* appearOpacityAnimation = new QPropertyAnimation(this, "windowOpacity");
    appearOpacityAnimation->setDuration(1000); // will take 5 seconds
    appearOpacityAnimation->setEasingCurve(QEasingCurve::OutBack); // just demonstration, there are a lot of curves to choose
    appearOpacityAnimation->setStartValue(0.0);
    appearOpacityAnimation->setEndValue(1.0);

    QPropertyAnimation* vanishOpacityAnimation = new QPropertyAnimation(this, "windowOpacity");
    vanishOpacityAnimation->setDuration(1000); // will take 5 seconds
    vanishOpacityAnimation->setEasingCurve(QEasingCurve::Linear); // just demonstration, there are a lot of curves to choose
    vanishOpacityAnimation->setStartValue(1.0);
    vanishOpacityAnimation->setEndValue(0.0);

    QSequentialAnimationGroup *opacityAnimationGroup = new QSequentialAnimationGroup(this);
    opacityAnimationGroup->addAnimation(appearOpacityAnimation);
    opacityAnimationGroup->addPause(2000);
    opacityAnimationGroup->addAnimation(vanishOpacityAnimation);

//    anim->start(QAbstractAnimation::DeleteWhenStopped);

    m_group = new QParallelAnimationGroup(this);
    m_group->addAnimation(positionAnimationGroup);
    m_group->addAnimation(opacityAnimationGroup);
    m_group->setDirection(QAbstractAnimation::Forward);
    m_group->setLoopCount(1);
    m_group->start();
    connect(this->m_group, SIGNAL(finished()), m_group, SLOT(deleteLater()), Qt::UniqueConnection);
    connect(this->m_group, SIGNAL(finished()), this, SLOT(close()));