UMG - 6:水平框与垂直框的填充间距与填充因子。覆层可以摞起来子控件。尺寸框的子布局。缩放框的留白与裁剪缩放。滚动条的样式设置与滚动属性。

(20) 垂直框与水平框

在这里插入图片描述

++ 填充间距以及填充因子

在这里插入图片描述

++ 对于水平框也是一样的

在这里插入图片描述

(21) 覆层,实现区别于画布面板、垂直框、水平框的特殊效果

在这里插入图片描述

(22) 尺寸框

在这里插入图片描述

++ 尺寸框要以屏幕所需的方式,来显示真实的宽高

在这里插入图片描述

(23)缩放框

在这里插入图片描述

++ 缩放框的伸展属性,前提是不要勾选大小到内容

在这里插入图片描述

++ 以及

在这里插入图片描述

(24)滚动框还是容器,只是是带滚动条的容器

在这里插入图片描述

++举例

在这里插入图片描述

++老师说只学这俩属性即可

在这里插入图片描述

++ 补充注释

在这里插入图片描述

++样式与滚动

在这里插入图片描述

++带上注释与讲解

在这里插入图片描述

(25) 上部阴影

在这里插入图片描述

++ 上部阴影改成图片样式

在这里插入图片描述

(26) 垂直滚动条背景图

在这里插入图片描述

++ 图像形式

在这里插入图片描述

(27)垂直滚动条上部空白图

在这里插入图片描述

++ 绘图形式

在这里插入图片描述

(28)综合举例,以及垂直滚动条的滑块

在这里插入图片描述

(29)

(30)

谢谢

<think>好的,我现在需要帮助用户在UE4或UE5UMG中实现ScrollBox添加垂直,并且为垂直设置拖拽功能。首先,我应该回顾用户提供的引用内容,看看有没有相关的信息可以参考。 根据引用[1],用户提到了在ScrollBox中使用小格作为单独的UMG控件,动态添加和布局,特别是提到了网格排布和位置计算的问题。引用[2]中的代码展示了如何在NativeConstruct中动态创建物品控件并添加到ScrollBox中。引用[3]提到了ScrollBoxCanvas Panel的结合使用来支持滚动。这些信息可以帮助我理解如何动态添加垂直到ScrollBox中。 用户现在的问题是在ScrollBox中添加垂直(Vertical Box),每个垂直里再添加节点,并且实现拖拽功能。首先,我需要确定如何在UMG中动态创建Vertical Box并添加到ScrollBox里。ScrollBox通常用于单个方向的滚动,所以如果每个垂直代表一行或一个组,可能需要将多个Vertical Box作为ScrollBox的项,每个Vertical Box内部再包含多个控件。 接下来是拖拽功能的实现。UMG本身没有内置的拖拽事件,所以需要通过重写控件的鼠标事件来处理拖拽操作。可能需要创建一个自定义的UMG控件,比如DragItemWidget,它包含处理鼠标按下、移动和释放的事件。在拖拽过程中,需要获取拖拽的控件并在屏幕上移动它,可能需要使用UDragDropOperation来管理拖拽的数据和视觉效果。 然后,我需要考虑如何将拖拽功能Vertical Box中的节点结合。每个节点(比如ItemWidget)需要能够触发拖拽,并且垂直需要能够接受拖拽操作,可能需要处理OnDrop事件来重新排列控件的位置或者更新数据。 另外,动态添加节点到垂直时,需要确保布局正确,可能需要使用Size Box来控制每个项的大小,或者使用Spacer来调整间距。引用[1]中提到使用Sizebox和网格排布,这可能对布局调整有帮助。 可能的步骤包括: 1. 创建Vertical Box控件,并作为ScrollBox的项动态添加。 2. 每个Vertical Box内部动态添加控件(ItemWidget)。 3. 为每个ItemWidget实现拖拽功能,处理鼠标事件和创建拖拽操作。 4. 在Vertical Box中处理拖拽放置,更新布局或数据。 需要检查UE的文档,确认如何正确使用Drag and Drop相关的API,比如OnMouseButtonDown、OnDragDetected、OnDrop等事件。同时,要注意控件之间的层级关系,确保拖拽时能够正确捕获事件,并且放置目标能够接收拖拽事件。 可能遇到的问题包括拖拽时控件的视觉反馈、数据同步以及布局更新。例如,当拖拽一个ItemWidget到另一个Vertical Box时,需要从原Vertical Box移除该控件,并添加到目标Vertical Box中,同时更新ScrollBox的布局。引用[2]中的动态创建和添加控件的方法可以借鉴到这里。 此外,需要考虑性能问题,特别是在大量控件的情况下,频繁的添加和移除可能会影响性能,所以可能需要使用虚拟化或对象池来优化。 最后,需要测试拖拽功能在不同情况下的表现,比如在同一个Vertical Box内拖拽排序,或者跨Vertical Box拖拽移动,确保逻辑正确,数据一致。</think>在UE4/UE5中实现ScrollBox嵌套垂直并添加拖拽功能,需按以下步骤操作: ### 一、基础结构搭建 1. **创建主界面**:新建`UserWidget`蓝图(如WBP_Inventory),添加`ScrollBox`控件命名为`MainScrollBox` 2. **创建垂直容器**:新建`UserWidget`(如WBP_VerticalContainer),添加: - `VerticalBox`控件 - `SizeBox`包裹VerticalBox确保正确尺寸计算 - 添加`OnDrop`事件处理拖放逻辑 ```cpp // WBP_VerticalContainer.h UPROPERTY(BlueprintReadWrite, meta=(BindWidget)) class UVerticalBox* ItemContainer; UFUNCTION() void HandleOnDrop(UWidget* PayloadWidget); ``` ### 二、动态添加逻辑 1. **初始化垂直容器**: ```cpp // 在主界面NativeConstruct中 TSubclassOf<UUserWidget> VerticalContainerClass = LoadClass<UUserWidget>(...); for(int i=0; i<5; i++){ // 示例添加5垂直容器 UVerticalContainerWidget* NewContainer = CreateWidget<UVerticalContainerWidget>(...); MainScrollBox->AddChild(NewContainer); } ``` 2. **动态添加项**: ```cpp // 在VerticalContainer的初始化函数中 TSubclassOf<UDraggableItemWidget> ItemClass = ...; for(int j=0; j<3; j++){ // 每个容器添加3个项 UDraggableItemWidget* NewItem = CreateWidget<UDraggableItemWidget>(...); ItemContainer->AddChildToVerticalBox(NewItem); } ``` ### 三、拖拽功能实现[^2] 1. **可拖拽项配置**: ```cpp // DraggableItemWidget.h UPROPERTY(EditDefaultsOnly) class UTexture2D* DragVisualTexture; virtual FReply NativeOnMouseButtonDown(...) override; virtual void NativeOnDragDetected(...) override; ``` 2. **拖拽事件处理**: ```cpp FReply UDraggableItemWidget::NativeOnMouseButtonDown(...){ if(IsDesigner()) return FReply::Unhandled(); return FReply::Handled().DetectDrag(TakeWidget(), EKeys::LeftMouseButton); } void UDraggableItemWidget::NativeOnDragDetected(...){ UDragDropOperation* DragOp = NewObject<UDragDropOperation>(); DragOp->Payload = this; DragOp->DefaultDragVisual = NewObject<UImage>(...); DragOp->Pivot = EDragPivot::MouseDown; UWidgetBlueprintLibrary::CreateDragDropOperation(..., DragOp); } ``` ### 四、拖放接收处理 1. **垂直容器接收设置**: ```cpp // VerticalContainerWidget.cpp void UVerticalContainerWidget::HandleOnDrop(UWidget* Payload){ if(UDraggableItemWidget* DraggedItem = Cast<UDraggableItemWidget>(Payload)){ // 计算插入位置 int32 InsertIndex = CalculateDropPosition(GetCachedGeometry().AbsoluteToLocal(DragOp->GetDragDropPosition())); // 从原容器移除 DraggedItem->RemoveFromParent(); // 添加到新位置 ItemContainer->InsertChildAt(InsertIndex, DraggedItem); // 更新PlayerState数据[^1] UpdateInventoryData(); } } ``` ### 五、注意事项 1. **布局优化**: - 使用`Spacer`控件保持均匀间隔 - 设置`VerticalBox`的`Size.Auto`属性确保自适应 - 为ScrollBox添加`ScrollBarThickness`调整滚动条样式 2. **性能优化**: - 使用`WidgetPool`回收控件 - 限制单帧最大添加数量 - 对不可见区域使用虚拟化渲染
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhangzhangkeji

谢谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值