基础教程：初步认识Hype 4场景和布局（二）

上一小节小编详细介绍了场景的概念和添加的方法等，本小节重点讲解布局的概念以及添加、管理布局的方法。

一、布局的概念和管理

1、布局的概念。

Hype的布局是指各种元素在场景画布中的位置摆放，也就是元素在画布中的排版。场景创作者会根据设备屏幕宽度来规划不同的元素布局。

2、显示或隐藏布局导航栏。

Hype软件打开后，默认布局导航栏是隐藏的，可以点击工具箱中的“布局”工具显示或者隐藏布局导航栏。布局导航栏与场景导航栏是一致的，每一个场景默认对应一个布局“未命名布局”，其大小与场景的大小一样，都是600px * 400px。

图1：显示或隐藏布局导航栏

二、布局的管理

布局管理包含三部分：新增布局、删除布局和给布局重新命名。

1、新增布局。

点击布局导航栏右上角“+”图标或者鼠标右键菜单“新增布局”，会有一个小弹窗，标有4种设备的尺寸以及断点宽度，断点宽度是可以改变的。

选中某个设备，然后点击“添加布局”。如果设备的断点宽度小于600px，那么添加的布局就会在默认布局的上面；反之则会在默认布局的下面。

新添加的布局有一个布局的名字以及宽高尺寸，名字可以改变，但是宽高尺寸不能改变。

小伙伴要注意：图2 GIF图中新增的布局对应的是场景3，也就意味着场景3有4个布局。但是场景1和场景2没有添加布局，都只有一个默认的布局。

图2：添加新的布局

2、删除布局。

添加了三种设备的显示屏幕尺寸的布局后，可以删除了原来默认的布局。鼠标右键点击选定的布局，右键菜单选择“删除布局”，即可把默认布局删除掉。

图3：删除布局

3、给布局重新命名。

鼠标左键双击布局名字位置或者鼠标右键菜单“给布局重新命名”，把默认布局的名字改为Breakpoint 600px。

图4：给布局重新命名

三、小结

由于布局的尺寸大小与场景的尺寸大小是一致的，因此很多小伙伴会误认为布局是场景的画布，这是对布局错误的理解。小伙伴只要记住一点，布局是根据设备的屏幕宽度（或者Breakpoint）来对场景的内容进行排版。具体理论小编会在下一章节响应式布局介绍中给小伙伴讲解。