Skip to content

Slint 元素有许多通用的属性、回调和行为。 本页面描述这些属性及其使用方法。

通用可视化属性

这些属性对所有可视化项有效。例如 RectangleText 以及 layouts。非可视化项(例如 Timer)没有这些属性。

x, y

length 默认:0px

元素相对于其父元素的位置。

z

float 默认:0.0

允许为项与其兄弟项的堆叠顺序指定不同的顺序。 该值必须是编译时常量。

注意

目前 z 值是编译时常量,无法在运行时更改。

width, height

length 默认:0px

元素的宽度和高度。设置时,会覆盖默认大小。

变换

变换允许围绕指定的原点对项进行旋转和缩放。默认的原点是元素的中心。

软件渲染器不支持变换。

slint
Image {    x: 0;    y: 0;    source: @image-url("images/slint-logo.svg");    transform-rotation: 45deg;    transform-origin: {x: 0, y: 0};}

transform-rotation

angle 默认:0deg

transform-origin

struct Point 默认:{x: self.width / 2, y: self.height / 2}

旋转和缩放所围绕的原点。

默认为元素的中心。

Point

此结构表示具有 x 和 y 坐标的点

  • x (length):
  • y (length):

transform-scale

float 默认:100%

应用于该元素及其所有子元素的缩放因子。

这不会影响元素的几何(宽度、高度),但会影响渲染。 缩放围绕 transform-origin 点进行。

也可以使用 transform-scale-xtransform-scale-y 属性分别为 x 轴和 y 轴指定缩放因子。

transform-scale-x

float 默认:self.scale

transform-scale-y

float 默认:self.scale

opacity

slint
component ImageInfo inherits Rectangle {    in property <float> img-opacity: 1.0;    background: transparent;    VerticalLayout {        spacing: 5px;        Image {            source: @image-url("elements/slint-logo.png");            opacity: img-opacity;        }        Text {            text: "opacity: " + img-opacity;            color: white;            horizontal-alignment: center;        }    }}export component Example inherits Window {    width: 100px;    height: 310px;    background: transparent;    Rectangle {        background: #141414df;        border-radius: 10px;    }    VerticalLayout {        spacing: 15px;        padding-top: 10px;        padding-bottom: 10px;        ImageInfo {            img-opacity: 1.0;        }        ImageInfo {            img-opacity: 0.6;        }        ImageInfo {            img-opacity: 0.3;        }    }}

rectangle opacity

float 默认:1

介于 0 到 1 之间(或一个百分比)的值,用于以透明度方式绘制元素及其子元素。 0 表示完全透明(不可见),1 表示完全不透明。 不透明度应用于子元素树,就像它们首先被绘制到一个中间层中,然后使用该不透明度渲染整个层。

以下示例演示了带有子元素的不透明度属性。请注意,软件渲染器不支持层不透明度,这将导致不同的最终结果,如下所示。

slint
 Rectangle {        opacity: 50%;        Rectangle {            x: 0;            y: 0;            width: 100px;            height: 100px;            background: blue;        }
        Rectangle {            x: 50px;            y: 50px;            width: 100px;            height: 100px;            background: green;        }    }

layer opacity

visible

bool 默认:true

当设置为 false 时,该元素及其所有子元素不会被绘制,也不会对鼠标输入做出反应。该元素仍然会在任何布局容器中占用布局空间。

absolute-position

struct Point (out) 默认:a struct with all default values

一个常见问题是,在有许多嵌套组件的 UI 中,了解它们相对于主窗口或屏幕的 (x,y) 位置是很有用的。这个便利属性提供对该值的便捷只读访问。

它表示在封闭的 WindowPopupWindow 内的绝对位置的点。 它定义了相对于封闭 Window 或 PopupWindow 的坐标 (x,y),但参考系未指定(可能是屏幕、窗口或弹出窗口坐标)。

Point

此结构表示具有 x 和 y 坐标的点

  • x (length):
  • y (length):

杂项

cache-rendering-hint

bool 默认:false

当设置为 true 时,会向渲染器提供一个提示,将该元素及所有子元素的内容缓存到一个中间缓存层中。对于很少更改的复杂子树,这可能会加快渲染速度,代价是增加内存消耗。并非所有渲染后端都支持此功能,因此这仅仅是一个提示。

dialog-button-role

enum DialogButtonRole 默认:none

指定这是 Dialog 中的一个按钮。

DialogButtonRole

此枚举表示 dialog-button-role 属性的值,可以添加到 Dialog 中的任何元素上,以将该元素放入按钮行中,其确切位置取决于角色和平台。

  • none:这不是一个要放入底部的按钮
  • accept:这是单击以接受对话框的主按钮的角色。例如 "Ok" 或 "Yes"
  • reject:这是单击以拒绝对话框的主按钮的角色。例如 "Cancel" 或 "No"
  • apply:这是 "Apply" 按钮的角色
  • reset:这是 "Reset" 按钮的角色
  • help:这是 "Help" 按钮的角色
  • action:这是执行其他操作的任何其他按钮的角色。

通用回调

init()

每个元素都隐式声明一个 init 回调。你可以为其分配一个代码块,该代码块将在元素被实例化时以及所有属性都使用其最终绑定的值初始化之后被调用。调用顺序是从内到外。下面的示例将依次打印 "first"、"second" 和 "third":

slint
component MyButton inherits Rectangle {    in-out property <string> text: "Initial";    init => {        // If `text` is queried here, it will have the value "Hello".        debug("first");    }}
component MyCheckBox inherits Rectangle {    init => { debug("second"); }}
export component MyWindow inherits Window {    MyButton {        text: "Hello";        init => { debug("third"); }    }    MyCheckBox {    }}

不要使用此回调来初始化属性,因为这违反了声明式原则。

尽管 init 回调存在于所有组件上,但它无法从应用程序代码设置,即生成的代码中不存在 on_init 函数。这是因为该回调在组件创建过程中被调用,早于你实际能够调用 on_init 来设置它的时间。

虽然 init 回调可以调用其它回调,例如在 global 部分定义的回调,并且你可以在后端中绑定这些,但这对静态创建的组件不起作用,包括窗口本身,因为你需要一个实例来设置 globals 绑定。但是可以将其用于动态创建的组件(例如在 if 后面的组件):

slint
export global SystemService  {    // This callback can be implemented in native code using the Slint API    callback ensure_service_running();}
component MySystemButton inherits Rectangle {    init => {        SystemService.ensure_service_running();    }    // ...}
export component AppWindow inherits Window {    in property <bool> show-button: false;
    // MySystemButton isn't initialized at first, only when show-button is set to true.    // At that point, its init callback will call ensure_service_running()    if show-button : MySystemButton {}}

可访问性属性

使用以下 accessible- 属性使你的项能够很好地与屏幕阅读器、盲文终端以及其它使你的应用程序无障碍的软件进行交互。 必须设置 accessible-role 才能设置任何其它可访问性属性或回调。

accessible-role

enum AccessibleRole 默认:the first enum value

元素的角色。此属性是使用任何其它可访问性属性的必需属性。应将其设置为常量值。(默认值:对大多数元素为 none,但对 Text 元素为 text

AccessibleRole

此枚举表示 accessible-role 属性的不同值,用于在辅助技术(例如屏幕阅读器)的上下文中描述元素的角色。

  • none:该元素不可访问。
  • button:该元素是 Button 或行为类似。
  • checkbox:该元素是 CheckBox 或行为类似。
  • combobox:该元素是 ComboBox 或行为类似。
  • groupbox:该元素是 GroupBox 或行为类似。
  • image:该元素是 Image 或行为类似。此角色会自动应用于 Image 元素。
  • list:该元素是 ListView 或行为类似。
  • slider:该元素是 Slider 或行为类似。
  • spinbox:该元素是 SpinBox 或行为类似。
  • tab:该元素是 Tab 或行为类似。
  • tab-list:该元素类似于 TabWidget 中的选项卡栏。
  • tab-panel:该元素是选项卡内容的容器。
  • textText 元素的角色。此角色会自动应用于 Text 元素。
  • tableTableView 的角色或行为类似。
  • tree:TreeView 的角色或行为类似。(尚未提供)
  • progress-indicator:该元素是 ProgressIndicator 或行为类似。
  • text-input:具有可编辑文本的控件的角色,例如 LineEditTextEdit。此角色会自动应用于 TextInput 元素。
  • switch:该元素是 Switch 或行为类似。
  • list-item:该元素是 ListView 中的一项。
  • radio-button:该元素是 RadioButton 或行为类似。

accessible-checkable

bool 默认:false

元素是否可被勾选。

accessible-checked

bool 默认:false

元素是否已被勾选。这对应于复选框、单选按钮和其它控件的 "checked" 状态。

accessible-description

string 默认:""

当前元素的描述。

accessible-enabled

bool 默认:false

元素是否启用。这对应于大多数控件的 "enabled" 状态。(默认值:true

accessible-expandable

bool 默认:false

元素是否可被展开。例如,ComboBox 控件应将其设置为 true,因为其选择可以通过可展开的弹出窗口进行更改。

accessible-expanded

bool 默认:false

元素是否已被展开。适用于组合框、菜单项、树视图项和其它控件。

accessible-id

string 默认:""

元素的唯一标识符,用于标识用于自动化和测试目的的控件。 此属性可以设置为任何字符串值,在编写自动化测试或使用可访问性工具唯一标识应用程序中的特定控件时特别有用。

如果需要标识重复元素,请确保为每个实例分配不同的值,如下所示。

slint
for i in 5: Rectangle {    accessible-role: button;    accessible-id: "btn-" + i;    accessible-label: "Button " + i;}

accessible-label

string 默认:""

交互式元素的标签。(默认值:大多数元素为空,或 Text 元素的 text 属性的值)

accessible-value-maximum

float 默认:0.0

项目的最大值。例如 spin box 使用此值。

accessible-value-minimum

float 默认:0.0

项目的最小值。

accessible-value-step

float 默认:0.0

当前值可以更改的最小增量或减量。这对应于滑块上的句柄可以拖动的步长。

accessible-value

string 默认:""

项目的当前值。

accessible-placeholder-text

string 默认:""

当项目的值为空时使用的占位符文本。适用于文本元素。

accessible-read-only

bool 默认:false

元素的内容是否可编辑。这对应于 line edit 和 text edit 控件的 "read-only" 状态。

accessible-item-selectable

bool 默认:false

元素是否可被选择。

accessible-item-selected

bool 默认:false

元素是否被选择。这对应于 listview 项的 "is-selected" 状态。

accessible-item-index

int 默认:0

该元素在一组相似元素中的索引(从 0 开始)。适用于列表项、单选按钮和其它元素。

accessible-item-count

int 默认:0

一组元素的总数。适用于 list view、单选按钮组或其它分组元素等元素组的父容器。

可访问性回调

你也可以使用以下由可访问性框架调用的回调:

accessible-action-default()

当请求该控件的默认操作时调用(例如:按下按钮)。

accessible-action-set-value(string)

当用户想要更改可访问性值时调用。

accessible-action-increment()

当用户请求增加值时调用。

accessible-action-decrement()

当用户请求减少值时调用。

accessible-action-expand()

当用户请求展开控件时调用(例如:显示组合框的可用选项列表)。

基于 MIT 协议发布