目录

一、关键代码

（一）、网格组约束条件

（二）、约束的“条件”

1、坐标

2、尺寸

3、填充（fill）属性

二、网格组布局说明

（一）、源码A

1、源码A说明

2、源码A运行效果

（二）、源码B（源码A基础上添加方法way3、way4）

1、源码B说明

2、源码B的运行效果

（三）、源码C（源码B的基础上添加方法way4）

1、源码C说明

2、源码C的运行效果

（四）、源码C关于fill属性的运行效果

1-1、全填充（BOTH）：

1-2、按钮3（名为：0.0）全填充（BOTH）的运行效果:

2-1、垂直填充（VERTICAL）：

2-2、按钮3（名为：“0.0”）垂直填充（VERTICAL）的运行效果:

3-1、水平填充（HORIZONTAL）：

3-2、按钮3（名为：“0.0”）水平填充（HORIZONTAL）的运行效果:

三、定位日期

---

一、关键代码

（一）、网格组约束条件

        由下代码创建一个网格包约束条件g_0，最后再由g_0分别指定不同的条件，如位置、尺寸，等。

// Grid（网格），Bag（包），Constraints(限制)
GridBagConstraints g_0=new GridBagConstraints();// 创建一个网格包约束条件g_0

（二）、约束的“条件”

        以下为本文用到的网格包约束条件中的“条件”。

1、坐标

        网格（grid）的x，y坐标（gridx、gridy）

        坐标数值由0开始，并未由1开始。坐标的第0行，即为第一行。

g_0.gridx=0;// x坐标1行位置，计算机以0为第一个
g_0.gridy=0;// y坐标1列位置

2、尺寸

        网格（grid）的宽度（width）、高度（height）

        （尺寸数值非零开头，和坐标不同）

g_0.gridwidth=1;// 宽度
g_0.gridheight=2;// 高度

3、填充（fill）属性

        （1）、默认方式为“居中（center）”

        （2）、上下，左右全：BOTH 。小写：both

        （3）、垂直：VERTICAL 。小写：vertical

        （4）、水平：HORIZONTAL 。小写：horizontal

g_3.fill=GridBagConstraints.BOTH;// 按钮填充方式，全全填充
g_3.fill=GridBagConstraints.VERTICAL;// 填充方式，垂直填充
g_3.fill=GridBagConstraints.HORIZONTAL;// 填充方式，水平填充

二、网格组布局说明

        网格组布局，可以更精确的布置窗体内各构建的位置。在一个窗体中使用网格组布局，布置“按钮”“标签”等构件时，可以先引入网格组布局包A，然后再根据自己的需求对A设置好相关的约束条件便可。“约束”内容，比如：坐标、尺寸、填充方式、方位、具体位置等。本文记录的约束内容为：坐标、尺寸和填充方式，其它约束条件下篇博文记录。

（一）、源码A

1、源码A说明

        展示网格组布局中约束条件的效果，先建立一个“窗体”，代码部分看源码A的方法way1，窗体的属性详细内容看way1部分代码。

        在“窗体”中添加3个“按钮”，具体为源码A中的方法way2部分代码，数据坐标分别为（0-0），（1-1），（2-2），（x-y坐标）。由于坐标数值由0开始，则前面的way2的三个坐标分别为（第一行-第一列），（第二行-第二列），（第三行-第三列）。

        源码A如下

/**所想：
    网格组布局
*/

/*
	引入的包，以下的import等等
*/
import java.awt.GridBagConstraints;// Constraints(限制) 
import java.awt.GridBagLayout;//网格包
import java.awt.Container;// 容器
import java.awt.Color;// 颜色

import javax.swing.JFrame; // 窗体
import javax.swing.JButton;// 按钮
import javax.swing.JPanel;// java面板

class Demo{
	JFrame f=new JFrame();// 设置主窗体
	Container c;// 主容器

	/*	
		方法way1
		创建一个新方法way1，设置窗体的规格
		Content(容器），Pane（镶嵌），Grid（网格），Bag（包），Layout(布局)
	*/
	void way1(){
		// Content(容器)，Pane（镶嵌），layout（布局）
		c=f.getContentPane();//容器c镶嵌于窗体中
		c.setLayout(new GridBagLayout());// 容器c建立网格包布局
		f.setSize(1000,800);// 设置窗体宽、高

		// location(位置)，Relative（相对于），括号里为某“组件”参数，为null时窗体在桌面居中显示
		f.setLocationRelativeTo(null);// 窗体在桌面居中显示，null（空值）

		// Default（默认），operation（操作），点击×程序便停止运行
		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	}
	
	/*
		方法way2
		创建一个新方法way2，将3个按钮限制于x，y坐标为1-1,2-2,3-3的布局中
		主要使用:gridx及gridy,网格坐标的意思	
	*/
	void way2(){
		// Grid(网格)，Bag（包），Constraints(限制)
		GridBagConstraints g_0=new GridBagConstraints();// 创建一个网格包约束条件g_0
		g_0.gridx=0;// x坐标1行位置，计算机以0为第一个
		g_0.gridy=0;// y坐标1列位置
		c.add(new JButton("按钮1"),g_0);// 在容器里创建一个“按钮1”，约束条件“g_0”

		GridBagConstraints g_1=new GridBagConstraints();// 约束“g_1”
		g_1.gridx=1;// x坐标2行位置
		g_1.gridy=1;// y坐标2列位置
		c.add(new JButton("按钮2"),g_1);// 容器里加“按钮2”，约束为“g_1”
		
		GridBagConstraints g_2=new GridBagConstraints();//约束“g_2”
		g_2.gridx=2;// x坐标3行位置
		g_2.gridy=2;// y坐标3列位置
		c.add(new JButton("按钮3"),g_2);// 容器里加“按钮3”，约束为“g_2”
	}

	public static void main(String[] args){
		Demo d=new Demo();// 创建一个新类型d
		d.way1();// 对d使用方法way1，创建一个窗体，包括布局参数等
		d.way2();// 对d使用方法way2，容器里的按钮等

		d.f.setVisible(true);// 类型d、窗体可见，为真
	}
}

2、源码A运行效果

（二）、源码B（源码A基础上添加方法way3、way4）

1、源码B说明

        为更直观显示效果，创建一个矩阵，源码B中的方法way3。由多个“按钮”组成的，类似与表格的9行、9列的矩阵，效果由后面源码B运行效果图片看出。

        使用方法way4，显示坐标2-2、3-3、4-4、5-6。坐标（x-y）。具体效果由后面源码B的运行的含有“列”“行”的“按钮”显示。

/**所想：
    网格组布局
*/

/*
	引入的包，以下的import等等
*/
import java.awt.GridBagConstraints;// Constraints(限制) 
import java.awt.GridBagLayout;//网格包
import java.awt.Container;// 容器
import java.awt.Color;// 颜色

import javax.swing.JFrame; // 窗体
import javax.swing.JButton;// 按钮
import javax.swing.JPanel;// java面板

class Demo{
	JFrame f=new JFrame();// 设置主窗体
	Container c;// 主容器

	/*	
		方法way1
		创建一个新方法way1，设置窗体的规格
		Content(容器），Pane（镶嵌），Grid（网格），Bag（包），Layout(布局)
	*/
	void way1(){
		// Content(容器)，Pane（镶嵌），layout（布局）
		c=f.getContentPane();//容器c镶嵌于窗体中
		c.setLayout(new GridBagLayout());// 容器c建立网格包布局
		f.setSize(1000,800);// 设置窗体宽、高

		// location(位置)，Relative（相对于），括号里为某“组件”参数，为null时窗体在桌面居中显示
		f.setLocationRelativeTo(null);// 窗体在桌面居中显示，null（空值）

		// Default（默认），operation（操作），点击×程序便停止运行
		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	}
	
	/*
		方法way2
		创建一个新方法way2，将3个按钮限制于x，y坐标为1-1,2-2,3-3的布局中
		主要使用:gridx及gridy,网格坐标的意思	
	*/
	void way2(){
		// Grid(网格)，Bag（包），Constraints(限制)
		GridBagConstraints g_0=new GridBagConstraints();// 创建一个网格包约束条件g_0
		g_0.gridx=0;// x坐标1行位置，计算机以0为第一个
		g_0.gridy=0;// y坐标1列位置
		c.add(new JButton("按钮1"),g_0);// 在容器里创建一个“按钮1”，约束条件“g_0”

		GridBagConstraints g_1=new GridBagConstraints();// 约束“g_1”
		g_1.gridx=1;// x坐标2行位置
		g_1.gridy=1;// y坐标2列位置
		c.add(new JButton("按钮2"),g_1);// 容器里加“按钮2”，约束为“g_1”
		
		GridBagConstraints g_2=new GridBagConstraints();//约束“g_2”
		g_2.gridx=2;// x坐标3行位置
		g_2.gridy=2;// y坐标3列位置
		c.add(new JButton("按钮3"),g_2);// 容器里加“按钮3”，约束为“g_2”
	}

	/*
		方法way4
		创建三个按钮，按钮名称及x、y轴的位置
		按钮1	2-2
		按钮2	3-3
		按钮3	4-4
		按钮4	5-6
	*/
	void way4(){
		GridBagConstraints g_1=new GridBagConstraints();// 创建一个网格包约束条件g_1
		g_1.gridx=1;// x坐标第2行，0开始
		g_1.gridy=1;// y坐标第2列
		c.add(new JButton("按钮1，坐标2-2"),g_1);// 容器c里添加“按钮1”，约束为“g_1”

		GridBagConstraints g_2=new GridBagConstraints();// 创建一个网格包约束条件g_2
		g_2.gridx=2;// x坐标第3行，0开始
		g_2.gridy=2;// y坐标第3列
		c.add(new JButton("按钮2，坐标3-3"),g_2);// 容器c里添加“按钮2”，约束为“g_2”

		GridBagConstraints g_3=new GridBagConstraints();// 创建一个网格包约束条件g_3
		g_3.gridx=3;// x坐标第4行，0开始数
		g_3.gridy=3;// y坐标第4列
		c.add(new JButton("按钮3，坐标4-4"),g_3);// 容器c里添加“按钮3”，约束为“g_4”

		GridBagConstraints g_4=new GridBagConstraints();// 创建一个网格包约束条件g_4
		g_4.gridx=4;// x坐标5行，0开始数
		g_4.gridy=5;// y坐标6列
		c.add(new JButton("按钮4，坐标5-6"),g_4);// 容器c里添加“按钮4”，约束为“g_4”
	}

	/*
		方法way3
		创建一个方法way3，创建一个按钮矩阵，类似表格，用以
	对照后面放进去的其他“限制”按钮,设置一个行数与列数相同
	的矩阵，以供参考。设置行数列数不对等显示按钮会有些按钮显示
	错位。
	*/
	void way3(){
		for(int i_0=0;i_0<9;i_0++){
			// Grid（网格），Bag（包），Constraints(限制)
			GridBagConstraints g_0=new GridBagConstraints();// 创建一个网格包约束条件g_0
			g_0.gridx=i_0;
			g_0.gridy=0;// y轴第一列
			c.add(new JButton(i_0+1+"行"),g_0);// 添加i+1个按钮，横向排序
		}
		for(int i_1=1;i_1<9;i_1++){
			GridBagConstraints g_1=new GridBagConstraints();// 说明参考上
			g_1.gridx=0;
			g_1.gridy=i_1;// x轴第一列
			c.add(new JButton(i_1+1+"列"),g_1);
		}
	}


	public static void main(String[] args){
		Demo d=new Demo();// 创建一个新类型d
		d.way1();// 对d使用方法way1，创建一个窗体，包括布局参数等
		//d.way2();// 对d使用方法way2，容器里的按钮等
		d.way3();// 方法way3，按钮矩阵,参照用
		d.way4();// 方法way4,坐标分别为2-2,3-3,4-4的“按钮”

		d.f.setVisible(true);// 类型d、窗体可见，为真
	}
}

2、源码B的运行效果

（三）、源码C（源码B的基础上添加方法way4）

1、源码C说明

        源码C方法way4为三个“按钮”相对于方法way2多添加了构件的“尺寸”约束条件。具体可观察下方的源码C的运行效果。按钮1和按钮2的坐标、尺寸的约束数据作为按钮的名称。各使用矩形框（a、b、c、d、e、f）框选了按钮所对应的坐标及尺寸。

       为更直观看到效果，单独对按钮3（名称：“0.0”）另外添加了一个红色的“标签”背景，以方便看出按钮3（名称：“0.0”）在后面fill属性约束条件下的表现效果。 对于按钮3名称选择为“0.0”，为更直观的显示，按钮的名称太长容易影响尺寸、坐标的判断。由源码C方法way4中的数据按钮3（名为：“0.0”）的坐标为4-4，尺寸为2-3。源码C中的按钮3（“0.0”）默认状态为上下左右居中。对于按钮3的fill属性（水平填充、垂直填充、上下左右填充）的相关代码已写于源码C方法way4中，暂处于注释状态，用于后面说明使用。

/**所想：
    网格组布局
*/

/*
	引入的包，以下的import等等
*/
import java.awt.GridBagConstraints;// Constraints(限制) 
import java.awt.GridBagLayout;//网格包
import java.awt.Container;// 容器
import java.awt.Color;// 颜色

import javax.swing.JFrame; // 窗体
import javax.swing.JButton;// 按钮
import javax.swing.JPanel;// java面板

class Demo{
	JFrame f=new JFrame();// 设置主窗体
	Container c;// 主容器

	/*	
		方法way1
		创建一个新方法way1，设置窗体的规格
		Content(容器），Pane（镶嵌），Grid（网格），Bag（包），Layout(布局)
	*/
	void way1(){
		// Content(容器)，Pane（镶嵌），layout（布局）
		c=f.getContentPane();//容器c镶嵌于窗体中
		c.setLayout(new GridBagLayout());// 容器c建立网格包布局
		f.setSize(1000,800);// 设置窗体宽、高

		// location(位置)，Relative（相对于），括号里为某“组件”参数，为null时窗体在桌面居中显示
		f.setLocationRelativeTo(null);// 窗体在桌面居中显示，null（空值）

		// Default（默认），operation（操作），点击×程序便停止运行
		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	}
	
	/*
		方法way2
		创建一个新方法way2，将3个按钮限制于x，y坐标为1-1,2-2,3-3的布局中
		主要使用:gridx及gridy,网格坐标的意思	
	*/
	void way2(){
		// Grid(网格)，Bag（包），Constraints(限制)
		GridBagConstraints g_0=new GridBagConstraints();// 创建一个网格包约束条件g_0
		g_0.gridx=0;// x坐标1行位置，计算机以0为第一个
		g_0.gridy=0;// y坐标1列位置
		c.add(new JButton("按钮1"),g_0);// 在容器里创建一个“按钮1”，约束条件“g_0”

		GridBagConstraints g_1=new GridBagConstraints();// 约束“g_1”
		g_1.gridx=1;// x坐标2行位置
		g_1.gridy=1;// y坐标2列位置
		c.add(new JButton("按钮2"),g_1);// 容器里加“按钮2”，约束为“g_1”
		
		GridBagConstraints g_2=new GridBagConstraints();//约束“g_2”
		g_2.gridx=2;// x坐标3行位置
		g_2.gridy=2;// y坐标3列位置
		c.add(new JButton("按钮3"),g_2);// 容器里加“按钮3”，约束为“g_2”
	}

	/*
		方法way4
		创建三个按钮，按钮名称及x、y轴的位置
		按钮1	2-2
		按钮2	3-3
		按钮3	4-4
		按钮4	5-6
	*/
	void way4(){
		GridBagConstraints g_1=new GridBagConstraints();// 创建一个网格包约束条件g_1
		g_1.gridx=1;// x坐标第2行，0开始
		g_1.gridy=1;// y坐标第2列
		c.add(new JButton("按钮1，坐标2-2"),g_1);// 容器c里添加“按钮1”，约束为“g_1”

		GridBagConstraints g_2=new GridBagConstraints();// 创建一个网格包约束条件g_2
		g_2.gridx=2;// x坐标第3行，0开始
		g_2.gridy=2;// y坐标第3列
		c.add(new JButton("按钮2，坐标3-3"),g_2);// 容器c里添加“按钮2”，约束为“g_2”

		GridBagConstraints g_3=new GridBagConstraints();// 创建一个网格包约束条件g_3
		g_3.gridx=3;// x坐标第4行，0开始数
		g_3.gridy=3;// y坐标第4列
		c.add(new JButton("按钮3，坐标4-4"),g_3);// 容器c里添加“按钮3”，约束为“g_4”

		GridBagConstraints g_4=new GridBagConstraints();// 创建一个网格包约束条件g_4
		g_4.gridx=4;// x坐标5行，0开始数
		g_4.gridy=5;// y坐标6列
		c.add(new JButton("按钮4，坐标5-6"),g_4);// 容器c里添加“按钮4”，约束为“g_4”
	}

	/*
		方法way3
		创建一个方法way3，创建一个按钮矩阵，类似表格，用以
	对照后面放进去的其他“限制”按钮,设置一个行数与列数相同
	的矩阵，以供参考。设置行数列数不对等显示按钮会有些按钮显示
	错位。
	*/
	void way3(){
		for(int i_0=0;i_0<9;i_0++){
			// Grid（网格），Bag（包），Constraints(限制)
			GridBagConstraints g_0=new GridBagConstraints();// 创建一个网格包约束条件g_0
			g_0.gridx=i_0;
			g_0.gridy=0;// y轴第一列
			c.add(new JButton(i_0+1+"行"),g_0);// 添加i+1个按钮，横向排序
		}
		for(int i_1=1;i_1<9;i_1++){
			GridBagConstraints g_1=new GridBagConstraints();// 说明参考上
			g_1.gridx=0;
			g_1.gridy=i_1;// x轴第一列
			c.add(new JButton(i_1+1+"列"),g_1);
		}
	}

	/*
		方法way05
		按钮 添加约束条件，指定坐标、尺寸
		填充（fill）属性，全填充（BOTH），垂直（vertical）填充，水平（horizontal）填充
		g_3添加一面板，以对照观察用
	*/
	void way5(){
		GridBagConstraints g_1=new GridBagConstraints();// 创建一个网格包约束条件g_1
		g_1.gridx=1;// x坐标
		g_1.gridy=1;// y坐标
		g_1.gridwidth=1;// 宽度
		g_1.gridheight=2;// 高度
		//g_1.fill=GridBagConstraints.BOTH;// 按钮填充方式，全全填充
		c.add(new JButton("按钮1,坐标1-1，宽1高2"),g_1);// 添加按钮，约束对象g_1

		GridBagConstraints g_2=new GridBagConstraints();// 创建一个网格包约束条件g_2
		g_2.gridx=3;// x坐标
		g_2.gridy=1;// y坐标
		g_2.gridwidth=3;// 宽度
		g_2.gridheight=1;// 高度
		//g_2.fill=GridBagConstraints.BOTH;// 按钮填充方式，全全填充
		c.add(new JButton("按钮2,坐标3-1，宽3高1"),g_2);// 容器c里添加按钮，约束为g_2

		GridBagConstraints g_3=new GridBagConstraints();// 创建一个网格包约束条件g_3
		g_3.gridx=4;// x坐标
		g_3.gridy=4;// y坐标
		g_3.gridwidth=2;// 宽度
		g_3.gridheight=3;// 高度
		//g_3.fill=GridBagConstraints.BOTH;// 按钮填充方式，全全填充
		//g_3.fill=GridBagConstraints.VERTICAL;// 填充方式，垂直填充
		//g_3.fill=GridBagConstraints.HORIZONTAL;// 填充方式，水平填充
		c.add(new JButton("0.0"),g_3);// 容器c里添加按钮3，约束为g_3

		g_3.fill=GridBagConstraints.BOTH;// 给g_3约束条件，全填充
		JPanel p_1=new JPanel();// 新建面板（Panel），需要在前面添加import javax.swing.JPanel;
		p_1.setBackground(Color.red);// 面板p_1的背景（颜色），需要在前面添加import java.awt.Color;
		c.add(p_1,g_3);// 容器c里添加面板p_1,约束条件为g_3
	}

	public static void main(String[] args){
		Demo d=new Demo();// 创建一个新类型d
		d.way1();// 对d使用方法way1，创建一个窗体，包括布局参数等
		//d.way2();// 对d使用方法way2，容器里的按钮等
		d.way3();// 方法way3，按钮矩阵,参照用
		//d.way4();// 方法way4,坐标分别为2-2,3-3,4-4的“按钮”

		d.way5();// 对d使用方法way5，在方法way4的基础上添加了尺寸宽和高

		d.f.setVisible(true);// 类型d、窗体可见，为真
	}
}

2、源码C的运行效果

（四）、源码C关于fill属性的运行效果

1-1、全填充（BOTH）：

        将源码C的方法way4中显示按钮3（名称：“0.0”）的上下左右填充（全填充）效果。

        关键词：BOTH

        将源码C中方法way4中的的如下代码

//g_3.fill=GridBagConstraints.BOTH;// 按钮填充方式，全全填充

        取消注释为如下

g_3.fill=GridBagConstraints.BOTH;// 按钮填充方式，全全填充

1-2、按钮3（名为：0.0）全填充（BOTH）的运行效果:

2-1、垂直填充（VERTICAL）：

        与上1-1同理，将源码C的方法way4中显示按钮3（名称：“0.0”）的垂直填充效果。

        关键词：VERTICAL

        将源码C中方法way4中的的如下代码

//g_3.fill=GridBagConstraints.VERTICAL;// 填充方式，垂直填充

        取消注释为如下

g_3.fill=GridBagConstraints.VERTICAL;// 填充方式，垂直填充

2-2、按钮3（名为：“0.0”）垂直填充（VERTICAL）的运行效果:

3-1、水平填充（HORIZONTAL）：

        与上1-1同理，将源码C的方法way4中显示按钮3（名称：“0.0”）的水平填充效果。

        关键词：HORIZONTAL

        将源码C中方法way4中的的如下代码

//g_3.fill=GridBagConstraints.HORIZONTAL;// 填充方式，水平填充

        取消注释为如下

g_3.fill=GridBagConstraints.HORIZONTAL;// 填充方式，水平填充

3-2、按钮3（名为：“0.0”）水平填充（HORIZONTAL）的运行效果:

三、定位日期

2022.3.8；23:16；因时间问题未编写完，第二天继续

2022.3.9；21:29

一、水平/垂直/网格布局简介

1. 水平布局：在水平方向上排列控件
2. 垂直布局：在垂直方向上排列控件
3. 网格布局：多行多列

二、水平/垂直/网格布局实现

1）水平布局【QHBoxLayout *layout = new QHBoxLayout;】

    QWidget *window = new QWidget;
    QPushButton *button1=new QPushButton("OK");
    QPushButton *button2=new QPushButton("cancel");
    window->setWindowTitle("Enter Your Name");
    QHBoxLayout *layout = new QHBoxLayout;
    layout->addWidget(button1);
    layout->addWidget(button2);
    window->setLayout(layout);
    window->show();

2）垂直布局【QVBoxLayout *layout = new QVBoxLayout;】

    QWidget *window = new QWidget;
    QPushButton *button1=new QPushButton("OK");
    QPushButton *button2=new QPushButton("cancel");
    window->setWindowTitle("Enter Your Name");
    QVBoxLayout *layout = new QVBoxLayout;
    layout->addWidget(button1);
    layout->addWidget(button2);
    window->setLayout(layout);
    window->show();

 

1）设置外边距：

①setMargin(int)
②setContentsMargins(int left, int top, int right, int bottom);
③setContentsMargins(const QMargins &margins)
以上setMargin设置的外边距是相同的；setContentsMargins可以将左、上、右、下的外边距设置为不同的值。

2）设置间距：setSpacing(int)

3）添加了一个伸缩空间：addStretch() 

4）拉伸按钮宽度：setStretchFactor(btn, 2);

5）添加控件：addWidget(QWidget *, int stretch = 0, Qt::Alignment alignment = 0)【默认的，我们添加控件至水平布局中且垂直方向居中对齐。】

网格布局基本原理：是把窗口划分为若干个网状的单元格，每个子部件被放置于一个或多个单元格之中，各单元格的大小可由一行或列中单元格的数量来确定，若子部件的大小(由sizeHint()确定)小于单元格，则可以设置该子部件位于单元格的什么位置，还可设置该子部件是否可以拉伸以填满该单元格等等。

 

 网格布局登录界面效果图：

 

源码如下：

    this->setWindowTitle("登录界面");

    //设置窗体图标
    QPixmap pix;
    pix.load(":/IQY/win_icon.png");
    qreal w=pix.width();
    qreal h=pix.height();
    //给定的矩形内保持宽高的比值不变
    pix=pix.scaled(w*0.5,h*0.5,Qt::KeepAspectRatio);
    this->setWindowIcon(pix);


    //创建控件
    imgLab = new QLabel(this);
    nameEdit = new QLineEdit(this);
    pwdEdit = new QLineEdit(this);
    rememberCheckBox = new QCheckBox(this);
    autoLoginCheckBox = new QCheckBox(this);
    loginBtn = new QPushButton(this);
    registerBtn = new QPushButton(this);
    forgotBtn = new QPushButton(this);
    loginBtn->setFixedHeight(30);
    nameEdit->setFixedWidth(200);

    // 设置logo
    QPixmap pixmap2(":/IQY/win_icon.png");
    imgLab->setFixedSize(90, 90);
    imgLab->setPixmap(pixmap2);
    imgLab->setScaledContents(true);

    // 文本
    nameEdit->setPlaceholderText(QStringLiteral("爱奇艺账号/手机号"));
    pwdEdit->setPlaceholderText(QStringLiteral("密码"));
    pwdEdit->setEchoMode(QLineEdit::Password);
    rememberCheckBox->setText(QStringLiteral("记住密码"));
    autoLoginCheckBox->setText(QStringLiteral("自动登录"));
    loginBtn->setText(QStringLiteral("登录"));
    registerBtn->setText(QStringLiteral("注册账号"));
    forgotBtn->setText(QStringLiteral("找回密码"));

    QGridLayout *pLayout = new QGridLayout();
    // logo 第0行，第0列开始，占3行1列
    pLayout->addWidget(imgLab, 0, 0, 3, 1);
    // 用户名输入框 第0行，第1列开始，占1行2列
    pLayout->addWidget(nameEdit, 0, 1, 1, 2);
    pLayout->addWidget(registerBtn, 0, 4);
    // 密码输入框 第1行，第1列开始，占1行2列
    pLayout->addWidget(pwdEdit, 1, 1, 1, 2);
    pLayout->addWidget(forgotBtn, 1, 4);
    // 记住密码 第2行，第1列开始，占1行1列 水平居左 垂直居中
    pLayout->addWidget(rememberCheckBox, 2, 1, 1, 1, Qt::AlignLeft | Qt::AlignVCenter);
    // 自动登录 第2行，第2列开始，占1行1列 水平居右 垂直居中
    pLayout->addWidget(autoLoginCheckBox, 2, 2, 1, 1, Qt::AlignRight | Qt::AlignVCenter);
    // 登录按钮 第3行，第1列开始，占1行2列
    pLayout->addWidget(loginBtn, 3, 1, 1, 2);
    // 设置水平间距
    pLayout->setHorizontalSpacing(20);
    // 设置垂直间距
    pLayout->setVerticalSpacing(20);
    // 设置外间距
    pLayout->setContentsMargins(80, 80, 80, 80);
    setLayout(pLayout);

    //槽函数
    connect(loginBtn,SIGNAL(clicked(bool)),this,SLOT(GotoLogin()));
    connect(registerBtn,SIGNAL(clicked(bool)),this,SLOT(GotoRegist()));

参考文献：

Qt 之格栅布局（QGridLayout）_君莫笑的博客-CSDN博客_qt网格布局

 

GridLayout（网格布局）

​ GridLayout 布局管理器将容器分割成纵横线分隔的网格 ， 每个网格所占的区域大小相同。当向使用 GridLayout 布局管理器的容器中添加组件时， 默认从左向右、 从上向下依次添加到每个网格中 。 与 FlowLayout不同的是，放置在 GridLayout 布局管理器中的各组件的大小由组件所处的区域决定(每 个组件将自动占满整个区域) 。

构造方法	方法功能
GridLayout(int rows,in t cols)	采用指定的行数、列数，以及默认的横向间距、纵向间距将容器 分割成多个网格
GridLayout(int rows,int cols,int hgap,int vgap)	采用指定 的行数、列 数 ，以及指定的横向间距 、 纵向间距将容器分割成多个网格。

案例：

​ 使用Frame+Panel，配合FlowLayout和GridLayout完成一个计算器效果。

​

代码：

import java.awt.*;

public class GridLayoutDemo{

    public static void main(String[] args) {

        //1.创建Frame对象，并且标题设置为计算器
        Frame frame = new Frame("计算器");

        //2.创建一个Panel对象，并且往Panel中放置一个TextField组件
        Panel p1 = new Panel();
        p1.add(new TextField(30));

        //3.把上述的Panel放入到Frame的北侧区域
        frame.add(p1,BorderLayout.NORTH);

        //4.创建一个Panel对象，并且设置其布局管理器为GridLayout
        Panel p2 = new Panel();
        p2.setLayout(new GridLayout(3,5,4,4));

        //5.往上述Panel中，放置15个按钮，内容依次是：0,1,2,3,4,5,6，7,8,9，+，-，*，/,.
        for (int i = 0; i < 10; i++) {
            p2.add(new Button(i+""));
        }
        p2.add(new Button("+"));
        p2.add(new Button("-"));
        p2.add(new Button("*"));
        p2.add(new Button("/"));
        p2.add(new Button("."));

        //6.把上述Panel添加到Frame的中间区域中国
        frame.add(p2);
        //7.设置Frame为最佳大小
        frame.pack();

        //8.设置Frame可见
        frame.setVisible(true);

    }
}

GridBagLayout

GridBagLayout 布局管理器的功能最强大 ， 但也最复杂，与 GridLayout 布局管理器不同的是， 在GridBagLayout 布局管理器中，一个组件可以跨越一个或多个网格 ， 并可以设置各网格的大小互不相同，从而增加了布局的灵活性 。 当窗口的大小发生变化时 ， GridBagLayout 布局管理器也可以准确地控制窗口各部分的拉伸 。

由于在GridBagLayout 布局中，每个组件可以占用多个网格，此时，我们往容器中添加组件的时候，就需要具体的控制每个组件占用多少个网格，java提供的GridBagConstaints类，与特定的组件绑定，可以完成具体大小和跨越性的设置。

GridBagConstraints API:

成员变量	含义
gridx	设置受该对象控制的GUI组件左上角所在网格的横向索引
gridy	设置受该对象控制的GUI组件左上角所在网格的纵向索引
gridwidth	设置受该对象控制的 GUI 组件横向跨越多少个网格,如果属性值为 GridBagContraints.REMAIND,则表明当前组件是横向最后一个组件，如果属性值为GridBagConstraints.RELATIVE,表明当前组件是横向倒数第二个组件。
gridheight	设置受该对象控制的 GUI 组件纵向跨越多少个网格，如果属性值为 GridBagContraints.REMAIND,则表明当前组件是纵向最后一个组件，如果属性值为GridBagConstraints.RELATIVE,表明当前组件是纵向倒数第二个组件。
fill	当"显示区域"大于"组件"的时候,如何调整组件 ： GridBagConstraints.NONE : GUI 组件不扩大 GridBagConstraints.HORIZONTAL: GUI 组件水平扩大 以 占据空白区域 GridBagConstraints.VERTICAL: GUI 组件垂直扩大以占据空白区域 GridBagConstraints.BOTH: GUI 组件水平 、 垂直同时扩大以占据空白区域.
ipadx	设置受该对象控制的 GUI 组件横向内部填充的大小，即 在该组件最小尺寸的基础上还需要增大多少.
ipady	设置受该对象控制的 GUI 组件纵向内部填充的大小，即 在该组件最小尺寸的基础上还需要增大多少.
insets	设置受该对象控制 的 GUI 组件的 外部填充的大小 ， 即该组件边界和显示区 域边界之间的 距离 .
weightx	设置受该对象控制 的 GUI 组件占据多余空间的水平比例， 假设某个容器 的水平线上包括三个 GUI 组件， 它们的水平增加比例分别是 1 、 2 、 3 ， 但容器宽度增加 60 像素 时，则第一个组件宽度增加 10 像素 ， 第二个组件宽度增加 20 像素，第三个组件宽度增加 30 像 素。 如 果其增 加比例为 0 ， 则 表示不会增加 。
weighty	设置受该对象控制 的 GUI 组件占据多余空间的垂直比例
anchor	设置受该对象控制 的 GUI 组件在其显示区域中的定位方式: GridBagConstraints .CENTER (中 间 ) GridBagConstraints.NORTH (上中 ) GridBagConstraints.NORTHWEST (左上角) GridBagConstraints.NORTHEAST (右上角) GridBagConstraints.SOUTH (下中) GridBagConstraints.SOUTHEAST (右下角) GridBagConstraints.SOUTHWEST (左下角) GridBagConstraints.EAST (右中) GridBagConstraints.WEST (左中)

GridBagLayout使用步骤：

1.创建GridBagLaout布局管理器对象，并给容器设置该布局管理器对象；

2.创建GridBagConstraints对象，并设置该对象的控制属性：

	gridx: 用于指定组件在网格中所处的横向索引；

	gridy: 用于执行组件在网格中所处的纵向索引；

	gridwidth: 用于指定组件横向跨越多少个网格；

	gridheight: 用于指定组件纵向跨越多少个网格；

3.调用GridBagLayout对象的setConstraints(Component c,GridBagConstraints gbc )方法，把即将要添加到容器中的组件c和GridBagConstraints对象关联起来；

4. 把组件添加到容器中；

案例：

​ 使用Frame容器，设置GridBagLayout布局管理器，实现下图中的效果：

​

演示代码：

import java.awt.*;

public class GridBagLayoutDemo {

    public static void main(String[] args) {
        //1.创建Frame对象
        Frame frame = new Frame("这里是GridBagLayout测试");

        //2.创建GridBagLayout对象
        GridBagLayout gbl = new GridBagLayout();

        //3.把Frame对象的布局管理器设置为GridBagLayout
        frame.setLayout(gbl);

        //4.创建GridBagConstraints对象
        GridBagConstraints gbc = new GridBagConstraints();

        //5.创建容量为10的Button数组
        Button[] bs = new Button[10];

        //6.遍历数组，初始化每一个Button
        for (int i = 0; i < bs.length; i++) {
            bs[i] = new Button("按钮"+(i+1));
        }

        //7.设置所有的GridBagConstraints对象的fill属性为GridBagConstraints.BOTH,当有空白区域时，组件自动扩大占满空白区域
        gbc.fill=GridBagConstraints.BOTH;

        //8.设置GridBagConstraints对象的weightx设置为1,表示横向扩展比例为1
        gbc.weightx=1;

        //9.往frame中添加数组中的前3个Button
        addComponent(frame,bs[0],gbl,gbc);
        addComponent(frame,bs[1],gbl,gbc);
        addComponent(frame,bs[2],gbl,gbc);

        //10.把GridBagConstraints的gridwidth设置为GridBagConstraints.REMAINDER,则表明当前组件是横向最后一个组件
        gbc.gridwidth=GridBagConstraints.REMAINDER;

        //11.把button数组中第四个按钮添加到frame中
        addComponent(frame,bs[3],gbl,gbc);


        //12.把GridBagConstraints的weighty设置为1，表示纵向扩展比例为1
        gbc.weighty=1;

        //13.把button数组中第5个按钮添加到frame中
        addComponent(frame,bs[4],gbl,gbc);

        //14.把GridBagConstaints的gridheight和gridwidth设置为2，表示纵向和横向会占用两个网格
        gbc.gridheight=2;
        gbc.gridwidth=2;

        //15.把button数组中第6个按钮添加到frame中
        addComponent(frame,bs[5],gbl,gbc);

        //16.把GridBagConstaints的gridheight和gridwidth设置为1，表示纵向会占用1个网格
        gbc.gridwidth=1;
        gbc.gridheight=1;
        //17.把button数组中第7个按钮添加到frame中
        addComponent(frame,bs[6],gbl,gbc);

        //18.把GridBagConstraints的gridwidth设置为GridBagConstraints.REMAINDER,则表明当前组件是横向最后一个组件
        gbc.gridwidth=GridBagConstraints.REMAINDER;

        //19.把button数组中第8个按钮添加到frame中
        addComponent(frame,bs[7],gbl,gbc);

        //20.把GridBagConstaints的gridwidth设置为1，表示纵向会占用1个网格
        gbc.gridwidth=1;

        //21.把button数组中第9、10个按钮添加到frame中
        addComponent(frame,bs[8],gbl,gbc);
        addComponent(frame,bs[9],gbl,gbc);

        //22.设置frame为最佳大小
        frame.pack();

        //23.设置frame可见
        frame.setVisible(true);
    }

    public static void addComponent(Container container,Component c,GridBagLayout gridBagLayout,GridBagConstraints gridBagConstraints){
        gridBagLayout.setConstraints(c,gridBagConstraints);
        container.add(c);
    }
}