畫面元件就是包裝過的圖形，他們可以被加到畫面上，也可以讀取來自玩家的互動（例如：點選，按鍵等）。

新增一個畫面元件

創建一個新的畫面元件類別有許多方法，例如繼承 (extend) ClickableWidget。 這個類別提供了很多實用的功能（例如：改變長關、位置、處理事件），他包含了 Drawable、Element、和 Selectable介面（interface）。

• Drawable （繪製）： 需要使用 addDrawableChild 來繪製出這個畫面元件。
• Element （事件）： 如果有需要讀取玩家互動（點選、按鍵等）。
• Narratable （無障礙功能）： 如果有需要使用文字朗讀和其他無障礙功能。
• Selectable （選擇）： 如果想要讓畫面元件變得可以透過Tab選擇，這也有助於無障礙功能。

public class CustomWidget extends ClickableWidget {
	public CustomWidget(int x, int y, int width, int height) {
		super(x, y, width, height, Text.empty());
	}

	@Override
	protected void renderWidget(DrawContext context, int mouseX, int mouseY, float delta) {
		// We'll just draw a simple rectangle for now.
		// x1, y1, x2, y2, startColor, endColor
		int startColor = 0xFF00FF00; // Green
		int endColor = 0xFF0000FF; // Blue

		context.fillGradient(getX(), getY(), getX() + this.width, getY() + this.height, startColor, endColor);
	}

	@Override
	protected void appendClickableNarrations(NarrationMessageBuilder builder) {
		// For brevity, we'll just skip this for now - if you want to add narration to your widget, you can do so here.
		return;
	}
}

讓元件顯示在畫面上

就像其他畫面元件一樣，你會需要用 Screen 類別提供ㄉ的 addDrawableChild 函式來將元件顯示在畫面上。 請確保這是在 init 函式裡執行的。 請確保這是在 init 函式裡執行的。

// Add a custom widget to the screen.
// x, y, width, height
CustomWidget customWidget = new CustomWidget(40, 80, 120, 20);
this.addDrawableChild(customWidget);

畫面元件事件

你可以透過重寫 onMouseClicked、onMouseReleased、onKeyPressed等函式來讀取事件。

舉例來說，你可以透過 ClickableWidget 類別的 isHovered 函式來讓元件在滑鼠停留時改變顏色。

// This is in the "renderWidget" method, so we can check if the mouse is hovering over the widget.
if (isHovered()) {
	startColor = 0xFFFF0000; // Red
	endColor = 0xFF00FFFF; // Cyan
}