一.创建项目打开Qt Creator点击右上角创建项目打开后选择Application(Qt)“和Qt Widget Application”选好后点击右下角选择进入下一页面在这一页面将填写项目名称和选择你的保存路径这里项目名称不要用中文名和空格使用英文和下划线的组合填写完毕后点击下一步在构建系统选择“qmake”就可以了进入下一页在这里可以自定义你的头文件源文件的名称。根据需求改我这里就不改了下面的Generate form要勾选上这个就是我们会用到的ui模块后面的直接一路点击下一步然后完成就创建好了进入项目编辑后我们可以在左侧看到分类每个类型的意思在之前的文章整理过可以到我主页查找这时我们直接点击运行会弹出一个页面这个页面就是我们将要编辑的目标页面终止运行我们点击左侧的界面文件打开“mainwindow.ui”,我们会看到这个界面我们把鼠标指针移动到右侧带有“请在这里输入”的标签的菜单栏右键点击移除菜单栏。这个对于我们的登录界面的搭建没有影响。二、编辑页面接下来就要正式开始搭建页面了这是我们要搭建的登录页面的目标布局1.调整页面大小第一步我们先调整页面大小当页面过大整个登录界面会显得非常不和谐因此合适的页面大小非常重要并且也有助于后续我们调整控件分布在右侧属性编辑器在这里可以调整页面的最大和最小尺寸这里我填入的为400*250你可以根据自己的喜好填写。当我们再次点击运行就会发现页面尺寸变成了我们填写的大小。你会发现当我们鼠标指针移动到边框的时候是无法改变页面大小的因为我们在编辑的时候已经固定了最大和最小尺寸。2.项目格局分布规划我们的登陆页面分为上中下三个部分分别是“标题”、“信息填写”、“按钮”。我们在分布这三个布局的时候就会用到我们的“容器控件”。在左侧的控件类型中找到Containners,这里面就是我们作业分布时常用到的容器控件。在这里我们选择“Widget”将他拖入到我们右侧的区域选择Widget的原因是因为这个控件只有收纳分区的作用并且没有边框非常符合我们的需求。这里我们拖三个Widget到右侧然后左键点击选中“Mainwindow”或者再最右侧点击“Mainwindow”对象然后选择“纵向排布”这时你就会发现的拖入的Widget自动纵向排列好了我们就完美的把页面分为三个部分了这样我们在调整任意一个部分中的控件时都不会影响其他部分为了更好的分清楚板块我们也可以在右侧更改控件的名称在这个地方双击我们要更改的控件就可以更改我们想要的名称例如标题部分Widget_title信息填入部分Wiget_entry按钮部分:Widget_btn注这里依然是使用英文字母加下划线的组合不要使用中文和空格3.内容1标题部分标题部分属于我们用户不可以更改的部分并且要有信息显示的功能因此这里我们在左侧的Display Widget中选择Label控件拖入到右侧Widget_title部分会是这样的效果此时只是将控件填了进去我们还要进行具体调整一.让标题填满容器选中Widget_title控件在前面我们选择纵向排列同样的地方我们点击水平布局然后右键“TextLable”将鼠标指针移动到“布局对齐”选择“水平居中”。然后再次右键“TxetLab”选择更改格式文本将内容更改为“学生信息管理系统”更改字号为24号字体加粗。ctrls保存最后就会是这样的效果这样我们的标题部分就处理完毕了2信息填入部分在该部分我们要再分类有“姓名”、“姓名填写”、“密码”、“密码填写”。根据生活经验在我们日常使用app的时候登录界面分为用户可填写和不可填写的部分可填写部分我们就用“Line_edit”控件不可填写的为“Label”控件同时为了保证布局不被打乱我们要将同一类型的再装到一个容器内一。再拖入两个”Widget“到”Widget-entry“中注意方法一拖入的第二个要放在第一个的下面拖入的时候找到一根蓝线方法二拖到最右边对象拖到对应的父类这样”Widget_entry“里面就会再分出两个部分了此时我们就可以开始拖入我们需要的控件了我们把上下两半部分分别分成姓名和密码两个部分都分别拖入一个”Label“和”Line_edit“,两个容器都进行水平布局再对”Label“的文本进行更改效果如下接下来我们将在填入框内创建提示提示用户填入什么。左键选中要修改的填入框在右边的属性编辑器部分找到”placehoderText“。这个项目的功能就是可以在填入框内生成一个基本信息。我们点击”placeholderText“右侧的空白处写入”请输入姓名“。下半部分的同理写入”请输入密码“这就是最终效果。3按钮部分在该部分我们分为两个按钮分别是”登录“和”退出“。按钮我们就在控件盒子中的”Button“找到PushButton我们拖入两个PushButton到”Widget_btn“依然是选择水平布局。然后更改按钮的文本内容双击按钮即可更改由于现在只是页面搭建没有按钮需求因此按钮没有绑定信号槽此时的按钮没有任何作用更改完毕后当我们点击运行是这个效果此时你会发现左上角的页面图标和”MainWindow“有一点丑接下来我们就要更改这里4程序图标和标题更改左上角的图标我们要新创建一个文件回到编辑右键我们的主文件选择添加新文件。按照图片中选择文件名写”image“就可以了然后完成此时左边就会出现一个此时我们打开保存我们该项目的文件夹在里面新建一个同名文件夹然后把我们需要的图片放入到该文件夹内注意只能使用.jpg或.png的格式并且图片的名称也不能包含中文和空格再回到Qt点击”image“,点击添加前缀Prefix可删可不删只是个名字我一般都是删掉。然后就可以添加文件了添加后按一下ctrlS保存一下看看右侧是否添加成功我们回到ui界面左键选中父类”MainWindow“,然后在属性编辑器找到这两栏上面的”WindowTitle“,就是页面左上角的标题Icon就是左上角的图标我们将”Title”改为“欢迎来到学生管理系统”然后点击“Icon”左边有一个向下的小箭头点击再点击选择资源就能选择我们添加进去的图标了最后我们点击运行最终效果就是这样4.布局调整1三容器占比如果你觉得按钮部分占的有点多了或者信息填入部分占的有点少了可以通过更改容器占比进行调整我们左键选中“centralwidget”,在属性编辑器找到“layoutStretch”这个就代表着你的容器的占比如果你想信息填入多一点按钮部分小一点就可以改为“2,2,1”注意这里要用英文输入法其他的控件类型占用比例调整也是同理。以上就是本次页面搭建的教程