本教程介绍了如何使用Unity的UI Toolkit（工具包）焦点事件在TextField中实现Placeholder（占位符）。
焦点事件
UI Toolkit允许处理UI元素何时获得焦点以及何时失去焦点，这些事件可以像任何其他事件一样使用方法进行注册。
textField.RegisterCallback<FocusInEvent>(OnFocusIn);
textField.RegisterCallback<FocusOutEvent>(OnFocusOut);有关UI Toolkit中事件的更多信息，请参阅3D天堂站内文章。
显示占位符
现在，编写一个使用此焦点事件TextField来Placeholder显示的脚本。
using UnityEditor;
using UnityEngine.UIElements;
public sealed class PlaceholderExample : EditorWindow
{
private const string PlaceHolderText = "This is placeholder";
private bool _isPlaceholderVisible;
public void CreateGUI()
{
var textField = new TextField();
rootVisualElement.Add(textField);
// 注册焦点事件的回调
textField.RegisterCallback<FocusInEvent>(OnFocusIn);
textField.RegisterCallback<FocusOutEvent>(OnFocusOut);
// 由于TextField一开始是空的，所以显示Placeholder
ShowPlaceHolder(textField);
}
// 焦点命中时的动作
// 如果占位符可见，则隐藏它
private void OnFocusIn(FocusInEvent evt)
{
var textField = (TextField)evt.target;
if (!_isPlaceholderVisible)
return;
HidePlaceHolder(textField);
}
// 失去焦点时的处理
// 如果文本字段为空，则显示占位符
private void OnFocusOut(FocusOutEvent evt)
{
var textField = (TextField)evt.target;
var shouldShowPlaceholder = string.IsNullOrEmpty(textField.text);
if (!shouldShowPlaceholder)
return;
ShowPlaceHolder(textField);
}
private void ShowPlaceHolder(TextField textField)
{
textField.SetValueWithoutNotify(PlaceHolderText);
_isPlaceholderVisible = true;
}
private void HidePlaceHolder(TextField textField)
{
textField.value = string.Empty;
_isPlaceholderVisible = false;
}
[MenuItem("Window/PlaceholderExample")]
public static void ShowWindow()
{
GetWindow<PlaceholderExample>("PlaceholderExample");
}
}
没有做任何有难度的事情，TextField在失焦的时候如果它是空的就设置Placeholder。
执行结果如下：
设置占位符样式
接下来，由于Placeholder的颜色大部分是灰色的，将做一些设置样式。
首先，创建一个如下所示的样式表：
.unity-text-field__placeholder > .unity-base-text-field__input {
color: #888888;
}接下来，向之前的代码添加处理，仅当占位符可见时才应用此处理。
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public sealed class PlaceholderExample : EditorWindow
{
private const string PlaceHolderText = "This is placeholder";
private bool _isPlaceholderVisible;
private string _placeholderClassName;
public void CreateGUI()
{
_placeholderClassName = TextField.ussClassName + "__placeholder";
rootVisualElement.styleSheets.Add(Resources.Load<StyleSheet>("style"));
var textField = new TextField();
rootVisualElement.Add(textField);
textField.RegisterCallback<FocusInEvent>(OnFocusIn);
textField.RegisterCallback<FocusOutEvent>(OnFocusOut);
ShowPlaceHolder(textField);
}
private void OnFocusIn(FocusInEvent evt)
{
var textField = (TextField)evt.target;
if (!_isPlaceholderVisible)
return;
HidePlaceHolder(textField);
}
private void OnFocusOut(FocusOutEvent evt)
{
var textField = (TextField)evt.target;
var shouldShowPlaceholder = string.IsNullOrEmpty(textField.text);
if (!shouldShowPlaceholder)
return;
ShowPlaceHolder(textField);
}
private void ShowPlaceHolder(TextField textField)
{
// 应用风格
textField.AddToClassList(_placeholderClassName);
textField.SetValueWithoutNotify(PlaceHolderText);
_isPlaceholderVisible = true;
}
private void HidePlaceHolder(TextField textField)
{
// 解锁风格
textField.RemoveFromClassList(_placeholderClassName);
textField.value = string.Empty;
_isPlaceholderVisible = false;
}
[MenuItem("Window/PlaceholderExample")]
public static void ShowWindow()
{
GetWindow<PlaceholderExample>("PlaceholderExample");
}
}现在应用了占位符样式。
Placeholder
自Unity2023.1起，TextFields和ValueTypeFields支持占位符。
可以使用以下API以编程方式实现相同的目的：
TextField.textEdition.placeholder
TextField.textEdition.hidePlaceholderOnFocus占位符可见时的USS类名是：
.unity-base-text-field__input--placeholder…
以上是关于如何使用Unity的UI Toolkit焦点事件在TextField中实现占位符的全部内容，如果你有任何反馈，请随时在本页面下方留言。