当前位置： 首页 > article >正文

unity学习53：UI的子容器：面板panel

article 2025/2/25 21:48:05

目录

1 UI的最底层容器：canvas

1.1 UI的最底层容器：canvas

1.2 UI的合理结构

2 UI的子容器：面板panel

2.1 创建panel

2.2 面板的本质： image ，就是一个透明的图片，1个空容器

3 面板的属性

4 面板的使用

4.1 比如左上角加1个panel

4.2 然后其他 image都放在这个panel里

4.3 查看效果

4.4 测试缩放

1 UI的最底层容器：canvas

1.1 UI的最底层容器：canvas

  • UI的父物体最底层就是canvas
  • 可以多张canvas

1.2 UI的合理结构

canvas-----panel1 -----各种控件

             ----panel2-----各种控件

             。。。。。

2 UI的子容器：面板panel

2.1 创建panel

  • 面板panel: UI的子容器
  • 更方便做某个子区域，小范围的，协同适配！

2.2 面板的本质： image ，就是一个透明的图片，1个空容器

  • 可以看到面板下挂的就是一个 image的component
  • 并且，可以把image 给灰掉

3 面板的属性

4 面板的使用

4.1 比如左上角加1个panel

  • 比如左上角加1个panel
  • 把panel的锚点，挂在父物体（canvas）的左上角

4.2 然后其他 image都放在这个panel里

  • 然后其他 image都放在这个panel里
  • 这些image都属于这个panel了，是panel的子物体
  • 这样就只需要关心，父物体panel的适配了。不要单独调整每个图片的适配了

4.3 查看效果

  • 虽然可以直接拖动图片过去，不设置父子物体效果，但是缩放时，效果不完全一样

4.4 测试缩放

  • 下面是把游戏game窗口放大，缩小，UI适配很好


http://www.kler.cn/a/560868.html

相关文章：

  • 【网络安全】从零开始的CTF生活
  • 一文讲解Redis中的基本数据类型
  • postman并发测试某个接口
  • 计算机毕业设计SpringBoot+Vue.jst在线文档管理系统(源码+LW文档+PPT+讲解)
  • Dify部署无法拉取镜像
  • docker compose安装redis
  • 速通HTML
  • XML XML约束 三、Schema
  • 修改/etc/hosts并生效
  • 一篇文章学懂Vuex
  • ESP32系列芯片模组方案，设备物联网无线通信，智能化交互响应控制
  • ubuntu磁盘挂载
  • Websock Demo（二） Java后端代码
  • SQL:DQL数据查询语言以及系统函数(oracle)
  • 力扣-贪心-452 用最小数量的箭引爆气球
  • vue 手写分页
  • 除了Axios，如何用fetch处理403错误？
  • Linux故障排查和性能优化面试题及参考答案
  • MybatisPlus-插件功能-分页插件基本用法
  • 2024前端性能优化终极指南：从加载到渲染的完整解决方案