unity UI交互制作——滚动窗口及其收放

一、要达到的效果

收纳功能：点击【步骤名称】，弹出【详细步骤页面】，再次点击则收纳该页面更多步骤自适应：【详细步骤页面】里面的小步骤可以随意添加，沿垂直方向等距离布局拖拽滑动显示：【详细步骤页面】可以用鼠标拖拽，上下滑动进行浏览

二、实现过程

本步难点：详细步骤可多可少，这些步骤沿着垂直方向等距离布局

要实现的功能用什么组件1如何实现窗口滚动ScrollView2详细步骤动态添加后自动垂直排布Vertical Layout Group3*为什么【Content组件的Tect Transform】不会在垂直方向伸展Content Size Fitter垂直自适应

上面的第3步极为关键

【Vertical Layout Group】和【Content Size Fitter】组建的参数设置：

///

public void InitContentComponent()

{

//添加 Vertical Layout Group 组件，并设置为自动布局

if (content.GetComponent() == null) content.gameObject.AddComponent();

VerticalLayoutGroup layoutGroup = content.GetComponent();

layoutGroup.childControlHeight = true;

layoutGroup.childForceExpandHeight = false;

layoutGroup.spacing = spacing; // 设置新的 Text 对象的间距

//添加ContentSizeFitter组件，内容自适应

if (content.GetComponent() == null) content.gameObject.AddComponent();

var contentFiter = content.GetComponent();

contentFiter.verticalFit = ContentSizeFitter.FitMode.PreferredSize; // 将 Vertical Fit 设置为 Preferred Size

}

三、脚本及代码

using TMPro;

using UnityEngine;

using UnityEngine.UI;

public class ScrollViewTexts : MonoBehaviour

{

///

[Header("scrollView的Content对象")]

[SerializeField]

public RectTransform content;

///

[Header("用来实例化的text对象")]

[SerializeField]

public GameObject textPrefab;

///

[Header("文本的行间距")]

[SerializeField]

public float spacing = 1f;

void Start()

{

InitContentComponent();

}

///

public void InitContentComponent()

{

//添加 Vertical Layout Group 组件，并设置为自动布局

if (content.GetComponent() == null) content.gameObject.AddComponent();

VerticalLayoutGroup layoutGroup = content.GetComponent();

layoutGroup.childControlHeight = true;

layoutGroup.childForceExpandHeight = false;

layoutGroup.spacing = spacing; // 设置新的 Text 对象的间距

//添加ContentSizeFitter组件，内容自适应

if (content.GetComponent() == null) content.gameObject.AddComponent();

var contentFiter = content.GetComponent();

contentFiter.verticalFit = ContentSizeFitter.FitMode.PreferredSize; // 将 Vertical Fit 设置为 Preferred Size

}

///

/// 文本的内容

/// text对象

public GameObject AddText(string text)

{

// 创建新的 Text 对象

GameObject newText = Instantiate(textPrefab, content);

// 设置 Text 组件的文本内容

newText.GetComponent().text = text;

// 添加 ContentSizeFitter 组件，并设置为 VerticalFitMode.PreferredSize

ContentSizeFitter sizeFitter = newText.AddComponent();

sizeFitter.verticalFit = ContentSizeFitter.FitMode.PreferredSize;

// 重新计算布局

LayoutRebuilder.ForceRebuildLayoutImmediate(content);

return newText;

}

[Header("文本内容-测试用")]

[SerializeField]

public string text;

#if UNITY_EDITOR

[ContextMenu("测试")]

#endif

void Test()

{

AddText(text);

}

}

文章来源

 您阅读本篇文章共花了：