第10章 可视化布局 - 设计你的界面

让你的app看起来美美哒！

---

什么是布局？

布局 = 按钮、文本框、图片在屏幕上的排列方式。

用结绳的拖拽设计器，你可以像搭积木一样设计界面，不用手写代码！

---

10.1 打开设计器

方法1：创建新布局文件

1. 右键项目 → 新建文件
2. 选择 布局文件 (.layout)
3. 给它起个名字（比如 main_page.layout）
4. 双击打开，设计器就启动了

方法2：打开已有布局

1. 在左侧文件列表找到 *.layout 文件
2. 双击打开

---

10.2 常用组件

基础控件

控件	用途	例子
文本	显示文字	标题、说明文字
输入框	用户输入	搜索框、用户名
按钮	可点击操作	确定、提交
图片	显示图片	头像、背景
列表	显示多个项目	联系人列表

布局容器

容器	用途
竖排容器	让组件竖着排列
横排容器	让组件横着排列
网格容器	类似表格

---

10.3 快速设计流程

步骤1：添加组件

1. 在左边 组件库 找到需要的控件
2. 拖到设计区域中间
3. 松开鼠标，组件就出现了

步骤2：调整位置和大小

1. 点击组件选中它
2. 拖拽移动位置
3. 拉动边角改变大小

步骤3：设置属性

1. 选中组件
2. 在右侧 属性面板 修改：
   • 文本内容 - 显示什么文字
   • 颜色 - 背景颜色、文字颜色
   • 字号 - 文字大小
   • 宽高 - 组件大小

步骤4：关联代码

1. 右键按钮 → 添加事件
2. 选择点击事件 被单击()
3. 结绳会自动生成事件处理方法
4. 在方法里写你的代码

---

10.4 响应式设计

你的app需要在各种手机上看起来都不错。

设置自适应

// 设置组件宽度为屏幕的50%
按钮.宽度 = 取屏幕宽度() / 2

// 设置组件高度为屏幕的30%
按钮.高度 = 取屏幕高度() * 0.3

屏幕尺寸获取

变量 屏幕宽 : 整数 = 取屏幕宽度()
变量 屏幕高 : 整数 = 取屏幕高度()
调试输出("屏幕宽度: " + 屏幕宽 + ", 高度: " + 屏幕高)

---

10.5 常见设计模式

居中对齐

组件.左边距 = (取屏幕宽度() - 组件.宽度) / 2
组件.顶边距 = (取屏幕高度() - 组件.高度) / 2

两列等宽布局

变量 列宽 : 整数 = 取屏幕宽度() / 2

左列组件.宽度 = 列宽
右列组件.宽度 = 列宽

按钮组水平排列

// 假设有3个按钮，均匀分布
变量 按钮宽 : 整数 = 取屏幕宽度() / 3

按钮1.宽度 = 按钮宽
按钮2.宽度 = 按钮宽
按钮3.宽度 = 按钮宽

---

10.6 颜色和样式

快速改颜色

// 改背景色
组件.背景色 = 16进制颜色 // 比如 0xFF0000 是红色

// 改文字色
文本组件.文字颜色 = 0xFFFFFF  // 白色

// 改透明度（0完全透明，255完全不透明）
组件.透明度 = 128

常用颜色代码

颜色	代码
红色	0xFF0000
绿色	0x00FF00
蓝色	0x0000FF
白色	0xFFFFFF
黑色	0x000000
灰色	0x888888

---

10.7 组件交互示例

简单的计算器按钮

事件 加号按钮:被单击()
    变量 数字1 : 整数 = 转换为整数(输入框1.获取文本())
    变量 数字2 : 整数 = 转换为整数(输入框2.获取文本())
    变量 结果 : 整数 = 数字1 + 数字2
    
    结果标签.设置文本("结果: " + 结果)
结束 事件

列表滚动加载

事件 列表:项目被单击(项目索引 : 整数)
    调试输出("你点击了第 " + 项目索引 + " 项")
结束 事件

---

10.8 设计建议 💡

✅ 好的设计

• ✨ 间距留足，不要太拥挤
• ✨ 字体大小清晰可读（最小12sp）
• ✨ 按钮足够大，容易点击
• ✨ 颜色搭配和谐
• ✨ 加载动画提示用户

❌ 要避免

• 文字过小看不清
• 按钮排得太紧容易误触
• 颜色太鲜艳刺眼
• 没有反馈（点了没反应）

---

10.9 调试布局

预览不同屏幕尺寸

大多数结绳IDE都支持预览：

1. 设计器右上角选择屏幕尺寸
2. 看看在大屏幕、小屏幕上的效果

使用调试信息

调试输出("屏幕宽: " + 取屏幕宽度())
调试输出("屏幕高: " + 取屏幕高度())
调试输出("组件位置: (" + 组件.左边距 + ", " + 组件.顶边距 + ")")

---

快速参考

操作	方法
新建布局文件	右键项目 → 新建 → 布局文件
添加组件	从左边组件库拖拽到设计区
修改属性	右侧属性面板
设置点击事件	右键组件 → 添加事件
获取屏幕宽度	取屏幕宽度()
获取屏幕高度	取屏幕高度()

---

恭喜！现在你会设计界面了！ 🎉

更多问题? 在官方社区提问：938828067