使用鼠标拖拽来实现列表的滚动效果

使用鼠标拖拽来实现列表的滚动效果

场景搭建

使用鼠标拖拽来实现列表的滚动场景

scrollContainer作为滚动容器,调整container大小

为scrollContainer创建子节点GridContontainer为表格,设置columns属性为任意数字,这个示例中为3

在GridContainer下设置PanelContainer为每一个单元格,并且设置的宽高属性Min Size

元素搭建示意图

脚本编写

为ScrollContainer创建脚本,监听鼠标的点击以及拖拽事件,在信号面板中创建对应的信号gui_input

extends ScrollContainer

var isDrag = false
var startPos = 0
var dragDir = 0 # 鼠标滚动方向

func _on_ScrollContainer_gui_input(event):
    if event is InputEventMouseButton and event.is_pressed():
        isDrag = true
        startPos = event.position.y
    
    if event is InputEventMouseButton and event.is_pressed():
        isDrag = false
        startPos = 0
        # 缓动效果
        var tween = Tween.new()
        add_child(tween)
        # 属性,开始值,目标值,时间,运动曲线,缓动效果
        tween.interpolate_method(self, "set_v_scroll", self.get_v_scroll(), self.get_v_scroll() + 15 * dragDir, 0.2, Tween.TRANS_LINEAR, Tween.EASE_IN_OUT)
        # 设置回调销毁
        tween.interpolate_callback(tween, 0.2, "queue_free")
        # 开启缓动
        tween.start()
    
    if isDrag:
        var offset = event.position.y - startPos
        if offset > 0:
            dragDir = -1
        elif offset < 0:
            dragDir = 1
        self.set_v_scroll(self.get_v_scroll() - offset)
        startPos = event.position.y

现在基本功能已经完成,但是会发现当鼠标点击到GridContainer进行拖动会发现拖动事件不生效,是因为该节点在ScrollContainer的上层,他阻止了鼠标事件,需要在该节点的Mouse属性中将filter设置为Pass,这样PanelContainer以及ScrollContainer都能够监听到鼠标事件了