【Unity3D】UGUI之布局组件
1 概述
布局组件主要有:水平布局(HorizontalLayoutGroup)、垂直布局(VerticalLayoutGroup)、网格布局(GridLayoutGroup),用于约束子控件的布局方式,这些布局都有以下共同属性:
- Padding:边距,父控件向内收缩的空间,子控件只能在此收缩空间内布局,避免子控件太贴边
- Spacing:间距,子控件向外延申的空间,避免子控件间挨得太紧凑
- Child Alignment:子控件对齐方式
2 水平布局 HorizontalLayoutGroup
新建一个 Image 控件,重命名为 Group,调整背景色为蓝色,在其下创建 4 个 Toggle 子控件,重命名为 Toggle1~Toggle4,其 text 内容分别为:One、Two、Three、Four,控件层级结构如下:
为 Group 控件添加 HorizontalLayoutGroup 组件,如下:
调整 Group 控件宽高为 350x50,Toggle1~Toggle4 控件宽高为 60x20,显示效果如下:
3 垂直布局 VerticalLayoutGroup
新建一个 Image 控件,重命名为 Group,调整背景色为蓝色,在其下创建 4 个 Toggle 子控件,重命名为 Toggle1~Toggle4,其 text 内容分别为:One、Two、Three、Four,控件层级结构如下:
为 Group 控件添加 VerticalLayoutGroup 组件,如下:
调整 Group 控件宽高为 120x140,Toggle1~Toggle4 控件宽高为 60x20,显示效果如下:
4 网格布局 GridLayoutGroup
新建一个 Image 控件,重命名为 Group,调整背景色为蓝色,在其下创建 9 个 Toggle 子控件,重命名为 Toggle1~Toggle9,其 text 内容分别为:One~Nine,控件层级结构如下:
为 Group 控件添加 GridLayoutGroup 组件,如下:
调整 Group 控件宽高为 220x100,Toggle1~Toggle9 控件宽高为 60x20,显示效果如下:
声明:本文转自【Unity3D】UGUI之布局组件
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 我与微信审核的“相爱相杀”看个人小程序副业