首页
学习
活动
专区
圈层
工具
发布

零基础入门 23: UGUI ScrollView

之前在讲解ScrollBar这个滚动条的时候,这个图就曾经使用过,也讲解过,ScrollBar滚动条通常会配合滚动视图ScrollView进行使用。 滚动视图,顾名思义,实际就是可以滚动的UI视图。...【方式一】 在早期的UGUI版本中,Unity并没有一个现成的滚动视图控件可以提供给大家使用,而是提供了一个名为ScrollRect的组件,配合Mask组件来完成ScrollView的创建和使用。...这里我创建一些图片,为他们赋予不同的颜色让大家方便区分。 ?...然后我们在复制粘贴两个Image,调成不同的颜色做区分 ? 然后我们将Content拖动到JiminScrollView1上的ScrollRect组件上,有一个名为Content的属性即可。...接下来就是为3个图片修改颜色作为区分。 ? 运行后看看效果吧 ?

3.6K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Unity基础(24)-UGUI

    Color(颜色):图片叠加的颜色。...(在Hierarchy面板中右键创建UI->ScrollView,在子物体中找到Content,需要按行列布置的游戏物体都作为Content的子物体挂在Content下)(以开发垂直的ScrollView...于是自己写了一个脚本,根据Content下的子物体的个数来控制Content的宽高(原理是修改RectTransform的sizedelta) /* * 说明:挂在UGUI中ScrollView中的...Content游戏物体下(在Hierarchy面板中右键创建UI->ScrollView,在子物体中找到Content) * * 功能:解决ScrollView中Content不能根据实际Content...无限滚动 scrollview理论上是支持无限多个item单元(即滚动的单元条目),但实际应用中,我们在一开始实例化几个或者十几个item对象时一般是没问题,但是当item非常多时,几百或者上千时,完全实例化比较耗时消耗性能大

    5.1K20

    零基础入门 19: UGUI ScrollBar

    通常在实际项目中,对ScrollBar的应用非常简单,主要用于配合TableView或者ScrollView来进行使用,下一节我们将说明一下Unity里的ScrollView即滚动视图。...然后再来看一下这个ScrollBar的结构。 ? 中间的Sliding Area是一个空的父级对象。下面的handle就是我们所看见的图里的白色区域,而scrollbar是图里的灰色背景条。...通常来说,我们在使用的时候直接设置ScrollBar背景图以及Handle的贴图,然后将scrollBar关联给某一个tableView或者ScrollView即可使用了。...Scrollbar是配合ScrollRect组件使用的,通常一个ScrollRect滚动视图才会增加Scrollbar这样的一个滚动条,而Unity也为我们对ScrollBar的使用做到了最极致的方便。...而实际中的项目也是如此,我们通常在使用滚动视图的时候,只需要创建一个Scrollbar并且设置好合理的显示方式和控制逻辑即可在scrollRect的带动下,完成滚动条的自动滚动。 效果图如下。 ?

    1.6K20

    如何判断 ScrollView、List 是否正在滚动中

    比如在 SwipeCell[3] 中,需要在可滚动组件开始滚动时,自动关闭已经打开的侧滑菜单。遗憾的是,SwiftUI 并没有提供这方面的 API 。...本文将介绍几种在 SwiftUI 中获取当前滚动状态的方法,每种方法都有各自的优势和局限性。...iOS 系统在 macOS 下的 eventTracking 模式中,该方案的表现并不理想屏幕中只能有一个可滚动控件由于任意可滚动控件滚动时,都会导致主线程的 Runloop 切换至 tracing...preference 与 onChange 的调用时机非常类似,只有在值发生改变后才会传递数据。在 ScrollView、List 发生滚动时,它们内部的子视图的位置也将发生改变。...判断的准确度没有前两种方式高当可滚动组件中的内容出现了非滚动引起的尺寸或位置的变化( 例如 List 中某个视图的尺寸发生了动态变化 ),本方式会误判断为发生了滚动,但在视图的变化结束后,状态会马上恢复到滚动结束滚动开始后

    5K40

    写了个自定义指令,支持elementUI2.0下拉框组件虚拟列表显示

    $el.childNodes; const scrollView = wrap.getElementsByClassName('el-scrollbar__view')[0];...= data.length; // 所有数据的总条数 // 设置el-scrollbar__view的高度 scrollView.style.height = `${total * rowHeight}...this.selectAttrs.endIndex = endIndex; this.optionsData = sourceData.slice(startIndex, endIndex); }, 以上比较关键的一行代码就是根据回调函数中的...= data.length; // 所有数据的总条数 // 设置el-scrollbar__view的高度 if (filterable) { scrollView.style.height..., ... } 最终结果就是下面这样了 vue-virtual-scroll-list插件实现虚拟列表 在以上例子中我们尝试用自己写的指令已经满足虚拟列表,那如果不用自己写的指令,使用社区的方案

    2.7K20

    css样式中的颜色格式

    颜色对于 css 来说是非常重要的,网站之所以会呈现出五彩斑斓的样式,就是这些颜色样式起的作用。在 css 中,对于颜色样式有很多种表达方式,今天我们就来盘点下 css 中颜色的格式。...名字颜色 在 css 中,默认定义了很多名字颜色,比较常见的比如 yellow,blue,red,pink 等,实际上,css 中一共定义了 140 个颜色名字,这些名字你都可以直接拿来使用。...在 css 中,red,green,blue 被称作三通道,每个通道的值是从 0-255,通过混合这些通道颜色,我们就可以创造出 1600 多万种颜色。...在 HSL 中,我们的色调是在 0deg-360deg 之间,转一圈的大致颜色范围就是红橙黄绿青蓝紫,饱和度是在 0-100%之间,亮度是在 0%-100%之间。...在 HSL 中,饱和度范围从 0%(无饱和)到 100%(完全饱和)。这是可能的,因为我们知道我们正在谈论 sRGB 色彩空间,一个有限的调色板。

    3.3K30

    【Flutter 组件集录】NotificationListener| 8月更文挑战

    下面是 ScrollView#build 源码中的一部分,可以看出,当 keyboardDismissBehavior 为 onDrag 时,所构建的组件上层会嵌套一个 NotificationListener...参数,会为 ScrollView 中定义的该成员进行初始化。...源码中对 NotificationListener 的使用 最经典的当属 Scrollbar 源码中对 NotificationListener 的使用,它监听 ScrollNotification 的五种通知...这样 ListView 的滑动事件向上分发时,到 NotificationListener 时,被拦截,就无法再向上传到 Scrollbar 中的监听。...也就是说 Scrollbar 不起作用了。 Flutter 的滑动体系中通过 Notification 的分发与监听,让我们可以在任何地方去监听组件的滑动。这样滑动事件的得到了极大地解耦。

    2.2K20
    领券