Unity 6.3
0 онлайн 85 гостей 3 в системе
Вход
← Руководство

Добавление гиперссылок в текст

Для добавления гиперссылок к тексту в Редакторе UI или во время выполнения можно использовать теги Rich Text. В демонстрационных целях в этом примере показано, как добавить гиперссылки в окне пользовательского Редактора.

Примерный обзор

В этом примере создается окно редактора с тремя гиперссылками. Первые две ссылки создаются с помощью тегов <link>, которые используют ссылку IDs. Третья ссылка использует тег <a> с атрибутом href для определения места назначения.

Третья ссылка создается с помощью тега <a>, который использует атрибут href для определения места назначения ссылки.

Тег <link> — это богатый текстовый тег, который вы можете использовать для создания ссылок в UI Toolkit. Используйте тег <link>, если вам нужно создать много ссылок или вы хотите определить поведение ссылок с помощью скриптов C#.

В этом примере для определения логики тега <link> используются следующие события:

Примечание: Эти события являются экспериментальными, так что они все еще находятся в процессе становления достаточно стабильными для выпуска.

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

Создание примера

Для создания настраиваемого окна Редактора с гиперссылками с помощью UI Toolkit выполните следующие действия:

  1. Создайте проект в Unity с любым шаблоном.

  2. Щелкните правой кнопкой мыши папку Assets и выберите Создать > UI Toolkit > Окно редактора.

  3. В UI Toolkit Editor Window Creatorвведите LinkTag в поле C#.

  4. Выберите Confirm. Это создаст папку Editor со скриптом C#, файлами UXML и USS для вашего настраиваемого окна.

  5. Дважды щелкните LinkTag.uxml, чтобы открыть его в UI Builder.

  6. В UI Builder выберите первую метку.

  7. Заменить поле Текст следующим содержимым:

    Link to <link="1"><color=#40a0ff><u>Unity</u></color></link>
Link to <link="2"><color=#40a0ff><u>UITK Discussions</u></color></link>!

  8. Включить Включить богатый текст.

  9. Выберите Добавить класс стиля в список.

  10. Вход link и нажмите Вход ключ. Это добавляет link класс к первой метке.

  11. Выберите вторую метку и замените поле Текст следующим содержимым:

    Link to <a href="https://www.google.com/"><u>Google</u></a> using <noparse><a></noparse> tag.

  12. Включить Включить богатый текст.

  13. Сохраните и закройте UI Builder.

  14. Заменить содержание LinkTag.uss следующим текстом:

    Label {
    font-size: 75px;
}
    
/*Turn the mouse pointer into a hand pointer when you hover over the link text.
  Note that the cursor override for the link value doesn’t work at runtime.*/
    
.link-cursor {
    cursor: link;
}

  15. Заменить содержание LinkTag.cs следующим текстом:

    using System.Collections.Generic;
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEngine.UIElements.Experimental;
    
public class LinkTag : EditorWindow
{
    [SerializeField]
    private VisualTreeAsset m_VisualTreeAsset = default;
    
    [MenuItem("Window/LinkTag Sample")]
    public static void ShowExample()
    {
        LinkTag wnd = GetWindow<LinkTag>();
        wnd.titleContent = new GUIContent("LinkTag Sample");
    }
    
    readonly string linkCursorClassName = "link-cursor";
    Dictionary<int, string> m_UrlLookup;
    Label linkLabel;
    
    public void OnEnable()
    {
        // Use the dictionary to map link IDs to URLs.
        // The link ID is the number in the link tag, and the URL is the destination.
        // This is a simple example, in a real application you can define a more complex structure.
        m_UrlLookup = new Dictionary<int, string>()
        {
            { 1, "https://www.google.com/" },
            { 2, "https://discussions.unity.com/" }
        };
    }
    
    public void CreateGUI()
    {
        VisualElement uxml = m_VisualTreeAsset.Instantiate();
        rootVisualElement.Add(uxml);
    
        linkLabel = rootVisualElement.Q<Label>(className: "link");
    
        linkLabel.RegisterCallback<PointerDownLinkTagEvent>(HyperlinkOnPointerDown);
        linkLabel.RegisterCallback<PointerUpLinkTagEvent>(HyperlinkOnPointerUp);
        linkLabel.RegisterCallback<PointerMoveLinkTagEvent>(HyperlinkPointerMove);
        linkLabel.RegisterCallback<PointerOverLinkTagEvent>(HyperlinkOnPointerOver);
        linkLabel.RegisterCallback<PointerOutLinkTagEvent>(HyperlinkOnPointerOut);
    }
    
    void HyperlinkOnPointerOver(PointerOverLinkTagEvent _)
    {
        linkLabel.AddToClassList(linkCursorClassName);
    }
    void HyperlinkPointerMove(PointerMoveLinkTagEvent _) { }
    void HyperlinkOnPointerOut(PointerOutLinkTagEvent _)
    {
        linkLabel.RemoveFromClassList(linkCursorClassName);
    }
    
    void HyperlinkOnPointerDown(PointerDownLinkTagEvent _) { }
    
    void HyperlinkOnPointerUp(PointerUpLinkTagEvent evt)
    {
        var linkID = int.Parse(evt.linkID);
        if (m_UrlLookup.TryGetValue(linkID, out var url))
            Application.OpenURL(url);
    }
    
}

Проверка связи

Чтобы проверить, работает ли ссылка, выполните следующие действия:

  1. В руководстве выберите Окно > LinkTag Образец.
  2. Выберите ссылки в настраиваемом окне, чтобы открыть связанные веб-сайты.

Дополнительные ресурсы