Qt利用布局widget和ScrollArea實(shí)現(xiàn)抽屜效果(實(shí)例代碼)
Qt利用布局,widget和ScrollArea實(shí)現(xiàn)抽屜效果
利用布局,widget和ScrollArea實(shí)現(xiàn)的抽屜效果如下:
思路就是將scrollArea設(shè)定為垂直布局,然后加入按鈕和widget,當(dāng)鼠標(biāo)點(diǎn)擊按鈕后,隱藏widget,利用垂直布局,做到自然伸縮,然后為什么要使用scrollArea做容器,因?yàn)閟crollArea可以實(shí)現(xiàn)當(dāng)容器空間不足,出現(xiàn)進(jìn)度條進(jìn)行列表滑動,下面一步一步來實(shí)現(xiàn)。
首先拖拽一個scrollArea,并拖拽幾個按鈕和widget放進(jìn)scrollArea,并將scrollArea設(shè)定為垂直布局
為按鈕添加槽,當(dāng)按鈕被點(diǎn)擊時,widget執(zhí)行setVisible(false)函數(shù),widget被隱藏,利用布局自動排列,可以看到widget好像被合起。
bool iswiedet_1=true; void MainWindow::on_pushButton_5_clicked() { if(iswiedet_1==true) { ui->widget_2->setVisible(false); iswiedet_1=false; return; } ui->widget_2->setVisible(true); iswiedet_1=true; }
到此就,就實(shí)現(xiàn)了如下效果:
現(xiàn)在,我們就可以在對應(yīng)的widget添加我們需要的控件,但是目前還缺少一種東西,就是當(dāng)列表鋪滿窗體,自動出現(xiàn)滑動條,ScrollArea可以幫助我們,將以上控件拖到ScrollArea里面,并將ScrollArea設(shè)置垂直布局,并將widgetResizable打勾,這樣就是實(shí)現(xiàn)完整的抽屜效果。
補(bǔ)充:Qt 實(shí)現(xiàn)抽屜效果
Qt 實(shí)現(xiàn)抽屜效果
1、實(shí)現(xiàn)效果和UI設(shè)計界面
2、工程目錄
3、mainwindow.h
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QToolButton> #include <QPushButton> #include <vector> using namespace std; QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACE class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = nullptr); ~MainWindow(); private: Ui::MainWindow *ui; /** * @brief 初始化 UI */ void initUI(); // 要折疊的內(nèi)容 vector<QWidget*> widgetBodys; // 要用到的 toolButton vector<QToolButton*> toolButtons; // 折疊按鈕 pushButton vector<QPushButton*> pushButtons; private slots: // 點(diǎn)擊打開和關(guān)閉抽屜按鈕 void on_btns_clicked(); }; #endif // MAINWINDOW_H
4、mainwindow.cpp
#include "mainwindow.h" #include "ui_mainwindow.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) { ui->setupUi(this); // 初始化 UI initUI(); } MainWindow::~MainWindow() { delete ui; } void MainWindow::initUI() { // 要折疊的內(nèi)容 widgetBodys.push_back(ui->widgetOneBody); widgetBodys.push_back(ui->widgetTwoBody); widgetBodys.push_back(ui->widgetThreeBody); // 要用到的 toolButton toolButtons.push_back(ui->toolButtonOne); toolButtons.push_back(ui->toolButtonTwo); toolButtons.push_back(ui->toolButtonThree); // 折疊按鈕 pushButton pushButtons.push_back(ui->pushButtonOne); pushButtons.push_back(ui->pushButtonTwo); pushButtons.push_back(ui->pushButtonThree); for(size_t i = 0;i < widgetBodys.size();++i) { // 設(shè)置 ToolButton 的樣式 toolButtons[i]->setToolButtonStyle(Qt::ToolButtonTextBesideIcon); toolButtons[i]->setIcon(QIcon(QPixmap(":/res/functions.png"))); toolButtons[i]->setText(QString::fromLocal8Bit("常用功能")); // 設(shè)置抽屜按鈕的樣式,抽屜默認(rèn)折疊 pushButtons[i]->setIcon(QIcon(QPixmap(":/res/close.png"))); // 設(shè)置抽屜默認(rèn)折疊,一定記得在 UI 設(shè)計界面將 layoutTopMargin 和 layoutBottomMargin 設(shè)置為0 widgetBodys[i]->hide(); // 方便后面點(diǎn)擊按鈕時獲取點(diǎn)擊的哪個按鈕 pushButtons[i]->setProperty("index",i); connect(pushButtons[i],&QPushButton::clicked,this,&MainWindow::on_btns_clicked); } } void MainWindow::on_btns_clicked() { // 獲取點(diǎn)擊的按鈕 QPushButton *pushButton = qobject_cast<QPushButton*>(sender()); if(pushButton) { int index = pushButton->property("index").toInt(); if(widgetBodys[index]->isVisible()) {// 當(dāng)前抽屜是展開的 // 關(guān)閉抽屜 widgetBodys[index]->hide(); // 按鈕變?yōu)殛P(guān)閉狀態(tài) pushButton->setIcon(QIcon(QPixmap(":/res/close.png"))); } else {// 當(dāng)前抽屜是關(guān)閉的 // 打開抽屜 widgetBodys[index]->show(); // 按鈕變?yōu)榇蜷_狀態(tài) pushButton->setIcon(QIcon(QPixmap(":/res/open.png"))); } } }
到此這篇關(guān)于Qt利用布局,widget和ScrollArea實(shí)現(xiàn)抽屜效果的文章就介紹到這了,更多相關(guān)Qt抽屜效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法,實(shí)例分析了javascript操作鼠標(biāo)事件及css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02mui開發(fā)中獲取單選按鈕、復(fù)選框的值(實(shí)例講解)
下面小編就為大家?guī)硪黄猰ui開發(fā)中獲取單選按鈕、復(fù)選框的值(實(shí)例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07javascript html5搖一搖功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了javascript html5搖一搖功能的實(shí)現(xiàn)過程,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-04-04ES6的異步操作之promise用法和async函數(shù)的具體使用
這篇文章主要介紹了ES6的異步操作之promise用法和async函數(shù)的具體使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12根據(jù)身份證號自動輸出相關(guān)信息(籍貫,出身日期,性別)
為了減少客戶的在頁面的輸入,做了這個效果,他可以根據(jù)用戶輸入的身份證號輸出籍貫、出身日期、性別的相關(guān)信息,需要的朋友可以參考下2013-11-11JavaScript創(chuàng)建類/對象的幾種方式概述及實(shí)例
JS中的對象強(qiáng)調(diào)的是一種復(fù)合類型,JS中創(chuàng)建對象及對對象的訪問是極其靈活的,下面與大家分享下創(chuàng)建類/對象的幾種方式,感興趣的朋友可以了解下哈2013-05-05