3、基础控件与布局：按钮、标签、文本框、进度条、绝对布局与相对布局、网格布局实战
各位好，我是老张。这一章咱们来啃HMI开发里最基础、也最绕不开的部分——控件和布局。说实话，我见过不少新手一上来就追求炫酷的动画效果，结果连按钮的点击反馈都没做好。这就像盖楼不打地基，早晚要塌。
今天的内容，说白了就是两件事：控件怎么用，布局怎么摆。我会把我在几个车载项目里踩过的坑、总结的经验，都揉碎了讲给你听。
3.1 基础控件：HMI的“五官”
控件就是用户和机器对话的媒介。你想想看，一个屏幕如果连按钮都按不动、文字都看不清，那还谈什么交互体验？
3.4.1 按钮（Button）
按钮是HMI里最常用的控件，没有之一。但越是简单的东西，越容易出问题。
核心属性：
- 状态：Normal（正常）、Pressed（按下）、Disabled（禁用）、Hover（悬停，触屏一般不用）。
- 反馈：按下时要有视觉变化（颜色、阴影、大小），最好配合触觉或声音反馈。
- 区域：触控按钮的最小热区建议不小于 48x48 像素，否则容易误触。
3.4.2 标签（Label）
标签就是显示文字用的，不能交互。但别小看它，字体、字号、颜色、对齐方式，每一项都影响可读性。
避坑指南：
- 字体尽量用无衬线体（如微软雅黑、思源黑体），屏幕显示更清晰。
- 字号不要小于 12px，尤其是车载或工业场景，用户可能离屏幕较远。
- 文字颜色和背景的对比度要足够，我一般要求至少 4.5:1。
3.4.3 文本框（TextBox）
文本框用来输入数据，比如设置温度、输入密码。这里有个常见的坑——输入法兼容性。
常用属性：
| 属性 | 说明 | 示例值 |
|---|---|---|
| InputType | 限制输入类型 | Number, Text, Password |
| MaxLength | 最大字符数 | 10 |
| Placeholder | 提示文字 | "请输入数值" |
| ReadOnly | 是否只读 | True / False |
3.4.4 进度条（ProgressBar）
进度条用来显示任务完成度，比如文件加载、系统启动。这里有个心理学问题——用户对“不确定的等待”最焦虑。
两种模式：
- 确定模式：知道具体进度，比如 0% 到 100%。
- 不确定模式：不知道还要多久，用循环动画表示“正在运行”。
我个人建议：能显示百分比就尽量显示，哪怕数据是模拟的。用户看到数字在动，心里会踏实很多。
3.2 布局方式：把控件“摆”对位置
布局决定了控件在屏幕上的位置和大小。选错布局方式，轻则界面难看，重则适配出问题。
3.2.1 绝对布局（Absolute Layout）
绝对布局就是给每个控件指定固定的 X、Y 坐标和宽高。简单粗暴，但缺点也很明显。
优点： 控制精确，适合固定尺寸的屏幕。
缺点： 无法自适应，换一个分辨率就全乱了。
3.2.2 相对布局（Relative Layout）
相对布局是让控件相对于父容器或其他控件来定位。比如“按钮A 在 按钮B 的右边 10 像素”。
核心概念：
- 父容器对齐：靠左、靠右、居中、顶部、底部。
- 兄弟控件对齐：在某个控件的上方、下方、左边、右边。
- 外边距（Margin）：控件与控件或容器边缘的距离。
你想想看，如果屏幕尺寸变了，相对布局的控件会自动调整位置，是不是比绝对布局灵活多了？
3.2.3 网格布局（Grid Layout）
网格布局把屏幕分成若干行和列，控件放在单元格里。这是目前最主流的布局方式，尤其适合仪表盘、菜单等规整的界面。
关键参数：
| 参数 | 说明 | 示例 |
|---|---|---|
| 行数 / 列数 | 定义网格结构 | 3 行 4 列 |
| 行高 / 列宽 | 可以固定或按比例 | 100px / 1fr |
| 跨行 / 跨列 | 一个控件占多个单元格 | 跨 2 列 |
| 对齐方式 | 单元格内控件的对齐 | 居中、拉伸 |
3.3 知识体系：控件与布局的关系
为了让你更直观地理解，我画了一张图。它展示了控件和布局在整个HMI开发中的位置，以及它们之间的协作关系。
3.4 实战：搭建一个简单的控制面板
光说不练假把式。咱们来做一个实际的小案例：一个空调控制面板。
需求：
- 显示当前温度（标签）
- 温度加减按钮（按钮）
- 设置目标温度（文本框）
- 运行状态指示（进度条）
布局方案： 使用网格布局，2 行 3 列。
<!-- 伪代码示例 -->
<GridLayout rows="2" columns="3">
<Label row="0" col="0" colSpan="2" text="当前温度：25°C" />
<Button row="0" col="2" text="+" />
<Button row="1" col="0" text="-" />
<TextBox row="1" col="1" placeholder="目标温度" />
<ProgressBar row="1" col="2" value="50" />
</GridLayout>
嗯，这个例子虽然简单，但包含了我们刚才讲的所有控件和布局方式。你可以在自己的开发环境里试着实现一下，看看效果。
3.5 本章小结
这一章的内容，说白了就是打好基础。控件是砖，布局是图纸。砖的质量不好，图纸再漂亮也没用；图纸不合理，砖也砌不出好房子。
我个人觉得，新手最容易犯的错误就是“重控件、轻布局”。总想着把按钮做得花里胡哨，却忽略了它在不同屏幕上的位置是否合理。记住一句话：好的布局，是让用户感觉不到布局的存在。
下次当你打开一个HMI界面，觉得“嗯，看着真舒服”的时候，那背后一定是布局的功劳。