01/_graphics/03_button

ButtonInScroll

滚动视图ScrollView中的button
制作滚动视图

• ScrollView 节点
  • ScrollBar 滚动条节点
    • Bar :滑块区域显示的滑块节点
  • View 显示视图节点
    • content :容器节点
      • 要显示的诸内容节点
        
        ScrollView根节点添加scrollView组建 里面挂载显示容器content节点和ScrollBar滑块区域节点

Scroll Bar 添加Scrollbar组件，里面挂载滑块区域内的滑块节点 Bar

Bar 滑块节点

content节点里则包含要显示的内容为子节点

ButtonInteactable

可交互按钮

通过点击案件实行按钮之间的交互效果

实在是在脚本里设置按钮的interactable 属性，
interactable为false，按钮则显示出禁用的样式

点击按钮时设置本按钮的interactable为false，旁边按钮interactable为true，则形成了交互效果

ButtonSizeMode

点击左右两个按钮时，按钮发生颜色变化，左边是鼠标移动到按钮所在区域才触发，右边是鼠标接近按钮时就触发了。
其实这两个按钮显示的是同一个 SpriteFrame，而这个 SpriteFrame 的原图四周存在很大的透明区域。
因此当两个按钮对应的 Sprite 组件的设置不同，它们所在的节点大小也就不一样，所以它们的触发区域并不一样。
关于 Sprite 的详细设置可以参考 Sprite 相关范例。: 因为第一个按钮的Sprite开启了Tim自动裁剪

SimpleButton

普通的按钮，也是典型的按钮

场景中应该显示一左一右两个按钮。点击 play 按钮预览游戏，按钮会有如下行为：

• 移动鼠标到左边按钮上时，按钮图案变成问号
• 按下左边按钮时，按钮图案变成惊叹号，同时上方有文字显示"Left Button Clicked"
• 移动鼠标到右边按钮上时，按钮颜色加深
• 按下右边按钮时，按钮颜色变得更深，同时上方文字显示"Right Button Clicked"

贴图切换

1. 选中 Button_Switch_Sprite 节点，关注 Button 组件

2. Target 属性规定了 Button 状态变化时，应该更新哪个对象的图像

3. Interactable 规定了 Button 是否可以交互

4. Transition 属性里选择 SPRITE，就是状态改变时切换 Sprite 图像显示的模式

5. Normal/Pressed/Hover/Disabled 属性分别指定在相应状态下显示的 Sprite 图像资源

6. Click Events 里可以指定按钮按下后的事件处理方法

7. 

8. 颜色变化

9. 选中 Button_Switch_Color 节点，关注 Button 组件

10. Transition 属性里选择 COLOR，就是状态改变时过渡 Sprite 颜色显示的模式

11. Normal/Pressed/Hover/Disabled 属性分别指定在相应状态下 Sprite 的颜色

12. Duration 属性指定颜色过渡的时长

添加点击事件处理

1. 选中 Button_Switch_Sprite，关注 Button 组件
2. 在 Click Events 列表里，添加一个新的点击事件
3. 将事件监听脚本所在节点拖拽到该事件的 Target 属性上
4. 在 Component 属性列表中选择事件监听脚本所属的组件
5. 在 Handler 属性列表中选择事件发生时调用的方法