UGUI - 关于ScrollContent 和 Grid使用

最新推荐文章于 2023-07-10 14:49:10 发布
原创 最新推荐文章于 2023-07-10 14:49:10 发布 · 3.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在Unity中使用UGUI创建带有ScrollContent的Grid布局。通过设置Canvas、ScrollRect组件、VerticalLayoutGroup或HorizontalLayoutGroup，以及使用LayoutElement控制Item布局，实现了动态添加和删除内容的功能。同时，文中提到了GridLayoutGroup与VerticalLayoutGroup的区别，前者支持自动横纵向排布并能限制Item大小。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果图：左上区域为准，通过点击+-item添加内容（红色的item）。


步骤：

1.新建Canvas，将canvas的rendermode设置成screenspace - camera，canvas scaler中的screen match mode设置为expand（可以不设置）；

2.建立一个panel，添加ScrollRect组件，设置是横向还是纵向的滑动效果，以及移动类型movementtype（具体效果可以自行设置试试）；

3.在已有的panel下建一个grid，并给与一个verticallayoutgroup或者horizontallayoutgroup(取决于是横向或者纵向的滑动效果，至于与gridlayoutgroup的差别下面会解释下），设置verticallayoutgroup的内容，padding是指item与scrollrect的边缘的距离，spacing指item之间的间隙，childalignmetn指item的对齐方式，childforceexpand 指显示width或者height上的扩展；

4.建立一个item，添加组件layoutelement来控制当前这个item的布局，定义item的最小值和首选大小，或者可以重写最小值或首选大小，这里显示了首选高度为50，将此item作为预设即可。

5.写脚本：将脚本挂在menu上，additem和deleteitem分别是addbutton和deletebutton调用的方法。

  public GameObject _item;
    private int _itemI
最低0.47元/天 解锁文章

200万优质内容无限畅学
Unity UGUI【Grid Layout Group】网格布局组
weixin_44306106的博客
03-10 2619
Unity UGUI【Grid Layout Group】网格布局组 众所周知：Unity的UGUI中的组件排序组件有很多种； 例如：水平布局组，垂直布局组和网格布局组； 网格布局组只是其中一种，今天之所以讲网格布局组，是因为我觉得这个网格布局组比前两个都要强大。 在开大的过程中，只要掌握了网格布局组，就可以实现在实际开发中的各种需求了。 UGUI的网格布局组(Grid Layout Group)：功能上类似于NGUI的Grid和Table组件； 当然这两个组件，我也偏重于Table组件（功能强大，使用方便
【Unity3D-UGUI应用篇】（三）使用UGUI实现层级菜单
优快云博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
09-06 5071
推荐阅读 优快云主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群：1040082875 大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。 一、前言 前段时间分享了UGUI的每个组件的属性和使用方法，比如Text、Button、Image、Toggle、InputField、ScrollView等等。 接着分享了UGUI的一些原理，比如说UGUI的渲染模式、UGUI的缩放计算、UGUI的描点定位、UGUI的自动布局等等。.
uGUI练习(六) ScrollView
weixin_33962621的博客
09-15 834
练习目标 练习uGUI的滑动组件 一、相关组件 ScrollRect Mask Grid Layout Group Scrollbar 二、步骤 1、创建一个Panel,命名为ScrollRect，添加 ScrollRect组件 2、在ScrollRect下创建一个子Panel,命名为Grid，添加Grid Layout Group 组件 3、在Grid下，创建...
UGUI 网格布局组（Grid Layout Group）
热门推荐
海涛高软
08-19 2万+
之所以讲解网格布局组，是因为网格布局组比水平布局组和垂直布局组都要强大，个人认为在实际开发过程中只要掌握住网格布局组就可以满足实际开发需要这个网格布局组，功能上类似于NGUI的Grid和Table组件，说到NGUI的Grid和table这两个组件，个人建议使用table组件，功能强大，使用方便下面开始做一个案例解决办法是添加一个content size filter组件 可以调整Grid的位置，用
UGUI - ScrollView
lq
06-06 3992
UGUI - ScrollView使用UGUI 制作ScrollView滚动视图 第一步：创建一个Canvas，在Canvas下创建一个Panel，命名为ScrollView，在ScrollView上添加组件Scroll Rect。 第二步:在ScrollView下创建一个空物体命名为Grid，挂上GridLayoutGroup组件第三步：在Grid下创建一个Image，添加一个图片，然后复制N
背水一战 Windows 10 (46) - 控件（ScrollViewer 基础）: ScrollViewer, ScrollBar, ScrollContentPresenter...
weixin_33910137的博客
09-21 175
原文:背水一战 Windows 10 (46) - 控件（ScrollViewer 基础）: ScrollViewer, ScrollBar, ScrollContentPresenter[源码下载] 背水一战 Windows 10 (46) - 控件（ScrollViewer 基础）: ScrollViewer, ScrollBar, ScrollContentPresenter 作者：we...
unity-ugui-scrollview:ugui-example
05-12
- **Layout Group**：如Grid Layout Group或Vertical Layout Group，用于组织Content内的子对象布局。 **3. 滚动条组件（Scrollbar）** - **Direction**：确定滚动条的生长方向，如Bottom To Top（下到上）或Left...
UGUI-- 自动布局组件
Go_Accepted的博客
05-03 694
1、自动布局是什么 虽然UGUI中的RectTransform已经非常方便地可以帮助我们快速布局，但是UGUI中还提供了很多可以帮助我们对UI控件进行自动布局的组件，可以帮助我们自动的设置UI控件的位置和大小等 自动布局的工作方式一般是： 自动布局控制组件+布局元素=自动布局 自动布局控制组件：Unity提供了很多用于自动布局的管理性质的组件用于布局 布局元素：具备布局属性的对象们，这里主要是指具备RectTransform的UI组件 2、布局元素的布局属性 例如：图片最下方，选择Lay.
UGUI使用小技巧（五） Scroll Rect组件的使用
不文不武的禾文
10-28 5312
在功能开发中，由于可能需要显示很多数据，但是一个界面显示不下，经常都会遇到需要滑动的列表，如背包，排行榜等，这些地方基本都会用到Unity3D的Scroll Rect组件来实现滑动功能。除此之外，Scroll Rect还有一些小技巧，可以用来滑动文字，图片，达到一些别的功能。 一、基本用法 经常使用到的组件：Scroll Rect、Mask、GridLayoutGroup 首先Unity的H...
UGUI中Grid+Toggle的制作滚动下列
ybhjx的专栏
06-28 975
public ToggleGroup m_kinGroup;    // 见上图中的 Kin Group的设置 void Awake()         {             // 需要动态变化；             m_Grid.sizeDelta = new Vector2(m_Grid.sizeDelta.x, 101 * 20);         }
对UGUI的GridLayoutGroup组件进行拓展.rar
09-16
对UGUI的GridLayoutGroup组件进行拓展.rar
Unity UGUI动态生成N个Item自动排列
09-02
Unity UGUI动态生成N个Item自动排列
UGUI自定义GridView(流式布局)
qq_37896049的博客
06-17 1042
引言 Unity中对子物体的排序我们一般是使用GridLayoutGroup这个组件，但是这个组件会强行将子物体的width和height设置为相同的，但是如果遇到子物体的宽高不同的需求时，这个GridLayoutGroup将不再适用。此时需要我们自定义的编写一套排序子物体的算法（分为子View宽度一致，高度不一致或者高度一致，宽度不一致两种情况）。 温馨提示 本文排序子物体采用了设置本地坐...
UGUI之页面滑动（Grid Layout和Scorll Rect&&mask）
alayeshi的专栏
12-09 3370
Grid Layout是一个排版的东东，Scorll Rect是一个滑动的东东，然后MASK是一个负责显示和隐藏区域的东西。。。直接看例： 我们的目的是让图中的多个Leveitem1进行排列，最后进行滑动效果。 首先我们建立一个空的GameObject作为盛放排列Leveitem1的容器，其实就是NGUI里面的Grid功能。 然后我们这样在Component里找到La
UGUI之Grid Layout Group组件介绍
lvlei19911108的博客
11-13 213
Grid Layout Group是LayoutGroup的子类脚本属性截图如下： 1、Padding：RectOffset类型，矩形偏移，详解请戳UGUI之Horizontal Layout Group组件介绍2、Cell Size：Vector2类型，默认值为(100,100)，网格中的每个单元格的大小[SerializeField]protectedVector2 m_CellSize...
Unity UGUI的GridLayoutGroup（网格布局）组件的介绍及使用
alianblank的博客
07-10 5453
GridLayoutGroup是Unity UGUI中的一种布局组件，用于在UI界面中创建网格布局。它可以根据指定的行数、列数和间距自动排列子物体，使它们按照网格的形式排列。
UGUI 网格布局组（滚动视图）
海涛高软
12-27 981
先调整中心点的位置与滚动视图的顶部对齐，然后再添加或调整（Content Size Filter和Gird Layout Group）FR：徐海涛（Hunk Xu) QQ技术群：386476712
Scroll View Content里面动态生成子物体 下拉框
CatTai的博客
07-30 361
示意图 下面是代码： //public [Header("生成的物体")] public GameObject originObject; [Header("生成的位置 也就是父物体")] public Transform parentTransForm; [Header("控制大小的父物体")] public RectTransform FuWuTi; /// <summary> /// 克隆一个GameObj..
UGUI中常用组件的属性和方法
最新发布
06-20
<think>我们正在讨论UnityUGUI的常用组件及其属性和方法。根据之前的引用，我们有关于Canvas、CanvasGroup等组件的部分信息。UGUI的常用组件包括：1.Canvas（画布）2.CanvasGroup（画布组）3.各种基础控件（如Button,Image,Text等）由于引用中提到了Canvas和CanvasGroup，我们将重点介绍这两个组件以及几个基础控件（Button,Image,Text）的常用属性和方法。注意：引用[1]提到UGUI的六大组件和三大基础控件，但具体内容未详细列出。因此，我们将结合Unity官方文档和常见知识进行整理。以下是对常用组件的详解：###1.Canvas（画布）[^3]Canvas是所有UI元素的容器，它定义了UI的渲染模式。####属性：-**RenderMode**：渲染模式，有三种：-**ScreenSpace-Overlay**：UI覆盖在场景之上，不需要摄像机。-**ScreenSpace-Camera**：UI在指定摄像机前的一个平面上渲染。-**WorldSpace**：UI作为场景中的3D对象渲染，可以任意放置和旋转。-**PixelPerfect**：是否启用像素完美（仅适用于ScreenSpace模式）。启用时，UI将锐化以减少模糊。-**SortOrder**：在ScreenSpace-Camera模式下，用于控制多个画布的渲染顺序（值大的覆盖值小的）。-**TargetDisplay**：目标显示设备（多显示器情况下使用）。-**AdditionalShaderChannels**：指定画布网格需要的额外着色器通道（如法线、切线等）。####方法：Canvas组件本身没有太多公开方法，但可以通过代码控制其属性，例如：```csharpCanvascanvas=GetComponent<Canvas>();canvas.renderMode=RenderMode.ScreenSpaceCamera;canvas.worldCamera=Camera.main;```###2.CanvasGroup（画布组）[^2]CanvasGroup用于控制一组UI元素的某些共同属性（透明度、交互性等）。####属性：-**Alpha**：控制整个组的不透明度（0完全透明，1完全不透明）。-**Interactable**：组内的UI元素是否可以交互（如按钮是否可点击）。-**BlocksRaycasts**：是否阻挡射线检测（影响鼠标/触摸事件）。如果为false，则事件会穿过该组到达后面的对象。-**IgnoreParentGroups**：是否忽略父CanvasGroup的设置（只考虑自身的设置）。####方法：-没有特殊方法，但可以通过设置属性来控制：```csharpCanvasGroupgroup=GetComponent<CanvasGroup>();group.alpha=0.5f;group.interactable=false;```###3.Button（按钮）按钮是常用的交互控件。####属性（继承自Selectable）：-**Interactable**：是否可交互。-**Transition**：状态过渡方式（颜色变化、精灵变化、动画等）。-**Navigation**：导航设置（用于手柄、键盘导航）。####按钮特有属性：-**OnClick**：点击事件（UnityEvent），可以绑定多个方法。####方法：-**onClick.AddListener**：添加点击事件监听。```csharpButtonbutton=GetComponent<Button>();button.onClick.AddListener(MyMethod);```###4.Image（图片）用于显示图片或简单图形。####属性：-**SourceImage**：源图片（精灵）。-**Color**：图片颜色（可调整透明度等）。-**Material**：材质（可选）。-**RaycastTarget**：是否作为射线检测目标（影响事件）。-**ImageType**：图片类型（Simple,Sliced,Tiled,Filled）。-**FillMethod**：填充方法（当ImageType为Filled时可用）。-**FillAmount**：填充量（0~1，用于进度条等）。####方法：-**SetNativeSize**：将图片设置为原始尺寸。```csharpImageimage=GetComponent<Image>();image.SetNativeSize();```###5.Text(或TextMeshPro-Text)基础文本控件（注意：Unity推荐使用TextMeshPro，但这里先介绍UGUI原生Text）。####属性：-**Text**：文本内容。-**Font**：字体。-**FontStyle**：字体样式（加粗、斜体等）。-**FontSize**：字体大小。-**LineSpacing**：行间距。-**Alignment**：对齐方式。-**Color**：文本颜色。-**RaycastTarget**：是否作为射线检测目标。####方法：-通常通过直接设置text属性来改变文本：```csharpTexttext=GetComponent<Text>();text.text="HelloWorld";```###总结以上是UGUI中几个常用组件的属性和方法。实际开发中，TextMeshPro提供了更强大的文本功能，建议使用TextMeshPro-Text组件替代原生Text。§§相关问题§§1.UGUI中Canvas的三种渲染模式有什么区别？2.如何使用CanvasGroup控制一组UI元素的交互状态？3.Button的点击事件有哪几种绑定方式？4.Image组件的填充类型（Filled）有哪些应用场景？5.为什么推荐使用TextMeshPro替代UGUI原生Text？</think>### Unity UGUI 常用组件属性与方法详解 以下是 UGUI 核心组件的关键属性和方法总结： #### 1. **Canvas（画布）** [^3] UI 元素的容器，控制渲染模式 - **属性**： - `Render Mode`：渲染模式 - `Screen Space - Overlay`：覆盖在场景最上层 * `Screen Space - Camera`：投影到指定摄像机平面 * `World Space`：作为 3D 对象融入场景 - `Pixel Perfect`：启用像素级精确渲染 - `Sort Order`：画布渲染优先级（值越大越靠前） - `Target Display`：多显示器配置 - **方法**： ```csharp canvas.worldCamera = mainCamera; // 设置渲染摄像机 canvas.overrideSorting = true; // 覆盖子元素排序 ``` #### 2. **CanvasGroup（画布组）** [^2] 批量控制子元素属性 - **属性**： - `Alpha`：组内所有元素的透明度（0-1） - `Interactable`：是否允许交互（按钮/输入框等） - `Blocks Raycasts`：是否阻挡射线检测 - `Ignore Parent Groups`：忽略父级 CanvasGroup - **方法**： ```csharp // 淡入淡出效果 IEnumerator FadeGroup(CanvasGroup group, float targetAlpha) { while (Mathf.Abs(group.alpha - targetAlpha) > 0.05f) { group.alpha = Mathf.Lerp(group.alpha, targetAlpha, Time.deltaTime * 5); yield return null; } } ``` #### 3. **Button（按钮）** - **属性**： - `Interactable`：是否可交互 - `Transition`：状态过渡类型（颜色/精灵/动画） - `OnClick()`：点击事件绑定 - **方法**： ```csharp // 动态绑定点击事件 button.onClick.AddListener(() => { Debug.Log("按钮被点击"); }); // 禁用按钮交互 button.interactable = false; ``` #### 4. **Image（图片）** - **属性**： - `Source Image`：源纹理（Sprite） - `Color`：颜色/透明度 - `Image Type`：渲染类型（Simple/Sliced/Tiled/Filled） - `Fill Amount`：填充进度（0-1） - **方法**： ```csharp // 动态修改图片 image.sprite = Resources.Load<Sprite>("new_icon"); // 创建进度条效果 image.fillAmount = currentHealth / maxHealth; ``` #### 5. **Text（文本）** *(建议使用 TextMeshPro)* - **属性**： - `Text`：显示内容 - `Font`：字体资源 - `Font Size`：字号 - `Alignment`：对齐方式 - **方法**： ```csharp // 动态更新文本 scoreText.text = $"得分: {currentScore}"; // 启用富文本标记 descriptionText.supportRichText = true; ``` #### 6. **Scroll Rect（滚动视图）** - **属性**： - `Content`：滚动区域内容 - `Horizontal/Vertical`：滚动方向 - `Scroll Sensitivity`：滚动灵敏度 - **方法**： ```csharp // 滚动到指定位置 scrollRect.verticalNormalizedPosition = 0.5f; // 居中 // 禁用水平滚动 scrollRect.horizontal = false; ``` #### 7. **Layout Group（自动布局）** 包含 `Horizontal/Vertical/Grid Layout` - **属性**： - `Spacing`：子元素间距 - `Padding`：内边距 - `Child Alignment`：子元素对齐 - **特殊方法**： ```csharp // 强制刷新布局 LayoutRebuilder.ForceRebuildLayoutImmediate(layoutGroup); ``` > **最佳实践**： > 1. 复杂 UI 使用 `CanvasGroup` 管理显隐状态[^2] > 2. `World Space` 模式需调整画布大小匹配 3D 空间[^3] > 3. 动态内容优先使用 `TextMeshPro` > 4. 性能敏感场景禁用 `Raycast Target` 属性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值