Unity UGUI 效果之 Scroll 根据内容多少，动态实现鼠标滑动滚动浏览预览（ Scrollbar + ScrollRect + XXLayoutGroup）

清疚 2022-12-01 15:53 62阅读 0赞

![2020082810302093.png][]

# Unity UGUI 效果 之  Scroll 根据内容多少，动态实现鼠标滑动滚动浏览预览（ Scrollbar + ScrollRect + XXLayoutGroup） #

**目录**

Unity UGUI 效果 之  Scroll 根据内容多少，动态实现鼠标滑动滚动浏览预览（ Scrollbar + ScrollRect + XXLayoutGroup）

一、简单介绍

二、实现原理

三、注意实现

四、效果预览

五、实现步骤

六、关键代码

附录方法二：使用 Vertical Layout Group + Content Size Fitter 无需代码轻松实现滚动预览

--------------------

## 一、简单介绍 ##

UGUI，是Unity自带的 GUI 系统，有别于 NGUI；使用 UGUI 也能制作出比较酷炫的效果 。

本节介绍，使用 UGUI 通过代码实现在内容变化不定的情况下，动态调整Scroll等，实现可以鼠标拖动预览的效果，方法不唯一，欢迎指正。

## 二、实现原理 ##

1、ScrollRect、Scrollbar，实现可鼠标滑动滚动功能

2、Mask 遮罩多余的内容

3、XXLayoutGroup 方便排布内容

## 三、注意实现 ##

1、XXLayoutGroup  组件的 Pivot ，根据需要设定位置（例如内容向下增长，即最好Pivot 设置在中上处，（0.5，1）位置为宜）

2、这里只是实现了垂直方向的滚动滑动浏览，水平方向同理，大家可以自行实现哈

## 四、效果预览 ##

![2020082810440227.gif][]

## 五、实现步骤 ##

1、打开Unity，新建一个工程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70][]

2、添加一个 Image，最为 ScrollRect 背景，Scrollbar 动态滚动滑动使用，这里GameObject，添加 VerticalLayoutGroup，垂直布局

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1][]

3、ScrollRectDynamicHeight\_Image，添加 Mask ，ScrollRect 组件，并对应赋值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2][]

4、ItemsContent\_VerticalLayoutGroup 设置如下，根据需要设置，不唯一

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3][]

5、Scrollbar 合理调整大小，设置可以默认，不唯一

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4][]

6、Item\_Image 作为 ItemsContent\_VerticalLayoutGroup  的 item 条目，这里只是示范，根据具体内容指定哈

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5][]

7、新建脚本，实现动态内容滚动滑动预览的功能

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6][]

8、ScrollVerticalDynamicHeightRect

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7][]

9、运行场景，效果如上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 8][]

## 六、关键代码 ##

1、ScrollVerticalDynamicHeightRect

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UI;
    
    namespace XANTools
    {
        public class ScrollVerticalDynamicHeightRect : MonoBehaviour
        {
            // 设置获取相关参数
            public Transform ItemsContent_VerticalLayoutGroup;
    
            // Item 预制体
            public GameObject itemImagePrefab;
    
            // ScrollRect 对象（动态激活他，看情况使用）
            public ScrollRect scrollRect;
    
            // GridVertical 物体的原始大小
            private Vector2 originSize;
    
            // Use this for initialization
            void Start()
            {
    
                //获取最初goParent的宽高
                originSize = ItemsContent_VerticalLayoutGroup.GetComponent<RectTransform>().sizeDelta;
    
            }
    
            // Update is called once per frame
            void Update()
            {
    
                //按下空格键调用添加ItemImage
                if (Input.GetKeyDown(KeyCode.Space))
                {
                    // 随机增加若干个 Item
                    AddScrollItem(Random.Range(1,5));
                }
    
            }
    
            /// <summary>
            /// 生成指定数量 Item，实现动态调整 Scroll 
            /// </summary>
            /// <param name="count"></param>
            private void AddScrollItem(int count)
            {
    
                //生成ItemImage
                for (int i = 0; i < count; i++)
                {
                    GameObject go = Instantiate(itemImagePrefab) as GameObject;
                    go.transform.SetParent(ItemsContent_VerticalLayoutGroup);
    
                }
    
                //调整ScrollRect边框大小
                //获取当前的ItemImage的实际个数
                int itemImageCount = ItemsContent_VerticalLayoutGroup.childCount;
    
                //计算当前实际生成ItemImage所需要的goParent的高度
                float ScrollRectY = itemImageCount * ((itemImagePrefab.GetComponent<RectTransform>().sizeDelta.y)
                    + ItemsContent_VerticalLayoutGroup.GetComponent<VerticalLayoutGroup>().spacing);
    
                //比原先小则，保持原有尺寸不变，反之，高度设置为所需要的
                if (ScrollRectY <= originSize.y)
                {
    
                    ItemsContent_VerticalLayoutGroup.GetComponent<RectTransform>().sizeDelta = originSize;
                    // 不必要激活可滚动浏览
                    scrollRect.enabled = false;
                }
                else
                {
    
                    ItemsContent_VerticalLayoutGroup.GetComponent<RectTransform>().sizeDelta = new Vector2(originSize.x, ScrollRectY);
                    // 激活可滚动浏览
                    scrollRect.enabled = true;
                }
    
    
    
            }
        }
    }

## 附录方法二：使用 Vertical Layout Group + Content Size Fitter 无需代码轻松实现滚动预览 ##

原理简述：Content Size Fitter 会自动根据Vertical Layout Group 的子物体的多少自动调整 Vertical Layout Group 的整体大小，然后再 Scroll 实现滚动预览

1、在场景中添加一个Image，调整大小，挂载 ScrollRect 和 Mask ，把 LayoutContent 和 Scrollbar 对应赋值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 10][]

2、Layout Content 添加 VerticallayoutGroup 和 Content Size Fitter ，其中 Content Size Fitter 的对应属性 vertical Fit (根据需要对应设置) Preferred Size ，这样 Layout Content 大小就会随着子物体的多少自动调整大小了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 11][]

3、Scrollbar UGUI 自带的UI组件，无需做其他修改，只是把滚动预览方向改为竖直即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 12][]

4、Layout Content 子物体，根据需要添加好，运行场景，效果如下

![20201004091122541.gif][]

5、注意，如果Layout Content每次添加子物体，预览总从中部开始，可以调整Pivot 为（0.5，1），调整一次

Layout Content 的边框位置，下次添加子物体和预览就不会从中部开始了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 15][]

[2020082810302093.png]: /images/20221123/6f011a8571f74b1d8035cdee7223ff6a.png
[2020082810440227.gif]: /images/20221123/a9d387c78fa347438a14dfbbf7b33f2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70]: /images/20221123/9b07582e9ea74eb2aa9372f2cdd09ab5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1]: /images/20221123/15cbe4f9af50451aadcd8b482f23173a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2]: /images/20221123/f91c7b3bac644dcdbb9e70ef5f448d75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3]: /images/20221123/e46d23e67a63419aa4360fb7f0ce1642.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4]: /images/20221123/6badbba3595045c594c8e40bd301ec64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5]: /images/20221123/8b2ca3681b0f4c2e9a5824922e01a17a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6]: /images/20221123/905a57a43e5849319060ce71ad70797f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7]: /images/20221123/7f66902e2a6c4851b2258c4901ae2006.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 8]: /images/20221123/c2bac39063db45f7a7e960ec0bcc7341.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 9]: /images/20221123/5d56024059f84d2da50d377990c03532.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 10]: /images/20221123/a8ddac414ea64594b89b043b6c34a1c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 11]: /images/20221123/11dcb0f40fb94f198def9ea33c654fea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 12]: /images/20221123/16f7740f8d544e4a9d8a20077740938b.png
[20201004091122541.gif]: /images/20221123/00d05eb804c34bef9d14fb0fc382d49f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 13]: /images/20221123/0124c7e4b9ee4f5eb4a52eaba79fcc67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 14]: /images/20221123/b3a0e40f348541f187e057b99b708d3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 15]: /images/20221123/cd7a2e17200e4f4090b10c79ea48d513.png