准备工作

打开安装好的Qt Creator，新建一个Qt widget项目，运行一下不报错，确认编译器配置成功。

控件介绍

界面设计窗口可以通过拖拽轻松添加控件，下面列举即将用到的所有控件：

• Label ：标签，普遍用来显示文字/图片；
• PushButton ：较为常用的普通按钮；
• TextEdit ：富文本编辑框；

布局介绍

• QHBoxLayout ：水平显示布局，所有在其上面摆放的控件只能水平排列下去；
• QVBoxLayout ：垂直显示布局，所有在其上面摆放的控件只能垂直排列下去；
• QGridLayout ：格子显示布局，可以按照表格的形式显示布局；

合理的布局有利于创建自动适配大小的窗体，例如避免下面这个情形的尴尬：（窗体大小调整之后控件大小和位置并没自动适配）

功能逻辑

• 数字键 ：点击之后输入框显示相应数字；
• 运算键 ：点击之后输入框现实相应运算符，并切割操作数，存储到变量；
• 等号按键 ：点击之后输入框现实等号，切割操作数，完成运算，显示结果；
• 其它功能键：例如清空，退格键……
  

界面设计

布局设计

• 添加控件：先拉过来一个QGridLayout，一个个把控件填进去。（技巧：按钮比较多，复制粘贴走起来）；
• 整体布局： 选中MainWindow，右击，选择布局，然后选择在整体布局中布局；
• 有些控件需要占用几个格子：⬅️占两格，拉动左右边界线直到填满两格松开即可。结果标签占整行，就拉到最右边；
• 按钮大小如何适配整个格子：属性里面设置水平策略和垂直策略为Expanding。（技巧：选中所有按钮以及需要设置的其它类型控件，统一设置，全部生效）；
• TextEdit大小适配过程中还是很别扭怎么办：往往是大小有时候大得过分，或者小得很不合时宜。此时把maximumSize属性用起来，设置一下最大尺寸/最小尺寸即可。

美化

• 字体： 字体种类、大小等，必要时候考虑国际化问题；
• 控件间隔： 按钮之间连着，会显得布局太紧密，区分不明显。
  解决方案：可以考虑QGridLayout的以下属性：
  

美化升级

• 资源文件：添加背景图片（添加资源方法：有机会再填坑）
• styleSheet：有些类似前端代码（有机会这坑得填）

布局差不多了，功能下次再写吧。