Qt基本布局（水平/垂直/网格）_qt中frame怎么设置垂直-优快云博客

本文介绍了一个用户信息修改界面的设计与实现过程，使用Qt框架构建了包含导航页、基本信息页、联系方式页及详细资料页的多页面应用。每个页面采用不同的布局方式，如网格布局等，以实现良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

20201017基本布局（水平/垂直/网格）

20201017基本布局（水平/垂直/网格）

（QHBoxLayout类/ QVBoxLayout类/ QGridLayout类）

涉及函数/方法：

addWidget( )方法：加入控件

addLayout( )方法：加入子布局

实例功能：用户信息修改

新建：Qt Widgets Application

项目名称：UserInfo

1【导航页】类名：Content 基类：QDialog（对话框类）（修改继承自QFrame）

2【基本信息页】类名：BaseInfo 基类：QWidget（控件类）

3【联系方式页】类名：Contact 基类：QWidget （控件类）

4【详细资料页】类名：Detail 基类：QWidget（控件类）

均不选择“创建界面”复选框

实现效果如下图所示：

涉及函数/方法：addStretch() //按钮前插入一个占位符，使两个按钮能够靠右对齐；且整个对话框大小改变时保证按钮的大小不会变

添加新文件，选择C++ Class

选择基类，填写类名，见下图：

分页进行设计： main.cpp/导航页/基本信息页/联系方式页/详细资料页

0【main.cpp】

#include "content.h"
#include <QApplication>

#include <QTextCodec>  //添加头文件 QFont
#include <QSplitter>   //添加头文件：分割窗口类QSplitter
#include <QListWidget> //添加头文件：QListWidget类


int main(int argc, char *argv[])//这里是应用程序的入口。几乎所有使用Qt的情况下，main()函数只需在将控制转交给Qt库之前执行初始化，然后Qt库通过事件向程序告知用户的行为。
                                //所有Qt程序必须有且只有一个main()函数。argc是命令行变量的数量，argv是命令行变量的数组。
{
    QApplication a(argc, argv); // a是创建的QApplication类的对象，用来处理命令行变量。所有被Qt识别的命令行参数都将从argv中移去，argc也因此减少

    QFont font("AR PL KaitiM GB",12);  //设置字体和字号
    a.setFont(font);

    //新建【水平分割窗口】对象，作为主布局框
    QSplitter *splitterMain = new QSplitter(Qt::Horizontal,0);   //水平布局，0表示主窗口
    splitterMain->setOpaqueResize(true);//setOpaqueResize()：设定分割窗口的分隔条是否为实时更新显示。true为实时更新显示，false为拖拽时显示灰色粗线条


    //新建QListWidget条目选择框，并依次插入XXX/XXX/XXX条目
    QListWidget *list = new QListWidget(splitterMain);
    list->insertItem(0,QObject::tr("基本信息"));
    list->insertItem(1,QObject::tr("联系方式"));
    list->insertItem(2,QObject::tr("详细资料"));

    //新建Content类对象，连接列表框的currentRowChanged()信号与堆栈窗口的setCurrentIndex()槽函数
    Content *content = new Content(splitterMain);

    QObject::connect(list,SIGNAL(currentRowChanged(int)),content->stack,SLOT(setCurrentIndex(int)));


    //设置水平分割窗口的标题（主布局框）
    splitterMain->setWindowTitle(QObject::tr("修改用户资料"));

    //设置水平分割窗口的最小尺寸和最大尺寸（主布局框）
    splitterMain->setMinimumSize(splitterMain->minimumSize());
    splitterMain->setMaximumSize(splitterMain->maximumSize());

    splitterMain->show();//显示主布局框，连同上面的所有控件

//    Content w;
//    w.show();

    return a.exec();   //main()函数将控制权交给Qt，Qt完成事件处理工作，当应用程序退出的时候，exec()函数的值就会返回。
                       //exec()函数中，Qt接收并处理用户和系统的事件，并且将他们传递给适当的窗口部件。
}

1【导航页】

#include "content.h"

//用户信息修改案例之【导航页】

Content::Content(QWidget *parent)
    : QFrame(parent)
{

    //（1）创建堆栈窗体QStackedWidget对象
    stack = new QStackedWidget(this);
    stack->setFrameStyle(QFrame::Panel|QFrame::Raised);  //设置堆栈窗口显示的风格//setFrameStyle()设置控件风格，包括6种形状Shape和3种阴影Shadow

    //------------------------------------------------------------------------------
    //堆栈窗口顺序插入三个页面
    baseInfo = new BaseInfo();     //new创建基本信息类的对象
    contact = new Contact();       //new创建联系方式类的对象
    detail = new Detail();         //new创建详细资料类的对象

    //依次插入3个控件到堆栈窗体中
    stack->addWidget(baseInfo);   //1基本信息
    stack->addWidget(contact);    //2联系方式
    stack->addWidget(detail);     //3详细资料

    //------------------------------------------------------------------------------
    //(2)创建两个按钮,并水平布局
    AmendBtn = new QPushButton(tr("修改"));    //修改按钮
    CloseBtn = new QPushButton(tr("关闭")); ;  //关闭按钮

    QHBoxLayout *BtnLayout = new QHBoxLayout;  //水平布局
    BtnLayout->addStretch(1);                  //按钮前插入一个占位符，使两个按钮能够靠右对齐；且整个对话框大小改变时保证按钮的大小不会变
    BtnLayout->addWidget(AmendBtn);            //addWidget()加入控件
    BtnLayout->addWidget(CloseBtn);

    //------------------------------------------------------------------------------
    //（3）整体布局:垂直布局
    QVBoxLayout *RightLayout = new QVBoxLayout(this);  //垂直布局，必须加this，指定父窗口为this对象
    RightLayout->setMargin(10);  //设置边距setMargin()
    RightLayout->setSpacing(6);  //设置间距setSpacing()
    RightLayout->addWidget(stack);    //加入stack控件
    RightLayout->addLayout(BtnLayout);//加入子布局
}

Content::~Content()
{

}

2【基本信息页】

#include "baseinfo.h"

//用户信息修改案例之【基本信息页】

BaseInfo::BaseInfo(QWidget *parent) : QWidget(parent)
{
    //（1）左侧LeftLayout
    UserNameLabel = new QLabel(tr("用户名:"));  //用户名--标签QLabel
    UserNameLineEdit = new QLineEdit;          //用户名--行编辑框QLineEdit

    NameLabel = new QLabel(tr("姓名:"));       //姓名--标签QLabel
    NameLineEdit = new QLineEdit;              //姓名--行编辑框QLineEdit

    SexLabel = new QLabel(tr("性别:"));        //性别--标签QLabel
    SexComboBox = new QComboBox;               //性别--组合框QComboBox
    SexComboBox->addItem(tr("女"));
    SexComboBox->addItem(tr("男"));

    DepartmentLabel = new QLabel(tr("部门:")); //部门--标签QLabel
    DepartmentTextEdit = new QTextEdit;       //部门--文本编辑框QTextEdit

    AgeLabel = new  QLabel(tr("年龄:"));       //年龄--标签QLabel
    AgeLineEdit = new QLineEdit;              //年龄--行编辑框QLineEdit

    OtherLabel = new  QLabel(tr("备注:"));    //备注--标签QLabel
    OtherLabel->setFrameStyle(QFrame::Panel | QFrame::Sunken);//设置控件风格（形状/阴影）

    //左侧网格布局11个控件
    LeftLayout = new QGridLayout();   //左边布局，由于不是主布局管理器，所以不用指定父窗口
    //addWidget()网格布局中加入控件
    LeftLayout->addWidget(UserNameLabel,0,0);   //用户名--标签QLabel
    LeftLayout->addWidget(UserNameLineEdit,0,1);//用户名--行编辑框QLineEdit

    LeftLayout->addWidget(NameLabel,1,0);       //姓名--标签QLabel
    LeftLayout->addWidget(NameLineEdit,1,1);    //姓名--行编辑框QLineEdit

    LeftLayout->addWidget(SexLabel,2,0);        //性别--标签QLabel
    LeftLayout->addWidget(SexComboBox,2,1);     //性别--组合框QComboBox

    LeftLayout->addWidget(DepartmentLabel,3,0);   //部门--标签QLabel
    LeftLayout->addWidget(DepartmentTextEdit,3,1);//部门--文本编辑框QTextEdit

    LeftLayout->addWidget(AgeLabel,4,0);        //年龄--标签QLabel
    LeftLayout->addWidget(AgeLineEdit,4,1);     //年龄--行编辑框QLineEdit

    LeftLayout->addWidget(OtherLabel,5,0,1,2);  //备注--行/列/行间距/列间距

    LeftLayout->setColumnStretch(0,1);//设置两列分别占用空间的比例 setColumnStretch()。
    LeftLayout->setColumnStretch(1,3);//设定为1:3，即使对话框框架大小变了，两列之间的宽度比依旧保持不变

    //----------------------------------------------------
    //(2)右侧--右上角TopRightLayout
    HeadLabel = new QLabel(tr("头像:"));    //头像--标签QLabel

    HeadIconLabel = new QLabel;            //头像图标
    QPixmap icon("photo.bmp");
    HeadIconLabel->setPixmap(icon);
    HeadIconLabel->resize(icon.width(),icon.height()); //resize

    UpdateHeadBtn = new QPushButton(tr("更换"));//更换

    //右上角水平布局
    TopRightLayout = new QHBoxLayout();
    TopRightLayout->setSpacing(20);            //间距Spacing
    TopRightLayout->addWidget(HeadLabel);      //addWidget()加入控件
    TopRightLayout->addWidget(HeadIconLabel);
    TopRightLayout->addWidget(UpdateHeadBtn);


    //(3)右侧--右下角RightLayout
    IntroductionLabel = new QLabel(tr("个人说明:")); //个人说明
    IntroductionTextEdit = new QTextEdit;           //个人说明--文本编辑框QTextEdit

    //(4)右边整个垂直布局
    RightLayout = new QVBoxLayout();
    RightLayout->setMargin(10);                //边距Margin
    RightLayout->addLayout(TopRightLayout);    //addLayout()加入子布局
    RightLayout->addWidget(IntroductionLabel); //addWidget()加入控件
    RightLayout->addWidget(IntroductionTextEdit);


    //(5)整体布局：网格布局
    QGridLayout *mainLayout = new QGridLayout(this);   //指定父窗口为this对象
    mainLayout->setMargin(15);       //对话框边距Margin
    mainLayout->setSpacing(10);      //间距Spacing

    mainLayout->addLayout(LeftLayout,0,0); //加入左边布局
    mainLayout->addLayout(RightLayout,0,1);//加入右边布局
    mainLayout->setSizeConstraint(QLayout::SetFixedSize);//最优化显示（即控件按sizeHint()的大小显示），且用户无法改变对话框大小

}

3【联系方式页】

#include "contact.h"

//用户信息修改案例之【联系方式页】

Contact::Contact(QWidget *parent) : QWidget(parent)
{
    EmailLabel = new QLabel(tr("电子邮件:"));//电子邮件--标签QLabel
    EmailLineEdit = new QLineEdit;          //电子邮件--行编辑框QLineEdit

    AddrLabel= new QLabel(tr("联系地址:"));  //联系地址--标签QLabel
    AddrLineEdit = new QLineEdit;           //联系地址--行编辑框QLineEdit

    CodeLabel = new QLabel(tr("邮政编码:")); //邮政编码--标签QLabel
    CodeLineEdit = new QLineEdit;          //邮政编码--行编辑框QLineEdit

    MobTelLabel = new QLabel(tr("移动电话:"));//移动电话--标签QLabel
    MobTelLineEdit = new QLineEdit;          //移动电话--行编辑框QLineEdit
    MobTelCheckBox = new QCheckBox(tr("接收留言:"));//移动电话--复选框QCheckBox

    ProTelLabel = new QLabel(tr("办公电话:"));//办公电话--标签QLabel
    ProTelLineEdit = new QLineEdit;          //办公电话--行编辑框QLineEdit

    //网格布局
    mainLayout = new QGridLayout(this);    //网格布局，指定父窗口为this对象
    mainLayout->setMargin(15);             //边距Margin
    mainLayout->setSpacing(10);            //间距Spacing
    mainLayout->addWidget(EmailLabel,0,0); //addWidget()加入控件
    mainLayout->addWidget(EmailLineEdit,0,1);

    mainLayout->addWidget(AddrLabel,1,0);
    mainLayout->addWidget(AddrLineEdit,1,1);

    mainLayout->addWidget(CodeLabel,2,0);
    mainLayout->addWidget(CodeLineEdit,2,1);

    mainLayout->addWidget(MobTelLabel,3,0);
    mainLayout->addWidget(MobTelLineEdit,3,1);
    mainLayout->addWidget(MobTelCheckBox,3,2);


    mainLayout->addWidget(ProTelLabel,4,0);
    mainLayout->addWidget(ProTelLineEdit,4,1);

    mainLayout->setSizeConstraint(QLayout::SetFixedSize);//最优化显示（即控件按sizeHint()的大小显示），且用户无法改变对话框大小

}

4【详细资料页】

#include "detail.h"

//用户信息修改案例之【详细资料页】

Detail::Detail(QWidget *parent) : QWidget(parent)
{
    NationLabel = new QLabel(tr("国家/地址:"));//国家--标签QLabel
    NationComboBox = new QComboBox;           //国家--组合框QComboBox
    NationComboBox->insertItem(0,tr("中国"));  //insertItem()插入选项
    NationComboBox->insertItem(1,tr("美国"));
    NationComboBox->insertItem(2,tr("英国"));

    ProvinceLabel = new QLabel(tr("省份:"));     //省份--标签QLabel
    ProvinceComboBox = new QComboBox;           //省份--组合框QComboBox
    ProvinceComboBox->insertItem(0,tr("江苏省")); //insertItem()插入选项
    ProvinceComboBox->insertItem(1,tr("山东省"));
    ProvinceComboBox->insertItem(2,tr("浙江省"));

    CityLabel = new QLabel(tr("城市:"));     //城市--标签QLabel
    CityLineEdit = new QLineEdit;           //城市--行编辑框QLineEdit

    IntroductLabel = new QLabel(tr("个人说明:"));//个人说明--标签QLabel
    IntroductTextEdit = new QTextEdit;          //个人说明--文本编辑框QTextEdit

    //网格布局
    mainLayout = new QGridLayout(this);     //指定父窗口为this对象
    mainLayout->setMargin(15);              //边距Margin
    mainLayout->setSpacing(10);             //间距Spacing
    mainLayout->addWidget(NationLabel,0,0); //addWidget()加入控件
    mainLayout->addWidget(NationComboBox,0,1);

    mainLayout->addWidget(ProvinceLabel,1,0);
    mainLayout->addWidget(ProvinceComboBox,1,1);

    mainLayout->addWidget(CityLabel,2,0);
    mainLayout->addWidget(CityLineEdit,2,1);

    mainLayout->addWidget(IntroductLabel,3,0);
    mainLayout->addWidget(IntroductTextEdit,3,1);

}