unity 利用Content Size Fitter和Layout Element UI列表嵌套列表

已于 2024-06-15 22:04:19 修改
阅读量224 收藏 1
点赞数 3
分类专栏： unity 文章标签： unity ui 游戏引擎 unity3d
于 2024-06-13 10:15:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39976692/article/details/139642319
版权

先看下是不是想要的效果
在这里插入图片描述
先在一级层级上挂上VerticalLayoutGroup和ContentSizeFitter两个组件，如果是竖向的就将ControlChildSize的Height勾选，如果横向的则勾选Width
在这里插入图片描述
在这里插入图片描述
然后在二级层级上挂上VerticalLayoutGroup和LayoutElement在这里插入图片描述
三级层级上所有子物体上必须得挂上LayoutElement并且按照我所设置的进行设置，当然长宽可以自定义，和其它同级统一就行，否则会受到父级影响长宽归零
在这里插入图片描述
在这里插入图片描述
要扩大长款的三级层级挂载的组件按照图里设置
在这里插入图片描述
然后四级层级动态添加即可，上面不需要挂组件
在这里插入图片描述

敲代码的小石头
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Unity3D插件FancyScrollView，UI滑动列表
07-20
通过深入了解和熟练使用FancyScrollView，开发者可以在Unity3D项目中创造出更多富有创意和吸引力的UI滑动列表，提升游戏的整体品质和用户体验。同时，这个插件也为UI设计提供了无限可能，无论是简单的列表展示，还是...
Content Size Fitter与Vertical Layout Group、LayoutElement的结合使用
星宇的专栏
05-20 1390
Content Size Fitter组件主要是用来设置UI的长宽，Horizontal Fit和Vertical Fit分别是控制UI的宽和高，有三个值可选： Unconstrained：组件不根据布局元素调整 ，可手动修改长宽的值。 MinSize：根据布局元素的最小值来调整，不能手动修改长宽的值。 PreferredSize：根据布局元素的内容来调整，不能手动修改长宽的值。 一、最简单的用法，挂在Text上，根据文本内容改变尺寸 二、文字后边固定位置加图片：如游戏中聊天（名字+表情） .
UGUI使用小技巧（一） Content Size Fitter的使用
cuijiahao的专栏
10-15 475
1、文字组件上使用，推荐只要是Text都加上这个组件。 文字边框会随文本的宽度而发生缩放
Unity UI组件LayoutGroup下Content Size Fitter 报错，不能 嵌套 和 使用 的替代解决方案
m0_62379440的博客
05-16 525
一种用于Unity，在UI层展示多条需要自适应大小、长度不定的带图片文本时，规避LayoutGroup组件不能使用Content Size Fitter的替代方案
UGUI中一种由孩子元素决定大小的嵌套Layout的实现方法
KeeeepGO的博客
03-11 2166
Content Size Fitter的Horizontal Fit、Vertical Fit用于父元素去适应孩子元素。 Vertical\Horizontal Layout Group 的 Child Controls Size用于让孩子元素自己控制自己的大小（即保持孩子原大小）。 Child Force Expand用于强制孩子元素扩展到父元素大小。 具体参考： https://docs.un...
Unity Content Size Fitter 的使用
最新发布
XTony_517的博客
07-15 63
LayoutRebuilder.ForceRebuildLayoutImmediate(obj.GetComponent<RectTransform>())可以对自适应大小UI进行强制刷新，解决了UI刷新不及时的问题。遇到多层嵌套Conten Size Fitter的时候，需要由子物体到父物体依次刷新UI，否则会出现界面闪动的问题。
UGUI ContentSizeFitter 嵌套 适配
yhjsspz的专栏
09-27 2381
Unity不支持ContentSizeFitter的嵌套，如果使用了嵌套则会出现警告，并且有些时候没有效果。 但是实际应用时候肯定会碰到嵌套的情况，这怎么办呢？ 其实我们只需要在最外层加一个ContentSizeFitter，里面使用VertivalLayoutGroup和HorizontalLayoutGroup布局，并且勾上ChildControlsSize的Height或Width（根据实际情况，适配高就勾Height，适配宽就勾Width） 但是会碰到很坑爹的Image之类的组件，使用了Ch.
浅析 ContentSizeFitter 以及 Horizontal Layout Group 嵌套问题
qq_45858222的博客
07-11 902
一个根据内容自动改变大小的信息显示列表，在嵌套时遇到了问题。 用ContentSizeFitter，简单了解了一下ContentSizeFitter的源码。
ContentSizeFitter组件的一些问题
qq_36354353的博客
03-02 3158
在为文本框添加自适应组件ContentSizeFitter时，要注意代码中动态的改变文字内容时，文本框的大小时不会立即发生变化的，而是在下一帧发生变化，此时如果父物体上存在LayoutGroup布局组件时，改变文字的这一帧识别到的还是文本框改变之前的大小，此时会发生显示问题，这个时候需要刷新一下ContentSizeFitter组件，使文本框的大小立即生效 即SetLayoutVertical()...
关于unity Content Size Fitter 套 Content Size Fitter
qq_42489774的博客
07-17 1694
首先：最好不要unity Content Size Fitter 套 Content Size Fitter这样最后得到的变化可能会错误unity也提示了，父物体如果有了，那么子物体就不要再加了。
Unity填坑之布局元素与自适应组件
kylinok的博客
02-23 970
Unity填坑之布局元素与自适应组件 文章目录Unity填坑之布局元素与自适应组件前言一、嵌套使用总结 前言 ugui中经常使用布局元素组件，即：Layout Group组件。他用于控制子项的自动布局，不需要用户去繁琐的调整子项的位置。另外一个组件：content size fitter，自适应组件，能够根据子项控制自己的大小。 一、嵌套使用 两者配合使用能够让UI实现自动伸缩扩展的效果，如下所示，当各个要求里面没有内容，或者内容增多时，可以自动上下伸缩，到达图2，和图3的效果。 图2 图3：
Unity ScrollView实现动态列表生成
12-20
在Unity引擎中，使用UGUI（Unity Graphic User Interface）系统，可以轻松创建各种用户界面，包括动态列表。本文将深入探讨如何使用ScrollView组件来实现一个根据实时数据动态更新的列表。 首先，创建一个...
Unity UI 无限列表
05-30
无限列表多样式，简单易上手
UIList选项列表插件.unitypackage
04-05
UIList选项列表插件.unitypackage
Unity实现QQ列表折叠菜单
12-20
在Unity引擎中，创建QQ列表折叠菜单涉及到UI系统的布局管理和事件处理。这个例子中，主要使用了Unity的GUI系统，特别是自动布局组件VerticalLayoutGroup，以及脚本编程来实现交互功能。以下是对实现该功能的关键知识...
【Unity3D】嵌套使用Layout Group制作拥有动态子物体高度的Scroll View
趁着头发多我想做游戏
02-28 3332
注1：本解决方案参考 StackOverFlow 注2：本解决方案只使用UGUI自带的组件，不造轮子 注3：下文使用UGUI自带的ScrollView组件，由于ScrollView和Content都是Unity自带的命名，因此不再赘述其具体的功能 如何制作拥有动态子物体高度的ScrollView需求想要的效果遇到的问题解决方案最终效果 需求 搭建聊天界面或者其他需要根据子物体具体高度...
[Unity案例]嵌套滑动列表
lel18570471704的博客
12-03 674
Unity的嵌套滑动列表，一个外部滑动视图（Outer Scroll View），其中包含多个内部滑动视图（Inner Scroll View）；外部滑动视图负责垂直或水平滑动，而内部滑动视图则负责在外部滑动的基础上进行垂直或水平滑动；让用户在一个方向上滑动外部列表，同时在另一个方向上滑动内部列表，从而达到复杂数据展示和交互的目的。
Unity基础：文本框、图片自适应（ContentSizeFitter、VerticalLayoutGroup等组件的使用）
Fay_Fey'S Blog
11-14 3966
1、https://blog.csdn.net/PalmAdorableTiger/article/details/81092521 2、 Vertical Layout Group/Horizontal Layout Group Padding：控制子节点和上下左右的距离 Spacing：每个Item之间的距离 Child Alignment 表示对齐方式。 Control C...
Unity 循环滑动列表
05-20
在 Unity 中实现循环滑动列表可以使用 ScrollRect 组件和 ContentSizeFitter 组件。以下是一个基本的步骤： 1. 创建一个空白 GameObject，并向其中添加 ScrollRect 组件。 2. 在 ScrollRect 组件中设置 Content 属性为一个包含所有列表项的 GameObject。 3. 向 Content 中添加一个 VerticalLayoutGroup 组件，用于设置列表项的垂直布局。 4. 向每个列表项 GameObject 中添加一个 LayoutElement 组件，用于设置列表项的高度。 5. 向 ScrollRect 中添加一个 ContentSizeFitter 组件，并将 Vertical Fit 设置为 Preferred Size。 6. 编写一个脚本，用于控制滑动列表的循环滚动。该脚本应该包含以下步骤： - 在 Start() 方法中获取列表项的总数和高度。 - 在 Update() 方法中检查 ScrollRect 是否已经滚动到列表的顶部或底部，并相应地更新 Content 的位置以实现循环滚动。 下面是一个简单的示例代码： ```csharp using UnityEngine; using UnityEngine.UI; public class LoopScroll : MonoBehaviour { public float itemHeight; // 列表项的高度 public int itemCount; // 列表项的总数 private RectTransform content; private ScrollRect scrollRect; private float contentHeight; private void Start() { content = GetComponent<ScrollRect>().content; scrollRect = GetComponent<ScrollRect>(); contentHeight = itemHeight * itemCount; content.sizeDelta = new Vector2(content.sizeDelta.x, contentHeight); } private void Update() { if (scrollRect.verticalNormalizedPosition <= 0f) { content.anchoredPosition = new Vector2(content.anchoredPosition.x, content.anchoredPosition.y + contentHeight); scrollRect.verticalNormalizedPosition = 1f; } else if (scrollRect.verticalNormalizedPosition >= 1f) { content.anchoredPosition = new Vector2(content.anchoredPosition.x, content.anchoredPosition.y - contentHeight); scrollRect.verticalNormalizedPosition = 0f; } } } ``` 在这个示例中，我们在 Start() 方法中计算了 Content 的总高度，并在 Update() 方法中检查 ScrollRect 是否已经滚动到列表的顶部或底部。如果是，我们就相应地更新 Content 的位置以实现循环滚动。注意，我们还将 ScrollRect 的 verticalNormalizedPosition 设置为 0f 或 1f，以保持滚动位置不变。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敲代码的小石头

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值