Qt实战案例（19）——利用QStackedLayout栈式布局实现图片分页显示

一、项目介绍

利用QStackedLayout栈式布局设计一个简单图片播放器，可以实现图片分页显示功能。

二、项目基本配置

新建一个Qt案例，项目名称为“PhotoTest”，基类选择“QWidget”，取消创建UI界面复选框的选中状态，完成项目创建。

三、UI界面设计

无UI界面

四、主程序实现 4.1 widget.h头文件

头文件中声明QStackedLayout和三个QPushButton：

QStackedLayout *stack;
QPushButton btn1;
QPushButton btn2;
QPushButton btn3;

然后声明按钮点击槽函数：

protected slots:
    void onBtn();//点击按钮槽函数

4.2 widget.cpp源文件

源文件中核心代码如下：

Widget::Widget(QWidget *parent)
    : QWidget(parent),
      btn1("第一页",this),
      btn2("第二页",this),
      btn3("第三页",this)
{


    //设置按钮尺寸
    btn1.setFixedSize(100,38);
    btn2.setFixedSize(100,38);
    btn3.setFixedSize(100,38);

    QHBoxLayout *Hlyt = new QHBoxLayout;//水平布局
    QVBoxLayout *Vlyt = new QVBoxLayout;//垂直布局
    QSpacerItem *vSpacer = new QSpacerItem(100, 20, QSizePolicy::Minimum, QSizePolicy::Expanding); //垂直弹簧

    //按钮和弹簧一起进行垂直布局
    Vlyt->addWidget(&btn1);
    Vlyt->addWidget(&btn2);
    Vlyt->addWidget(&btn3);
    Vlyt->addItem(vSpacer);
    Vlyt->setSpacing(5);

    //新建栈式布局
    stack = new QStackedLayout;
    QWidget *page1 = new QWidget(this);
//    page1->setStyleSheet("background-image: url(:/image/111.jpg);"
//                " background-repeat: no-repeat;");
    page1->setStyleSheet("border-image: url(:/image/111.jpg);");//border-image属性可以让图片平铺到窗口

    //page1->setStyleSheet("background: rgb(255,0,0);");//红色
    QWidget *page2 = new QWidget(this);
    page2->setStyleSheet("border-image: url(:/image/222.jpg);");//border-image属性可以让图片平铺到窗口
    //page2->setStyleSheet("background: rgb(0,255,0);");//绿色
    QWidget *page3 = new QWidget(this);
    page3->setStyleSheet("border-image: url(:/image/333.jpg);");//border-image属性可以让图片平铺到窗口
    //page3->setStyleSheet("background: rgb(0,0,255);");//蓝色

    //将三个页面添加到栈式布局中
    stack->addWidget(page1);
    stack->addWidget(page2);
    stack->addWidget(page3);

    //对Vlyt和stack进行水平布局
    Hlyt->addLayout(Vlyt);
    Hlyt->addLayout(stack);

    // 建立信号槽
    connect(&btn1, SIGNAL(clicked()), this, SLOT(onBtn()));
    connect(&btn2, SIGNAL(clicked()), this, SLOT(onBtn()));
    connect(&btn3, SIGNAL(clicked()), this, SLOT(onBtn()));

    this->setLayout(Hlyt);//设置布局方式
    this->resize(700,500);//固定尺寸
}

定义按钮点击槽函数：

void Widget::onBtn()
{
    QObject *obj =  this->sender();  // 获取信号发送者

    if (obj == &btn1) {
        stack->setCurrentIndex(0);
    } else if (obj == &btn2) {
        stack->setCurrentIndex(1);
    } else {
        stack->setCurrentIndex(2);
    }

}

五、效果演示

完整效果如下：

如果没有看懂的话，完整代码可以参考：https://download.csdn.net/download/didi_ya/75397368

ok，以上便是文章的全部内容了，如果对你有所帮助，记得点个赞哟~

参考： https://www.pianshen.com/article/67381309738/