Unity UGUI 效果之 ScrollView 轻松实现滚动（内容多少大小可以动态自动调整）预览效果

太过爱你忘了你带给我的痛 2022-12-11 15:26 226阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70][]

# Unity UGUI 效果 之 ScrollView 轻松实现滚动（内容多少大小可以动态自动调整）预览效果 #

**目录**

Unity UGUI 效果 之 ScrollView 轻松实现滚动（内容多少大小可以动态自动调整）预览效果

一、简单介绍

二、实现原理

三、注意实现

四、效果预览

五、实现步骤

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

## 一、简单介绍 ##

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

本节介绍，使用 UGUI 自带的 ScrollView 和 ContentSizeFitter 组件，轻松实现鼠标拖动滚动预览的效果，方法不唯一，欢迎指正。

## 二、实现原理 ##

1、Scroll View，实现可鼠标滑动滚动功能

2、Content Size Fitter 动态随内容大小调整大小

3、XXLayoutGroup 方便排布内容

## 三、注意实现 ##

1、Content Size Fitter 调整你那个方向可以根据需设置为 Preferred Size

## 四、效果预览 ##

![20201004094732428.gif][]

## 五、实现步骤 ##

1、打开Unity，新建空工程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1][]

2、在场景中添加 ScrollView 组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2][]

3、在content 上添加 XX Layout Group 组件（根据自己需要滚动预览方向选择）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3][]

4、添加预览内容

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4][]

5、运行场景，即可滚动预览内容了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5][]

6、内容，代码中添加的话，可以使用 Content Size Fitter ，根据需要的方向，设置 Preferred Size自动调整 Content 的大小，实现动态调整预览的效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6][]

7、运行场景，效果如上

![20201004094732428.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70]: /images/20221123/d3fc23b78b004d509e4433c1c70b1c52.png
[20201004094732428.gif]: /images/20221123/ba968ac4dcb04fdaaddec954aa6eec54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1]: /images/20221123/430b70b92a62414ea82d64adc14a3ab5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2]: /images/20221123/834bc10b3b5c4560838187a815fd8033.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3]: /images/20221123/fe597e673ed34477a1fa81b31656be72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4]: /images/20221123/62873c8753c749abafe2e8c39463f81d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5]: /images/20221123/6fa6e870dc084a8a8bc37d1538f2fa5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6]: /images/20221123/62375dcb18d64f5293abf68a5b040222.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7]: /images/20221123/cc3386fe291246f7a91b975969161941.png