Använda listrutan Unity-användargränssnitt

Miljö för verifiering

Windows

• Windows 11 (på engelska)

Unity-redigeraren

• 2020.3.25f1

Förutsättningar för det här tipset

Följande inställningar har gjorts i förväg som en förutsättning för förklaringen av dessa tips.

• Introduktion till inmatningssystempaketet
• Rikta in kameran (2D) med duken

Först

Listrutor kan användas för att låta användaren välja ett av flera alternativ. Även om det finns många objekt att välja mellan visas bara de valda objekten på skärmen, vilket är användbart för att spara utrymme och gör det lättare för användaren att förstå vad de väljer.

Placera en listruta

Välj en "listruta" i hierarkin för att lägga till den i vyn.

Justera listrutans position efter eget gottfinnande. Om storleken verkar liten drar du i ramen för att göra den större.

Om du vill Dropdown ange storleken på texten inuti väljer du Den är inuti Label i stället för .

När du kör den kan du se listrutan i praktiken. I det ursprungliga tillståndet finns det tre objekt att välja mellan, så du kan byta markering. Men om du ändrar storleken på listrutan eller Label teckenstorleken på kommer den inte att matcha storleken på texten som visas i listrutan.

Justera storleken på nedrullningsbara objekt

Om du inte har ändrat storleken på objektet eller teckenstorleken när du placerar listrutan behöver du inte göra det, men om du gör det måste du också ställa in listrutan.

Listrutan innehåller en definition av hur det valda objektet visas när det visas. Dropdown Template är fallet. Om du inte ställer in några inställningar kommer det inte att se vackert ut.

Först och främst antas det att varje parameter i den placerade rullgardinsmenyn är inställd enligt följande. Om du ställer in med olika parametrar, byt ut siffrorna och läs dem. I det här exemplet anges även andra parametrar, men de utelämnas eftersom de inte är relaterade till de nedrullningsbara objekten.

Teckenstorlek för objekt

Ändra först teckenstorleken på objektet. Välj > > >Dropdown Template Content > > Viewport Item Item Labelför objektet. Ange en teckenstorlek på 40, vilket är samma som Etikett. Om du vill visa fler alternativ kan du göra dem lite mindre.

Även om du ökar teckenstorleken ändras inte visningsstorleken för ett objekt, så du kanske inte kan se något även om du kör det.

Objektets storlek

Ställ sedan in storleken på ett objekt. Objekten som ska väljas är > > > >Dropdown . Content Item Template Viewport Ställ in höjden på 72. Om du vill visa fler alternativ kan du göra dem lite mindre.

Detta gör elementen i objektet synliga, men av någon anledning skärs toppen och botten av det markerade objektet av lite oavsett rullning.

Åtgärda detta genom att ställa in höjden på > > >Dropdown Viewport ContentTemplate till Item 72, vilket är samma som . Detta gör att du kan se de övre och nedre föremålen ordentligt.

Förresten, i standardinställningarna Item för rullgardinsmenyn är höjden på inställd något större än Content . Som ett resultat visas en liten marginal ovanför och under det valda objektet, vilket minskar känslan av tryck.

Storlek på bock

Storleken på bocken är också liten, så jag fixar det. Målobjektet är "Dropdown> > Viewport > > >Item CheckmarkTemplate Item Content".

Om du ändrar bredd och höjd kommer bockmarkeringen också att öka, så ställ in den på 72 här.

När jag kör den är bocken större, men positionen är fel, så jag kommer att fixa detta också.

Item Checkmark Ställ först in pivoten X till 0 och ställ sedan in positionen X till 0 också. Detta gör att du kan placera den på ett bra ställe oavsett storleken på checken eller etiketten.

Eftersom den överlappar etiketten väljer Item Lebel du om du vill att den vänstra positionen ska vara densamma som storleken på bockmarkeringen.

Storlek på rullningslist

Rullningslisten är också liten och svår att klicka på, så gör den större. Alla är noga med storleken, så det är inget som kan bestämmas. I det här fallet ställer vi in 48, vilket är 2/3 av höjden på rullgardinsmenyn.

Objektet som ska markeras ställs in på ett breddvärde i > >Dropdown Template Scrollbar.

Storlek på rullgardinsikon

Det är inte på objektsidan, men rullgardinsikonen är fortfarande liten, så jag ändrar den. Objektet som ska väljas är >Dropdown Arrow.

När det gäller storleken på ikonen kan du ändra storleken genom att ställa in bredd och höjd. Här ställer vi in den på 72, vilket är samma som höjden på listrutan.

Om så är fallet kommer positionen att vara avstängd, så ställ in pivoten X till 1 och positionen X till 0. Detta gör att du kan visa ikonen i en fin position oavsett storlek.

Antal nedrullningsbara objekt som visas

Genom att öka storleken på objektet finns det färre valda objekt som kan visas samtidigt, så vi kommer att försöka öka detta. Den här inställningen anges i >Dropdown Template. Eftersom antalet objekt som ska visas inte anges av antalet objekt, utan storleken anges av höjden, är det angivna värdet "höjden × antalet objekt". Här vill vi visa cirka 10 stycken, så 72 x 10 = 720 set .

Visningsområdet är förstorat, men för närvarande finns det bara 3 objekt, så endast 3 objekt visas.

Ställ in markeringen

Som standard är tre objekt i "Alternativ A ~ Alternativ C" inställda. Dessa objekt finns Dropdown i objektets Dropdown komponent.

Om du bläddrar ner i inspektören hittar du objektet "Alternativ", där du fritt kan ändra namnet eller lägga till eller ta bort.

Ställ in det första valet

Valet av objekt bestäms av siffror. Dropdown Dropdown Du kan ange den första markeringen i värdet för objektets komponent. Artikelnumreringen börjar på 0, så ange 3 om du vill att den fjärde ska vara det första valet.

Utför bearbetning när du väljer ett objekt

Du kanske vill göra något när du väljer ett objekt i listrutan. Detta kan implementeras på samma sätt som när du klickar på en knapp.

Objektet har en listruta och en text i taget. När du har valt ett objekt i listrutan kontrollerar du att innehållet visas i ett textobjekt till höger. Det spelar ingen roll något annat än placeringen av objekten, så du kan ställa in det hur du vill.

Börja med att skapa ett skript i projektet. DropdownItemSelector I det här fallet heter den .

Öppna skriptet och lägg till koden i följande:

using UnityEngine;
using UnityEngine.UI;

public class DropdownItemSelector : MonoBehaviour
{
  /// <summary>ドロップダウンで選択したアイテムの内容を表示するテキストオブジェクト。</summary>
  [SerializeField] Text TextValueSetter;

  /// <summary>値を取得するドロップダウンオブジェクト。</summary>
  [SerializeField] Dropdown Dropdown;

  /// <summary>ドロップダウンでアイテムを選択したときに呼ばれます。</summary>
  public void OnSelectionChanged()
  {
    // ドロップダウンの選択値と選択しているアイテムのテキストを表示
    TextValueSetter.text = $"value={Dropdown.value}, options.text={Dropdown.options[Dropdown.value].text}";
  }
}

När du har sparat skriptet bifogar EventSystem du det till objektet. Som förklaras i Tips för knappar bifogar det här tipset konsekvent skript EventSystem till om det inte finns en specifik anledning att göra det.

Bifoga ett nedrullningsbart objekt för att hämta värdet från och ett textobjekt för att ange värdet.

Markera sedan det nedrullningsbara objekt som du vill arbeta med och lägg till "Vid värdeändring (Int32)" i komponenten Dropdown Inspector.

I det nedre vänstra objektet måste vi placera objektet som skriptet som ska användas är bifogat, så vi ställer in det här EventSystem .

Välj av OnSelectionChanged från Ingen funktion DropdownItemSelector .

Prova att köra den för att se om den fungerar som den ska.

Lägg till objekt dynamiskt

Du kan ange vilka objekt som kan väljas i redigeraren, men det kan finnas tillfällen då tillståndet ändras under spelets gång och du vill ändra de objekt du väljer. I det här fallet kommer du att ändra det objekt som valts i programmet.

Objektet ordnar "rullgardinsmeny" och "knapp x2" som visas nedan. Du kan fritt ställa in andra parametrar än justering.

Skapa ett skript och ge det namnet DropdownDynamic . Koden ska se ut så här:

using UnityEngine;
using UnityEngine.UI;

public class DropdownDynamic : MonoBehaviour
{
  /// <summary>アイテム処理を行うドロップダウンオブジェクト。</summary>
  [SerializeField] Dropdown Dropdown;

  /// <summary>追加ボタンをクリックしたとき。</summary>
  public void OnClickAdd()
  {
    // アイテムを追加します
    Dropdown.options.Add(new Dropdown.OptionData { text = $"Item {Dropdown.options.Count}" });

    // ドロップダウンの内容を更新します
    Dropdown.RefreshShownValue();
  }

  /// <summary>削除ボタンをクリックしたとき。</summary>
  public void OnClickRemove()
  {
    // アイテムを削除します
    if (Dropdown.options.Count >= 1)
		{
      Dropdown.options.RemoveAt(Dropdown.options.Count - 1);
    }

    // ドロップダウンの内容を更新します
    Dropdown.RefreshShownValue();
  }
}

Dropdown.options har kontroll över de objekt som ska markeras, så Add att du dynamiskt kan styra objekten genom att göra eller göra på Remove dem.

EventSystem Bifoga skript och objekt till .

Tilldela en metod till click-händelsen för knapparna lägg till respektive ta bort.

När du är klar kör du den. Om objektet raderas i redigeraren visas det inte även om du klickar på det.

Om du klickar på lägg till-knappen fyra gånger kan du se att fyra objekt har lagts till.

Om du klickar på raderingsknappen två gånger kan du se att två objekt har tagits bort.