当前位置: 首页 > news >正文

Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题

Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题

目录

Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题

一、简单介绍

二、问题现象

三、问题分析

四、问题解决思路

五、案例解决实现步骤

六、案例关键代码


一、简单介绍

Unity 在开发中,记录一些报错问题,以便后期遇到同样问题处理。

有时我们在开发中,一起使用 ScrollView ,LayoutGroup,ContentSizeFitter,对于简单的排布,一般会很好的自动更新适配,但是有时候复杂了时候未必很好的自动的调整,进行很好适配。

ScrollView 在可滚动区域中显示内容。当你向ScrollView添加内容时,内容会被添加到ScrollView的内容容器(#unity-content-container)中。

Layout Group 翻译为“布局组”,从字面意思就可以理解,可以对一组元素进行动态布局,这里说的动态是,组内元素数量发生变化时,Layout Group可以智能的帮助你重新排版。

ContentSizeFitter 作为一个布局控制器,控制它自己的布局元素的大小。大小由游戏对象上的布局元素组件提供的最小或首选尺寸决定。这样的布局元素可以是图像或文本组件、布局组或布局元素组件。

值得注意的是,当一个矩形变换被缩放时——无论是通过 ContentSizeFitter 还是其他东西——缩放的范围是围绕基准值进行的。这意味着可以使用基准值来控制缩放的方向。

例如,当枢轴位于中心时,ContentSizeFitter 将在所有方向上均匀地扩展矩形变换。当枢轴位于左上角时,内容大小调整器会将矩形变换向下和向右展开。

二、问题现象

现象中,刚开始与生成布局显示是没有问题,当动态添加一些 Item 的时候,会出现 布局显示都不对,会有重叠,或者 Scroll 滑动布局显示不全的现象。

三、问题分析

案例中:

这里时使用 ScrollView  进行内容过多的时候,可以进行自动滑动浏览内容,其中使用到 LayoutGroup 进行排布,ContentSizeFitter 进行画布自动适配调整大小。

值得注意的是:我这里的嵌套的使用了 LayoutGroup ,和 ContentSizeFitter ,就是Item 中的子物件中还有自动排布和自动适配大小的 LayoutGroup ,和 ContentSizeFitter 组件使用。

由于嵌套,在动态生成中,子物体中也嵌套 LayoutGroup ,和 ContentSizeFitter ,父物体中的 LayoutGroup ,和 ContentSizeFitter 进行计算的时候,就会出现计算错误的现象,布局不对,且Scroll 滑动布局显示不全的现象。

四、问题解决思路

1、Canvas 强制刷新

Canvas.ForceUpdateCanvases();

2、对于unity的gridLayout verticalLayout 或者 horizontalLayout 经常有加入新成员或者改变成员大小后,部件大小、位置不对的问题,一般来说 ,这个方法就能解决

LayoutRebuilder.ForceRebuildLayoutImmediate(rectTransform);

3、用开关 gameobject 等一帧之类的方法解决,然后处理

horizLayoutGroup.CalculateLayoutInputHorizontal();
horizLayoutGroup.CalculateLayoutInputVertical();
horizLayoutGroup.SetLayoutHorizontal();
horizLayoutGroup.SetLayoutVertical();

4、还有就是进行 ContentSizeFitter 组件可以根据其子对象的大小来自动调整父对象的大小。但是,有时在动态添加内容后,ContentSizeFitter 可能无法立即更新,可以进下面

// 手动强制更新 ContentSizeFitter
ContentSizeFitter contentSizeFitter = yourContent.GetComponent<ContentSizeFitter>();
if (contentSizeFitter != null)
{contentSizeFitter.SetLayoutHorizontal();contentSizeFitter.SetLayoutVertical();
}

5、延迟更新: 如果进行一次更新无法达到刷新的效果,在向ScrollRect添加内容后,有时需要在下一帧中更新滚动视图和滚动条的范围。这可以通过将更新放置在 LateUpdate 中实现。

  • 如果这里比较耗性能,
  • 可以试着在有数据UI变化的时候触发更新若干时间关闭更新
  • 根据需要合理调整即可
void LateUpdate()
{// 在 LateUpdate 中更新内容和滚动条范围// 更新 Content 大小// 更新滚动条范围
}

五、案例解决实现步骤

1、创建 Unity 工程,进行 UI 布局如下,主要是 Scroll View ,然后再 Content 添加 LayoutGroup ,和 ContentSizeFitter 组件

2、要进行实例化的预制体说明,ImageGroup,和 ImageItem

3、新建脚本,进行ScrollView 的Content 动态生成,开始预生成部分,然后按下空格键 Space ,进行随机生成

4、把 Test 挂载到场景中,赋值父物体,和对应预制体

5、运行,按下空格键Space 随机生成 Item 有时候就会出现不能及时适配更新的情况

6、进行对应的处理后,这里是在 LateUpdate 进行更新

  • 如果这里比较耗性能,
  • 可以试着在有数据UI变化的时候触发更新若干时间关闭更新
  • 根据需要合理调整即可

7、运行场景,不能及时更新布局问题基本解决

六、案例关键代码


using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;/// <summary>
/// ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题
/// </summary>
public class Test : MonoBehaviour
{#region Data/// <summary>/// ImageGroup 预制体/// </summary>public GameObject ImageGroup;/// <summary>/// ImageItem 预制体/// </summary>public GameObject ImageItem;/// <summary>/// ParentTran 父物体 ImageGroup/// </summary>public Transform ParentTran;/// <summary>/// ImageGroup 列表/// </summary>List<GameObject> m_ImageGroupGoLst;#endregion#region Lifecycle function/// <summary>/// Start is called before the first frame update/// </summary>void Start(){Init();}/// <summary>/// Update is called once per frame/// </summary>void Update(){if (Input.GetKeyDown(KeyCode.Space)) {GameObject go = GetRandomImageGroup();CreateImageItemGameObject(go.transform);}}/// <summary>/// LateUpdate is called once per frame/// </summary>private void LateUpdate(){// 如果这里比较耗性能,// 可以试着在有数据UI变化的时候触发更新若干时间关闭更新// 根据需要合理调整即可RefreshUICanvas();}#endregion#region Private Function/// <summary>/// 初始化生成部分队列/// </summary>void Init() {m_ImageGroupGoLst = new List<GameObject>();for (int i = 0; i < 2; i++){GameObject go = CreateImageGroupGameObject();if (i == 1) {for (int ii = 0; ii < 4; ii++){CreateImageItemGameObject(go.transform);}}m_ImageGroupGoLst.Add(go);}}/// <summary>/// 生成 ImageGroup 实体/// </summary>/// <returns></returns>GameObject CreateImageGroupGameObject() {return GameObject.Instantiate(ImageGroup, ParentTran,false);}/// <summary>/// 生成 ImageItem 实体/// </summary>/// <returns></returns>GameObject CreateImageItemGameObject(Transform parent){return GameObject.Instantiate(ImageItem, parent, false);}/// <summary>/// 随机获取 生成的 ImageGroup 实体/// </summary>/// <returns></returns>GameObject GetRandomImageGroup() {int index = Random.Range(0, m_ImageGroupGoLst.Count);GameObject go = m_ImageGroupGoLst[index];return go;}/// <summary>/// 刷新 UI  界面/// </summary>void RefreshUICanvas(){// 强制刷新Canvas.ForceUpdateCanvases();// Layout 重建LayoutRebuilder.ForceRebuildLayoutImmediate(ParentTran.GetComponent<RectTransform>());// contentSizeFitter 设置ContentSizeFitter contentSizeFitter = ParentTran.GetComponent<ContentSizeFitter>();if (contentSizeFitter != null){contentSizeFitter.SetLayoutHorizontal();contentSizeFitter.SetLayoutVertical();}}#endregion
}

http://www.lryc.cn/news/265532.html

相关文章:

  • linux 中 C++的环境搭建以及测试工具的简单介绍
  • 448. 找到所有数组中消失的数字
  • 为何在下雪天它“失宠”了,传统雪地靴居然不适合下雪穿
  • 第34节: Vue3 调用内联处理程序中的方法
  • JavaScript--明明白白Promise (Park One)
  • el-form与el-upload结合上传带附件的表单数据(后端篇)
  • postMessage——不同源的网页直接通过localStorage/sessionStorage/Cookies——技能提升
  • 上市公司-绿色投资者数据集(2000-2022)
  • 3 pandas之dataframe
  • vue-内网,离线使用百度地图(地图瓦片图下载静态资源展示定位)
  • OpenFeign 万字教程详解
  • 全自动双轴晶圆划片机:半导体制造的关键利器
  • Android Studio 安装和使用
  • 【已解决】Java中,判断:集合中是否包含指定元素(模糊匹配)比如权限中的user:list或者是user:*这种判断
  • 【基于激光雷达的路沿检测用于自动驾驶的真值标注】
  • 【Spring实战】配置多数据源
  • DevOps系列文章 : 使用dpkg命令打deb包
  • linux sed命令操作大全
  • Vue2+Vue3组件间通信方式汇总(3)------$bus
  • 前端基础location的使用
  • Android JNI入门到基础
  • 60.乐理基础-打拍子-V字打拍法
  • 列表对象的时间进行中文格式化处理
  • vi和vim的区别
  • 【昆明*线上同步】最新ChatGPT/GPT4科研实践应用与AI绘图技术及论文高效写作
  • 【解决Typora图片不是显示问题】PicGo+Github+Typora+ onedrive/坚果云 实现笔记同步
  • 使用Guava轻松创建和管理不可变集合
  • 深入了解 Android 中的应用程序签名
  • 说说 style gan 中的感知路径长度(Perceptual Path Length)
  • 基于JAVA的厦门旅游电子商务预订系统 开源项目