闲话不表，书接上回，在上回书说到，创建了一个List用来显示元素，这次就要做一个显示并且可以做修改的界面

1.设计UI

在这里我在UIBuilder中设计了一个简单的UI，以供显示和修改数据，这里要注意左边的命名方式，并且将ID设置为ReadOnly

2.实现选择功能

我们简单的修改一下之前的代码：

	VisualElement root;
	//保存itemList选中的物品
    private static XElement selectedItem;
	private void OnEnable()
    {
    	root = rootVisualElement;
    	//...
   		//为之前的ListView添加selectionChange函数，设置选中的物品
   		BindItemData();
   		itemList.onSelectionChange += (obj) => 
        {
            selectedItem = itemList.selectedItem as XElement;
            RefreshItemData();
            //Debug.Log(selectedItem.Element("Name").Value);
        };
   	}

    //-------------绑定数据-----------
    TextField IName;
    IntegerField IID;
    EnumField IType;
    IntegerField IItemAmount;
    //事先绑定所需的数据
    private void BindItemData()
    {
        IName = root.Q<TextField>("IName");
        IID = root.Q<IntegerField>("IID");
        IType = root.Q<EnumField>("IType");
        IType.Init(CItemType.Default);
        IItemAmount = root.Q<IntegerField>("IItemAmount");
    }
    //用于在点击ListView的物品后在UI中显示出来
    private void RefreshItemData()
    {
        if (selectedItem == null) return;
        IName.value = selectedItem.Element("Name").Value;
        IID.value = Convert.ToInt32(selectedItem.Element("ID").Value);
        IType.value = (CItemType)(Convert.ToInt32(selectedItem.Element("ItemType").Value));
        IItemAmount.value = Convert.ToInt32(selectedItem.Element("ItemAmount").Value);
    }
	
	//相较之前将更新函数独立出来
    private void OnFocus()
    {
        Refresh();
    }
    //用于在修改数据后刷新List列表
    private void Refresh()
    {
        ItemManager.Instance.Refresh();
        datas = new List<XElement>(ItemManager.Instance.GetAllElements());
        itemList.itemsSource = datas;
        itemList.Refresh();
    }

现在我们就能够实现如下的点击效果：

3.实现修改后保存功能

只需要为Save按钮写上保存功能即可，这里顺便将添加元素的功能修改一下，用来添加一个空的物品

	private void OnEnable()
    {
    	//...
		AddElementButton.clicked += () => 
        {
            CItem item = new CItem()
            {
                name = "Default",
                //用来获得最新的ID
                id = ItemManager.Instance.GetLatestID(),
                itemType = CItemType.Default,
                itemAmount = 0
            };
            ItemManager.Instance.AddElement(item);
            ItemManager.Instance.Save();
            Refresh();
        };
		//...
    	//保存修改
        Button saveButton = root.Q<Button>("Save");
        saveButton.clicked += () => 
        {
            SaveItemData();
            Debug.Log(string.Format("物品{0}的数据保存成功！",selectedItem.Element("Name").Value));
        };
    }

	private void SaveItemData()
    {
        if (selectedItem == null) return;
        selectedItem.Element("Name").Value = IName.value;
        selectedItem.Element("ID").Value = IID.value.ToString();
        //这里感觉写麻烦了，如果有简单的方法请分享一下
        selectedItem.Element("ItemType").Value = ((int)Enum.Parse(typeof(CItemType), IType.value.ToString())).ToString();
        selectedItem.Element("ItemAmount").Value = IItemAmount.value.ToString();
        ItemManager.Instance.Save();
        Refresh();
    }

public class ItemManager : Singleton<ItemManager>
{
	//添加一个获取ID的函数
	public int GetLatestID()
    {
        return System.Convert.ToInt32(((XElement)root.LastNode).Element("ID").Value) + 1;
    }
}

最后展示一下这两个功能：