เลื่อนเพื่อให้รายการที่เลือกอยู่ที่ด้านบนของรายการดรอปดาวน์

สภาพแวดล้อมการตรวจสอบ

หน้าต่าง

• หน้าต่าง 11

บรรณาธิการ Unity

• ปี 2020.3.25f1

ข้อกําหนดเบื้องต้นสําหรับเคล็ดลับนี้

การตั้งค่าต่อไปนี้ได้รับการทําล่วงหน้าเป็นข้อกําหนดเบื้องต้นสําหรับคําอธิบายของเคล็ดลับเหล่านี้

• ขอแนะนําแพ็คเกจระบบอินพุต
• จัดตําแหน่งกล้อง (2D) ให้ตรงกับผืนผ้าใบ

เมื่อแสดงรายการแบบหล่นลงรายการด้านบนจะแสดงอยู่เสมอ

หากจํานวนรายการดรอปดาวน์มากกว่าพื้นที่ดรอปดาวน์การเลื่อนจะปรากฏขึ้น ในเวลานั้นรายการแรกที่แสดงจะเป็นรายการที่ด้านบนเสมอ

นอกจากนี้ยังเป็นจริงเมื่อรายการที่ด้านล่างถูกเลือกและขยาย

อย่างไรก็ตาม บางคนอาจต้องการรายการที่พวกเขาเลือกที่ด้านบนของรายการเมื่อขยาย เพื่อรองรับสิ่งนี้คุณต้องกําหนดการตั้งค่าเพิ่มเติมต่อไปนี้:

เลื่อนเพื่อให้รายการที่เลือกอยู่ด้านบนเมื่อขยายรายการดรอปดาวน์

สิ่งนี้ทําโดยสคริปต์ เพิ่มสคริปต์ในโครงการของคุณและตั้งชื่อ DropdownScroll แต่ชื่อนั้นเป็นไปตามอําเภอใจ

เมื่อคุณเปิดตัวแก้ไขสคริปต์ ให้ป้อนข้อมูลต่อไปนี้:

using UnityEngine;
using UnityEngine.UI;    // 追加

public class DropdownScroll : MonoBehaviour
{
  public void Start()
  {
    // スクロールの計算に必要な各コンポーネントを取得
    var dropdown = GetComponentInParent<Dropdown>();
    var scrollRect = gameObject.GetComponent<ScrollRect>();
    var viewport = transform.Find("Viewport").GetComponent<RectTransform>();
    var contentArea = transform.Find("Viewport/Content").GetComponent<RectTransform>();
    var contentItem = transform.Find("Viewport/Content/Item").GetComponent<RectTransform>();

    // 選択しているアイテムの位置や表示領域をもとに選択アイテムまでスクロールすべき量を計算する
    var areaHeight = contentArea.rect.height - viewport.rect.height;
    var cellHeight = contentItem.rect.height;
    var scrollRatio = (cellHeight * dropdown.value) / areaHeight;
    scrollRect.verticalNormalizedPosition = 1.0f - Mathf.Clamp(scrollRatio, 0.0f, 1.0f);
  }
}

เนื้อหาของรหัสไม่ซับซ้อน เมื่อขยายเมนูแบบเลื่อนลงตําแหน่งการเลื่อนจะถูกคํานวณและตั้งค่าเพื่อให้รายการที่เลือกอยู่ด้านบน

Start เหตุผลในการเขียนในวิธีการเป็นเพราะสันนิษฐานว่ากระบวนการเริ่มต้นจะทํางานทุกครั้งที่มีการขยายแบบเลื่อนลง

หลังจากที่คุณบันทึกรหัสให้แนบสคริปต์นี้DropdownTemplateกับ

Temolate วัตถุที่อยู่ใต้มันจะถูกสร้างขึ้นเมื่อดรอปดาวน์ถูกขยายหลังจากเกมถูกดําเนินการ คอมโพเนนต์ที่แนบมาจะถูกเตรียมใช้งานในเวลาที่ปรับใช้ นอกจากนี้เมื่อดรอปดาวน์ถูกปิดวัตถุที่ขยายจะถูกทําลาย หากคุณปรับใช้อีกครั้งมันจะถูกสร้างขึ้นอีกครั้งดังนั้นกระบวนการเริ่มต้นจะดําเนินการหลังจากการปรับใช้แต่ละครั้ง

ลองดูสิ

ดังที่ได้กล่าวไว้ข้างต้นเมนูแบบเลื่อนลงที่ไม่ได้ดําเนินการใด ๆ จะไม่สามารถมองเห็นได้แม้ว่าคุณจะขยายด้วยรายการด้านล่างที่เลือก ในทางกลับกันหากคุณขยายเมนูแบบเลื่อนลงที่เรากล่าวถึงคุณจะเห็นว่ามันเลื่อนไปยังจุดที่คุณสามารถดูรายการที่เลือกได้