水平，竖直，栅格布局实战

首先让我们思考一下，创建一个这样的登录界面，我们应该怎么对界面进行布局的呢？qt当中我们一般有三种布局，竖直布局，水平布局和栅格布局。这个界面一般使用栅格布局。

1.栅格布局--如何创建栅格布局

        <1>包含头文件：#include<QGridLayout>

        <2>创建栅格布局：QGridLayout* pGridLayout =  new QGridLayout(this);

        <3>栅格布局添加控件：

class Q_WIDGETS_EXPORT QGridLayout : public QLayout
{
    inline void addWidget(QWidget * w){QLayout::addWidget(w);}
    void addWidget(QWidget *, int row, int column, Qt::Alignment);
    void addWidget(QWidget *, int row, int column, int rowSpan, int columnSpan, Qt::Alignment);
    void addLayout(QLayout*,int row,int column,Qt::Alignment = Qt::Alignment());
    void addLayout(QLayout *, int row, int column, int rowSpan, int columnSpan, Qt::Alignment);
};

        <4>栅格设置间隙

        设置水平间隙：pGridLayout->setHorizontalSpacing(10);

        设置垂直间隙： pGridLayout->setVerticalSpacing(10);

2.添加外部资源，图片

首先点击pro文件，打开后新建一个文件夹，将想要的图片复制到该文件当中去。

然后右键点击项目，选择添加新项目。

选择Qt，添加资源文件，选完之后，给资源进行吗，命名resources。

等资源加载完成之后，右键属性，点击添加现有文件。

打开原先创建的资源，添加图片即可。

我们将头像放入QLabel当中，然后将这张图片放入到这张控件当中去：

 //头像
    QLabel* pImageLabel = new QLabel(this);
    //传入图片
    QPixmap pixmap(":/resources/223207055052745475.jpg");
    //设置标签的固定大小
    pImageLabel->setFixedSize(150,150);
    //设置传入相片
    pImageLabel->setPixmap(pixmap);
    //这个函数看起来像是用于设置是否按比例缩放内容的。
    // 参数 bool 是一个布尔值，用于指示是否启用按比例缩放。
    //当参数为 true 时，内容将按比例缩放以适应控件的大小；
   // 当参数为 false 时，内容将拉伸或压缩以填满控件的大小，不考虑比例。

    //这个函数可能是用于图像或者其他类型的内容的显示控件中，比如 QLabel、QPixmap、QImage 等。
    pImageLabel->setScaledContents(true);

注意点1：这里QPixmap是 Qt 中用于处理图像的类之一。它可以加载、显示和操作各种图像文件，如 PNG、JPEG、BMP 等。QPixmap 提供了许多方法来创建、修改和显示图像。这里用到的是QPixmap显示图片的常用方法之一；将 QPixmap 对象显示在窗口中

 QLabel *label = new QLabel(this);
label->setPixmap(pixmap);

注意点2：setScaledContents 是 QLabel 类中的一个方法（按照比例缩放内容），用于设置标签部件是否根据其大小自动缩放其内容。

当 setScaledContents 设置为 true 时，标签部件将根据其大小自动缩放显示的内容，以适应标签部件的大小。这意味着，如果标签部件的大小改变，内容将自动缩放以适应新的大小

setScaledContents 设置为 false（默认值），则图片将按原始大小显示，可能会超出标签部件的大小。

//下面就是要设置，用户名和密码

注意点3：显示提示内容，控件QLineEdit中的方法，这个方法函数的命名也比较直观：setPlaceholderText 中的 "set" 表示设置某个属性，"PlaceholderText" 表示占位文本。因此，这个函数设置部件的占位文本内容。具体用法如下：

QLineEdit *lineEdit = new QLineEdit(this);
lineEdit->setPlaceholderText("请输入用户名");

注意点4:但是QLineEdit中要输入的是一些特定的内容例如密码等机密的东西，我们就要用到特殊的方法函数：

 pPasswordLineEdit->setEchoMode(QLineEdit::Password);

setEchoMode 是 Qt 中一些部件（如 QLineEdit、QTextEdit 等）的方法之一，用于设置部件的回显模式。

回显模式决定了在用户输入文本时如何显示输入内容。常见的回显模式包括：

• Normal: 正常显示用户输入的文本。
• NoEcho: 不显示用户输入的文本，通常用于密码输入等场景。
• Password: 以掩码字符（例如星号或圆点）代替用户输入的文本，用于密码输入场景。
• PasswordEchoOnEdit: 在用户编辑输入时显示明文文本，但在失去焦点后显示掩码字符。

通过 setEchoMode 方法，可以设置部件的回显模式，以满足不同的需求。

这一段总的代码如下：

QLineEdit* pUserNameLineEdit = new QLineEdit(this);
    pUserNameLineEdit->setFixedSize(300,50);
  //是用于设置一个输入框（LineEdit）的占位符文本（Placeholder Text）。
   // 占位符文本是在输入框中显示的灰色文本，通常用于提示用户应该在输入框中输入什么内容。
    pUserNameLineEdit->setPlaceholderText(QStringLiteral("QQ/手机/邮箱"));

    //密码
    QLineEdit* pPasswordLineEdit = new QLineEdit(this);
    //设置固定大小
    pPasswordLineEdit->setFixedSize(300,50);
    //设置提示字符
    pPasswordLineEdit->setPlaceholderText(QStringLiteral("密码"));
    //setEchoMode 是一个用于设置输入框（LineEdit）的显示模式的函数，通常用于密码输入等场景。
    //该函数会根据传入的参数设置输入框的显示方式。
    // 常见的参数包括：
    //QLineEdit::Normal：正常显示输入的文本。
    //QLineEdit::NoEcho：不显示任何输入，常用于密码输入，显示为空。
    //QLineEdit::Password：以密码模式显示输入的文本，通常是显示为圆点或星号。
    //QLineEdit::PasswordEchoOnEdit：在编辑时显示文本，但在失去焦点后以密码模式显示。
    pPasswordLineEdit->setEchoMode(QLineEdit::Password);

//再下面的控件设置就较简单：无非是创建控件再添加属性（大小，文本显示）。

 QPushButton* pForgotButton = new QPushButton(this);
    pForgotButton->setText(QStringLiteral("找回密码"));
    //设置控件大小
    pForgotButton->setFixedWidth(80);

    QCheckBox* pRememberCheckBox = new QCheckBox(this);
    pRememberCheckBox->setText(QStringLiteral("记住密码"));

    QCheckBox* pAutoLoginCheckBox = new QCheckBox(this);
    pAutoLoginCheckBox->setText(QStringLiteral("自动登录"));

    QPushButton* PLoginButton = new QPushButton(this);
    PLoginButton->setText(QStringLiteral("登录"));
    PLoginButton->setFixedHeight(48);

    QPushButton* pRegisterButton = new QPushButton(this);
    pRegisterButton->setText(QStringLiteral("注册账号"));
    pRegisterButton->setFixedHeight(48);

//这些控件全部设置好之后，就可以创建布局了，这里是栅格布局。

在栅格布局之前我们看这个ui界面各个空间的布局，所在行，所在列，占的行数，占的列数。

QGridLayout* pGridLayout = new QGridLayout(this);
    pGridLayout->addWidget(pImageLabel,0,0,3,1,Qt::AlignLeft);//这个图片占3行1列
    pGridLayout->addWidget(pUserNameLineEdit,0,1,1,3);//输入用户账号，占1行占2列，起点（0，1）
    pGridLayout->addWidget(pPasswordLineEdit,1,1,1,3);//输入用户密码，占2行占2列，起点（1，1）
    pGridLayout->addWidget(pForgotButton,2,1,1,1,Qt::AlignLeft|Qt::AlignVCenter);//找回密码，占1行1列，起点（2，1）
    pGridLayout->addWidget(pRememberCheckBox,2,2,1,1,Qt::AlignLeft|Qt::AlignVCenter);//记住密码，占1行1列，起点（2，2）
    pGridLayout->addWidget(pAutoLoginCheckBox,2,3,1,1);//自动登录，占1行1列，起点（2，3）
    pGridLayout->addWidget(PLoginButton,3,1,1,3);//登录，占1行3列，起点（3，1）
    pGridLayout->addWidget(pRegisterButton,4,1,1,3);//注册账号，占1行3列，起点（4，1）

这里要重要介绍的是addWidget函数，addWidget 是 Qt 中布局管理器（例如 QVBoxLayout、QHBoxLayout 等）的方法之一，用于向布局中添加部件（widget）。

布局管理器用于自动管理部件的位置和大小，使得界面在不同平台和窗口大小下能够自动调整和适配。addWidget 方法用于将一个部件添加到布局管理器中，并根据布局管理器的规则进行排列。

举例：

pGridLayout->addWidget(pImageLabel,0,0,3,1,Qt::AlignLeft);

这行代码：

用于添加一个名为 pImageLabel 的部件到某种布局中，并指定了一些布局选项。让我解释一下这些参数的含义：

• pImageLabel: 要添加的部件（widget），在这里是一个名为 pImageLabel 的部件。
• 0, 0: 部件的起始行和起始列。在这里，部件将从布局的第 0 行第 0 列开始。
• 3, 1: 部件的行跨度和列跨度。这意味着部件将跨越 3 行和 1 列。
• Qt::AlignLeft: 部件的对齐方式。在这里，部件将左对齐。

综上所述，这行代码的作用是将名为 pImageLabel 的部件添加到某种布局中，并将其放置在布局的第 0 行第 0 列开始，跨越 3 行 1 列，并左对齐。

//------------------另外我们可以关闭QWidget自带的窗口部件------------------------------------

this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);

这行代码是用于设置窗口的标志位（Window Flags），以改变窗口的外观和行为。让我解释一下这段代码的含义：

• setWindowFlags 是 QWidget 类中的方法，用于设置窗口的标志位。
• Qt::FramelessWindowHint：这个标志用于指示窗口将没有边框，即窗口将是无边框的，不会显示标题栏、边框和窗口按钮（最小化、最大化、关闭按钮等）。
• Qt::WindowMinMaxButtonsHint：这个标志用于指示窗口将显示最小化和最大化按钮，但不显示关闭按钮。

因此，这行代码的作用是将当前窗口设置为无边框，并显示最小化和最大化按钮，但不显示关闭按钮。这种设置常用于自定义窗口样式或实现特定的用户界面设计。