实例甜点 Unreal Engine 4迷你教程(4)之用C++实现添加子Widget到VerticalBox中以及ClearChildren

前置教程：

1. 实例甜点前面的三篇教程；

2. 最好看看笔者前面的一篇关于博文（后记：本来笔者想用C++做DragAndDrop的功能，但是失败了，下面是蓝图实现的方法）：

http://www.cnblogs.com/JackSamuel/p/jack975645419_0.html

重要说明：本实例是在《实例甜点 Unreal Engine 4迷你教程（1）》所建立的工程LearnWidget上进行的。

第1步：我们想要创建两个Widget管理者，回顾一下目前已有的WidgetMng类，它有如下成员和方法：

UPROPERTY()

class UUserWidget* SlaveWidget;【我所管理的奴隶widget】

UFUNCTION()

void Initialize();【我为我的slavewidget初始化】

为了使用它们，并且扩展一些新功能，我们创建2个WidgetMng的子类：

（我究竟想干啥？？我希望能够实现背包系统，就是有物品从1背包到2背包，请先看这篇博文：http://www.cnblogs.com/JackSamuel/p/jack975645419_0.html

但是摸索了一段时间之后没有找到方法，所以本文的目的就只是用C++来为VerticalBox添加子Widget）

同样，创建Bag2Mng（继承自WidgetMng）和ItemMng（继承自WidgetMng）；

第2步：创建一个widget叫做Widget_Item（它作为ItemMng的奴隶Widget）；

第3步：创建一个Widget叫做Widget_Bag1（它做谁的奴隶呢？看名字就能知道了吧）。配置如下（如果你没有办法通过图片来看出怎么拼UMG，请前往学习更为基础的部分）：

第4步：创建一个叫做Widget_Bag2的Widget，和上面的Widget_Bag1差不多就行。【后记：Bag2这个类可以不实现，没有找到通过C++实现DragAndDrop的方法】

第5步：改一下小部件的变量名：（这一步有许多小操作，注意别饭粗心了哦）

（WidgetBag1和Bag2都这样改）

第6步：创建蓝图子类（这一步是非常有必要的，通常C++纯类很难使用，都是用BP来包装，暴露给Editor使用的）：

用上面提到的三个类继承三个BP如下：

第7步：记得在BPHUD中调整：

保存编译，运行效果：

可以看到，左边和右边分别是背包1,和背包2.

第8步：【重要的一步】

加入清空儿子的逻辑：

#include "Bag1Mng.h"

#include "Runtime/UMG/Public/Components/VerticalBox.h"

#include "Runtime/UMG/Public/Components/TextBlock.h"

void ABag1Mng::Initialize()

{

Super::Initialize();

VerticalBox = Cast<UVerticalBox>( SlaveWidget->GetWidgetFromName(TEXT("VB")) );

if (VerticalBox)

{

VerticalBox->ClearChildren();//【请注意这个函数】

}

}

效果：

左侧的背包1的所有儿子都被清空了；

第9步：【本步骤企图完成：初始化20个孩子对应20个序号在背包1中】

修改代码如下：

▼代码开始
void ABag1Mng::Initialize()
{
    Super::Initialize();

    VerticalBox = Cast<UVerticalBox>( SlaveWidget->GetWidgetFromName(TEXT("VB")) );
    if (VerticalBox)
    {
        VerticalBox->ClearChildren();
    }

    for (auto i = ; i < ; i++)
    {
        UUserWidget* NewKid = CreateWidget<UUserWidget>(GWorld->GetGameInstance(), ItemWidgetClass);

        VerticalBox->AddChildToVerticalBox(
            NewKid
        );

        if(UTextBlock* Text_ID = Cast<UTextBlock>(NewKid->GetWidgetFromName(TEXT("Text_ID"))))
            Text_ID->SetText(FText::AsNumber(i));

    }
}
▲代码结束

效果：

（重要的提示：如果读者已经跟丢了步骤，某些小细节没有完全一致，那么也没有关系，实在没有办法效果一致的话就只看里头的代码，和我的效果图即可，主要是在UMG的C++编程上有一个基本的掌握）

——小江村儿的文杰 zouwj5@qq.com 2017年8月4日13:57:11