Qt模仿IOS滑動(dòng)按鈕效果
在上一篇文章里我介紹了在Android中如何實(shí)現(xiàn)IOS形式的滑動(dòng)按鈕,在這篇文章中我將介紹如何用Qt實(shí)現(xiàn)IOS形式的滑動(dòng)按鈕。其實(shí)在Android中實(shí)現(xiàn)這個(gè)和在Qt中實(shí)現(xiàn)是一樣的道理的,只是使用的工具有所不同罷了。在Qt里面我們使用的是C++,而Android中則是Java。語(yǔ)言并不是決定的因素,而實(shí)現(xiàn)的思路才是最終決定勝負(fù)的利器。
1)、在Android中的繪制主要是在OnDraw這個(gè)函數(shù)里面進(jìn)行的,且可以在OnDraw外部寫(xiě)函數(shù)進(jìn)行繪制,只需把Cavas傳入即可。而在Qt里面的繪制主要是在painEvent里面進(jìn)行的,且不能再外部寫(xiě)函數(shù)實(shí)現(xiàn)它的繪制。
2)、在Android中承擔(dān)繪制的主要是Canvas這個(gè)對(duì)象,Painter主要是來(lái)進(jìn)行畫(huà)筆的定義和修改。而在Qt里面主要承擔(dān)繪制任務(wù)的是Painter對(duì)象,它既要充當(dāng)畫(huà)筆的角色,還要做為畫(huà)板來(lái)存在。
3)、在Android里面我們可以使用ValueAnimation來(lái)實(shí)現(xiàn)動(dòng)畫(huà)刷新,而在Qt里面并沒(méi)用提供這樣的一個(gè)函數(shù),所以我們只能通過(guò)QTimer來(lái)主動(dòng)刷新,具體代碼在下方。
4)、在兩份代碼里面懂提供了外部接口來(lái)訪問(wèn)和讀寫(xiě)它的狀態(tài)。
代碼如下
1、switchButton的頭文件
#ifndef SWITCHBUTTON_H#define SWITCHBUTTON_H #include <QWidget>#include<QTimer> class switchButton : public QWidget{ Q_OBJECTpublic: explicit switchButton(QWidget *parent = 0); void writeSwitchButtonState(bool ison); bool readSwitchButtonState();private: bool ison=false; float currentValue; float widthSize,heightSize; QTimer *timer; void paintEvent(QPaintEvent *event);//繪制事件 void mousePressEvent(QMouseEvent *event);//點(diǎn)擊事件signals: public slots:private slots: void begainAnimation();}; #endif // SWITCHBUTTON_H
2、switchButton的源文件
#include 'switchbutton.h'#include <QPaintEvent>#include<QPainter>#include<QRectF>#include<QRect>/** * @brief switchButton::switchButton * @param parent * 創(chuàng)建的這個(gè)switchbutton只是提供固定的大小,展示實(shí)現(xiàn)的過(guò)程。 */ switchButton::switchButton(QWidget *parent) : QWidget(parent){ setMaximumSize(200,130); setMinimumSize(200,130); widthSize=(float)width(); heightSize=(float)height(); timer=new QTimer(this); timer->setInterval(50); if(ison){ currentValue=widthSize-0.95*heightSize; }else{ currentValue=0.05*heightSize; } connect(timer,SIGNAL(timeout()),this,SLOT(begainAnimation())); }void switchButton::paintEvent(QPaintEvent *event){ Q_UNUSED(event) QPainter painter(this); painter.setRenderHint(QPainter::SmoothPixmapTransform); painter.setRenderHint(QPainter::Antialiasing); painter.setPen(Qt::NoPen); if(ison){ painter.save(); painter.setBrush(Qt::green); QRectF greenRect=QRectF(0,0,widthSize,heightSize); painter.drawRoundedRect(greenRect,0.5*heightSize,0.5*heightSize); painter.restore(); painter.save(); painter.setBrush(Qt::white); painter.drawEllipse(currentValue,0.05*heightSize,0.9*heightSize,0.9*heightSize); painter.restore(); }else{ painter.save(); QColor grayColor(199,199,199); painter.setBrush(grayColor); QRectF roundRect=QRectF(0,0,widthSize,heightSize); painter.drawRoundedRect(roundRect,0.5*heightSize,0.5*heightSize); painter.restore(); painter.save(); painter.setBrush(Qt::red); QRectF redRect=QRectF(heightSize*0.05,heightSize*0.05,widthSize-heightSize*0.1,heightSize*0.9); painter.drawRoundedRect(redRect,0.45*heightSize,0.45*heightSize); painter.restore(); painter.save(); painter.setBrush(Qt::white); painter.drawEllipse(currentValue,0.05*heightSize,0.9*heightSize,0.9*heightSize); painter.restore(); }}void switchButton::mousePressEvent(QMouseEvent *event){ Q_UNUSED(event) ison=!ison; timer->start(10); this->update();}void switchButton::begainAnimation(){ int i=0.05*heightSize; int n=widthSize-0.95*heightSize; if(ison){ currentValue+=1; if(currentValue>n-i){ timer->stop(); } }else{ currentValue-=1; if(currentValue<i){ timer->stop(); } } update();} void switchButton::writeSwitchButtonState(bool ison){ this->ison=ison; this->update();}bool switchButton::readSwitchButtonState(){ return this->ison;}
鑒于QTimer的復(fù)雜,本例里面沒(méi)有對(duì)透明度進(jìn)行動(dòng)畫(huà)過(guò)渡。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. el-input無(wú)法輸入的問(wèn)題和表單驗(yàn)證失敗問(wèn)題解決2. 父div高度不能自適應(yīng)子div高度的解決方案3. ASP動(dòng)態(tài)include文件4. 不要在HTML中濫用div5. Vue中原生template標(biāo)簽失效如何解決6. XML入門(mén)的常見(jiàn)問(wèn)題(三)7. XML 非法字符(轉(zhuǎn)義字符)8. vue跳轉(zhuǎn)頁(yè)面常用的幾種方法匯總9. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)10. js開(kāi)發(fā)中的頁(yè)面、屏幕、瀏覽器的位置原理(高度寬度)說(shuō)明講解(附圖)
