1.2 Qt Creater使用Python开发桌面软件的界面设计

上节中介绍了项目创建流程，本节主要介绍软件界面的设计。

首先我们打开Qt Creater的设计界面，我们可以看到屏幕中间就是需要设计的软件窗体；左侧列表中为控件（软件设计所需要的各种按钮，文本，列表等小组件）；右侧上部分为图层列表，会显示所设计软件的各种控件的名称和类别；右侧下部分为属性表，选中设计的界面中的相应控件后，属性表会显示相应控件的各种属性（如控件的长宽、位置、名称等）。

鼠标选中（单击）设计的界面，我们可以看到设计的软件界面的周围有八个点，分布于四角以及四边的中点位置，拖动右下角点可以对图形界面的长宽同时进行改变，拖动右侧边中点可以对界面的宽度进行改变，拖动底侧边的中点可以对高度进行改变。也可以直接在属性列表当中对高度和宽度值进行改变。同理，如果在界面中添加了其它控件，鼠标选中相应的控件后也会出现8个点，通过拖动8个点可以改变控件的大小。

我们以按钮为例，为软件界面添加一个按钮。
鼠标定位于Qt Creater左侧的控件列表中的“Push Button”上，鼠标左键长按拖动到设计界面的相应位置上，松开左键，即可完成创建。

我们将按钮拖到了要设计的界面中，可以看到按钮显示为“Push Button”。如果想要让按钮显示其它文字，我们可以选中此按钮，在右下角的属性列表当中寻找“text”选项，并将其右侧文本框文字改变，在这里我们改成“确认”，我们可以看到设计界面中的按钮的内容也变成了“确认”。

---

---

现在我们已经了解了界面设计的基本方法，接下来我们设计一个经常用到的登录窗口。

首先我们删除刚才为了演示所创建的按钮，鼠标选中“按钮”---单击右键---选择删除；或者选中“按钮”后，点击键盘上的Del（Delete）按钮。
然后我们在界面上添加“登录”二字，添加文本可以采用“Label”控件，选中控件列表中的“Label”拖动到设计界面上，我们可以看到设计界面上出现了“TextLabel”字样。

选中“TextLabel”字样后，在属性列表中将“text”后的文字改为“登录”

也可以双击“TextLabel”字样，界面中会出现修改框，我们直接在界面上进行修改。

我们可以看到“登录"二字有点太小了，我们可以直接选中它，并在属性列表中找到”font”，展开“font”，更改里面的“点大小”，我们看到其默认大小为“9”，这里我们将其改为“20”，读者可根据自己的喜好更改调整其大小。然后拖动此“登录”的八个边角点对其调整大小，使得文字全部展现出来。

然后再使用“Label”控件在界面上创建两个文本（“账号:”;“密码:”），并分别更改文本为“账号:”与“密码:”。

接下来我们需要创建账号和密码的输入框，我们选用控件列表中的“Line Edit”控件，依次拖动到“账号:”与“密码:”文本的后面，并调整其大小。

然后我们再创建一个“确认”和一个“取消”的按钮，拖动控件列表中的“Push Button”控件到界面的相应位置，更改其名称，调整其大小和位置。

这样我们已经基本完成了登录界面的设计，但是我们发现界面中的文字以及按钮等控件没有居中对齐等，显得比较凌乱。我们可以拖动界面中的各元素进行排版以及调整大小等。

单击Qt Creater左下角的绿色三角形，即可运行此程序。

因为没有代码需要测试，我们也可以只运行此界面而不运行代码，只运行此界面的方法为在菜单栏中选择“工具---Form Editor---预览”。

---

---

下面我们模仿一个软件界面，模仿的软件为Windows11操作系统下自带的计算器的标准界面的简洁模式。

在此计算器软件的界面中可以看到，顶部为数字显示区域，底部为各种按钮。

下面我们开始使用Qt Creater进行界面设计。首先我们用“Label”控件绘制数字显示区域，并调整其各种属性，修改其属性表中的“font”属性，更改其字体字号，并在属性表中查找“aligement”属性，将其“水平的”设置为右对齐。创建大量的按钮，修改按钮字号字体及按钮中的文字并进行按钮的排版。
完成上述工作后，我们可以看到计算器的界面布局已经基本完成。

我们运行此界面（左）并与原软件（右）进行对比，可以看到新设计的界面和原软件界面一个比较明显的区别是按钮颜色不同，接下来，我们需要修改这些按钮的颜色。

选中相应的按钮，鼠标右键单击---选择“改变样式表”，或者在属性中查找“styleSheet”并单击其最右侧的“...”按钮。

样式表窗口即被打开，我们选择添加颜色右侧的下三角号，然后再选择“background-color”。

此时，颜色选取界面即被打开。

我们可以在颜色选取界面选择合适的颜色，也可以通过颜色选取界面中的“拾取屏幕颜色”来拾取颜色。
填充完背景颜色后，我们的设计界面中并没有出现颜色的变化。这时我们可以在属性中将“autoFillBackground”选项开启，设计界面中的控件颜色就会显示出来。

运行此程序，如下图左。

我们可以在上图中看到，颜色虽然调整好了，但是按钮的样式却变成了浮雕式样的正方形，不再是原来的平面圆角矩形。这是因为在没有设置背景颜色时，按钮默认为系统按钮，即作者所使用的windows11操作系统的按钮样式，默认的按钮控件不带有颜色，假如我们给按钮赋予颜色，此按钮便不再是系统按钮，便也没有了windows11按钮的圆角矩形样式。我们可以在“改变样式表”中来进行按钮样式的代码编写，从而调整成自己所需要的按钮样式，本节不再叙述，详情请见后面的章节。

注：对于不同的操作系统，其界面显示的风格也是不同的，我们在进行界面设计时需要提前规划好要适配的系统类型（windows7、windows10、windows11、MacOS、Linux），在设计过程中不断在需要适配的系统中进行测试修改。