图形用户界面风格#

Arcade 3.0添加了一种新的方法来设计图形用户界面小部件的样式。它是灵活的，但也提高了清晰度和类型安全性。

我可以设置哪些小部件的样式？#

以下小部件支持样式设置：

基本用法#

本部分将设置一个 UIFlatButton 作为一个例子。您可以对其他可设置样式的小部件使用相同的通用方法，但您可能希望查看它们的文档以了解它们可能支持的其他值。

要创建您自己的窗口小部件，请参阅“高级”部分。

快速入门#

下面的示例显示如何调整样式。

# Styles are dictionaries of UIStyle objects
new_style = {
    # You should provide a style for each widget state
    "normal": UIFlatButton.UIStyle(), # use default values for `normal` state
    "hover": UIFlatButton.UIStyle(
        font_color=arcade.color.BLACK,
        bg=arcade.color.WHITE,
    ),
    "press": UIFlatButton.UIStyle(
        font_color=arcade.color.BLACK,
        bg=arcade.color.WHITE,
        border=arcade.color.WHITE,
    ),
    "disabled": UIFlatButton.UIStyle(
        bg=arcade.color.GRAY,
    )
}

# Pass the style dictionary when creating a UI element
UIFlatButton(style=new_style)

默认样式#

每个可设置样式的小部件类都有一个 DEFAULT_STYLE 属性来保存该类型小部件的默认样式。例如，On UIFlatButton ，可以通过以下方式访问此属性 UIFlatButton.DEFAULT_STYLE 。

如果在创建类的实例时未提供其他样式，则将使用此默认样式。

class UIFlatButton(UIInteractiveWidget, UIStyledWidget, UITextWidget):

    DEFAULT_STYLE = {
        "normal": UIStyle(),
        "hover": UIStyle(
            font_size=12,
            font_name=("calibri", "arial"),
            font_color=arcade.color.WHITE,
            bg=(21, 19, 21, 255),
            border=(77, 81, 87, 255),
            border_width=2,
        ),
        "press": UIStyle(
            font_size=12,
            font_name=("calibri", "arial"),
            font_color=arcade.color.BLACK,
            bg=arcade.color.WHITE,
            border=arcade.color.WHITE,
            border_width=2,
        ),
        "disabled": UIStyle(
            font_size=12,
            font_name=("calibri", "arial"),
            font_color=arcade.color.WHITE,
            bg=arcade.color.GRAY,
            border=None,
            border_width=2,
        )
    }

样式属性#

UIStyle是对可用样式选项的类型化描述。对于UIFlatButton，支持的属性包括：

名字	类型	缺省值	描述
font_size	集成	12	按钮上的文本大小
font_name	FontNameOrNames	(“卡利布里”，“阿瑞尔”)	文本的字体
font_color	RGBA255	arcade.color.WHITE	文本的颜色
BG	RGBA255	(21、19、21、255)	背景色
边境线	任选	无	边框颜色
border_width	集成	0	边框宽度

Style属性是一个字典，它将‘Normal’、‘hover’等状态映射到UIFlatButton.UIStyle的一个实例。

众所周知的状态#

名字	描述
正常	小工具的默认状态。
悬停	鼠标悬停在一个交互式小工具上。
按下	鼠标悬停在小工具上时按下。
残废	该小部件已禁用。

进阶#

本节描述样式系统本身，以及如何使用它来创建自己的样式小部件或扩展现有的小部件。

可设置样式的小部件继承自 UIStyledWidget ，它提供两个基本功能：

拥有一个样式属性，该属性提供小部件状态和要应用的样式之间的映射
提供一个必须提供状态(简单字符串)的抽象方法

它的基本理念是：

可设置样式的小部件有一种状态(例如“正常”、“悬停”、“按下”或“禁用”)
状态用于定义将应用哪种样式

您自己的可设置样式的小部件#

class MyColorBox(UIStyledWidget, UIInteractiveWidget, UIWidget):
    """
    A colored box, which changes on mouse interaction
    """

    # create the style class, which will be used to define style for any widget state
    @dataclass
    class UIStyle(UIStyleBase):
        color: RGBA255 = arcade.color.GREEN


    DEFAULT_STYLE = {
        "normal": UIStyle(),
        "hover": UIStyle(color=arcade.color.YELLOW),
        "press": UIStyle(color=arcade.color.RED),
        "disabled": UIStyle(color=arcade.color.GRAY)
    }

    def get_current_state(self) -> str:
        """Returns the current state of the widget i.e disabled, press, hover or normal."""
        if self.disabled:
            return "disabled"
        elif self.pressed:
            return "press"
        elif self.hovered:
            return "hover"
        else:
            return "normal"

    def do_render(self, surface: Surface):
        self.prepare_render(surface)

        # get current style
        style: MyColorBox.UIStyle = self.get_current_style()

        # Get color from current style, it is a good habit to be
        # bullet proven for missing values in case a dict is provided instead of a UIStyle
        color = style.get("color", MyColorBox.UIStyle.bg)

        # render
        if color: # support for not setting a color at all
            surface.clear(bg_color)