滚动在 Unity 中不起作用,它根本没有反应
Scrolling does not work in Unity, it does not react at all
这样的问题,从word开始滚动根本就不行。也就是说,他没有滚动列表,尝试了 YouTube 上的各种教程,阅读了文档,甚至观看了官方课程,但有些东西没有滚动出来。如果您需要屏幕截图或类似的东西,我可以将它们提供给任何图片交换。
我不确定您的确切设置,但会为 Vertical
卷轴提供一个通用设置。如果您需要帮助将其实施到您的特定 UI,我可以调整答案或在答案中添加其他信息。
首先,这是我的层次结构的设置:
为了理解为什么我要进行所有设置,我将分解每个对象和附加的组件、锚定、着色等。
Panel_Mask
The outermost part of your scroll should be a Mask
. You can either use a Mask
component if the geometry of your sprite is non-rectangular, or you can use Rect Mask2D
, which is much more performant but only will work properly if your UI is a rectangle. You will also notice my mask component's color is almost completely clear. You do not need to do this, but the color is set up so the alpha is (1/255)
. If you have a Mask
on an object and the alpha is 0
, all childed objects will not appear. I set the background color of my scroll on the ScrollRect
object instead.
Panel_Scroll
The next layer will be your ScrollRect
. As the Mask
is the entire visible portion of your UI, the ScrollRect
defines the space where the user can scroll in the UI. As this is the case, I set the anchors to stretch-to-fit to maximize the space the scroll will work. Along with this, there are three other important steps when setting up a ScrollRect
. Firstly, check which direction you would like the scroll to be, either horizontal
or vertical
. Next, you will need to assign the Viewport
of your UI. The Viewport
is just the space where the scroll is visible to the user. As there is a Mask
component, the visible part is anything within this Mask
, so assign the Panel_Mask
as the viewport. Finally, you will need to assign the Content
of the scroll, which is the actual data that the scroll will contain and allow the user to move between. The object childed to the Panel_Scroll
, Panel_Content
is what should be assigned here.
Panel_Content
The final portion to setting up the scroll will be our content. The content is the object that holds all the data that the user can scroll over. As the number of objects can be variable, you will want to assign a HorizontalLayoutGroup
, VerticalLayoutGroup
or GridLayoutGroup
, depending on your needs. For your case, the VerticalLayoutGroup
will do the trick as your scroll has vertical movement. You can mess with the specific settings of the layout group, but for the setup I have, I made the scroll content objects fit the width of their container and define their own height. I also added a bit of spacing to differentiate between objects in the scroll. As I generally like to have the content start at the top of my UI container, I also set the anchor points of the content to be stretch-to-top-aligned, meaning it will fill the width of its parent and will always be on the top of the parent container. The final component is a ContentSizeFitter
, which forces the object to resize to the size of its children objects. As the list of objects in your list grows, the ContentSizeFitter
will grow with it, similarly, if it shrinks, so will the Panel_Content
.
Image_Data
Nothing too special with my setup as they are just image components with childed text. Depending on how you want your UI to look, you can tweak whatever you need on this object.
这里是成品卷轴的 gif 动图:
稍后在 gif 中,我展示了场景视图,以显示 Mask
组件在我上下滚动列表时的工作方式。如果您有任何问题,请告诉我。
这样的问题,从word开始滚动根本就不行。也就是说,他没有滚动列表,尝试了 YouTube 上的各种教程,阅读了文档,甚至观看了官方课程,但有些东西没有滚动出来。如果您需要屏幕截图或类似的东西,我可以将它们提供给任何图片交换。
我不确定您的确切设置,但会为 Vertical
卷轴提供一个通用设置。如果您需要帮助将其实施到您的特定 UI,我可以调整答案或在答案中添加其他信息。
首先,这是我的层次结构的设置:
为了理解为什么我要进行所有设置,我将分解每个对象和附加的组件、锚定、着色等。
Panel_Mask
The outermost part of your scroll should be a
Mask
. You can either use aMask
component if the geometry of your sprite is non-rectangular, or you can useRect Mask2D
, which is much more performant but only will work properly if your UI is a rectangle. You will also notice my mask component's color is almost completely clear. You do not need to do this, but the color is set up so the alpha is(1/255)
. If you have aMask
on an object and the alpha is0
, all childed objects will not appear. I set the background color of my scroll on theScrollRect
object instead.
Panel_Scroll
The next layer will be your
ScrollRect
. As theMask
is the entire visible portion of your UI, theScrollRect
defines the space where the user can scroll in the UI. As this is the case, I set the anchors to stretch-to-fit to maximize the space the scroll will work. Along with this, there are three other important steps when setting up aScrollRect
. Firstly, check which direction you would like the scroll to be, eitherhorizontal
orvertical
. Next, you will need to assign theViewport
of your UI. TheViewport
is just the space where the scroll is visible to the user. As there is aMask
component, the visible part is anything within thisMask
, so assign thePanel_Mask
as the viewport. Finally, you will need to assign theContent
of the scroll, which is the actual data that the scroll will contain and allow the user to move between. The object childed to thePanel_Scroll
,Panel_Content
is what should be assigned here.
Panel_Content
The final portion to setting up the scroll will be our content. The content is the object that holds all the data that the user can scroll over. As the number of objects can be variable, you will want to assign a
HorizontalLayoutGroup
,VerticalLayoutGroup
orGridLayoutGroup
, depending on your needs. For your case, theVerticalLayoutGroup
will do the trick as your scroll has vertical movement. You can mess with the specific settings of the layout group, but for the setup I have, I made the scroll content objects fit the width of their container and define their own height. I also added a bit of spacing to differentiate between objects in the scroll. As I generally like to have the content start at the top of my UI container, I also set the anchor points of the content to be stretch-to-top-aligned, meaning it will fill the width of its parent and will always be on the top of the parent container. The final component is aContentSizeFitter
, which forces the object to resize to the size of its children objects. As the list of objects in your list grows, theContentSizeFitter
will grow with it, similarly, if it shrinks, so will thePanel_Content
.
Image_Data
Nothing too special with my setup as they are just image components with childed text. Depending on how you want your UI to look, you can tweak whatever you need on this object.
这里是成品卷轴的 gif 动图:
稍后在 gif 中,我展示了场景视图,以显示 Mask
组件在我上下滚动列表时的工作方式。如果您有任何问题,请告诉我。