slint 1.3.2 官方文档翻译03

发布时间：2024年01月17日

Builtins 内置命令

Builtin Callbacks 内置回调

`init()?`

Every element implicitly declares an?init?callback. You can assign a code block to it that will be invoked when the element is instantiated and after all properties are initialized with the value of their final binding. The order of invocation is from inside to outside. The following example will print “first”, then “second”, and then “third”:

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

component MyButton inherits Rectangle {
    in-out property <string> text: "Initial";
    init => {
        // If `text` is queried here, it will have the value "Hello".
        // 如果在这里查询‘ text’，则它的值为“ Hello”。
        debug("first");
    }
}

component MyCheckBox inherits Rectangle {
    init => { debug("second"); }
}

export component MyWindow inherits Window {
    MyButton {
        text: "Hello";
        init => { debug("third"); }
    }
    MyCheckBox {
    }
}

Don’t use this callback to initialize properties, because this violates the declarative principle. Avoid using this callback, unless you need it, for example, in order to notify some native code:

不要使用这个回调来初始化属性，因为这违反了声明性原则。避免使用这个回调，除非你需要它，例如，为了通知一些本地代码:

global SystemService  {
    // This callback can be implemented in native code using the Slint API
    // 此回调可以使用 Slint API 在本机代码中实现
    callback ensure_service_running();
}

export component MySystemButton inherits Rectangle {
    init => {
        SystemService.ensure_service_running();
    }
    // ...
}

Next 下一个

Builtin Elements 安装在内部的元素

Builtin Elements - Slint 1.3.2 Reference

Builtin Elements 内置的元素

Common properties 公共属性

Geometry 几何

These properties are valid on all visible items: ????????这些属性对所有可见项都有效:

width?and?height?(in?length): The size of the element. When set, this overrides the default size.?????????width和height (in 长度):元素的大小。设置后，它将覆盖默认大小。
x?and?y?(in?length): The position of the element relative to its parent.? ? ? ?x和y(in 长度):元素相对于其父元素的位置。
z?(in?float): Allows to specify a different order to stack the items with its siblings. (default value: 0)? ? ? ? ? z(in 浮点数):允许指定不同的顺序来堆叠它的兄弟项。(默认值:0)
absolute-position?(in?Point): The position of the element within the contained window.? ? ? 绝对位置(in Point?点):元素在包含的窗口中的位置。

Layout 布局

These properties are valid on all visible items and can be used to specify constraints when used in layouts:

这些属性对所有可见项都有效，并且在布局中使用时可以用来指定约束:

col,?row,?colspan,?rowspan?(in?int): See?GridLayout.? ? ? ?col, row, colspan, rowspan (整数):? 参见GridLayout。
horizontal-stretch?and?vertical-stretch?(in-out?float): Specify how much relative space these elements are stretching in a layout. When 0, this means that the elements won’t be stretched unless all elements are 0. Builtin widgets have a value of either 0 or 1.? ? horizontal-stretch 水平拉伸和vertical-stretch 垂直拉伸(in-out 浮点数):指定这些元素在布局中拉伸的相对空间。当为0时，这意味着除非所有元素都为0，否则元素不会被拉伸。内置小部件的值为0或1。
max-width?and?max-height?(in?length): The maximum size of an element? ? ? ? ? ?max-width 最大宽度和max-height 最大高度(in 长度):元素的最大尺寸
min-width?and?min-height?(in?length): The minimum size of an element? ? ? ? ? ? ?min-width?最小宽度? 和min-height 最小高度(in 长度):元素的最小尺寸
preferred-width?and?preferred-height?(in?length): The preferred size of an element? ? ? ? ? ? preferred-width 首选宽度和preferred-height 首选高度(in 长度):元素的首选大小

Miscellaneous 杂项

cache-rendering-hint?(in?bool): When set to?true, this provides a hint to the renderer to cache the contents of the element and all the children into an intermediate cached layer. For complex sub-trees that rarely change this may speed up the rendering, at the expense of increased memory consumption. Not all rendering backends support this, so this is merely a hint. (default value:?false)? ? ? ? ? ? ? ? ? cache-rendering-hint 缓存-渲染-提示(in 布尔值):当设置为true时，将提示渲染器将元素的内容和所有子元素缓存到中间缓存层。对于很少改变的复杂子树，这可能会加快渲染速度，但代价是增加内存消耗。并不是所有的渲染后端都支持这个，所以这只是一个提示。(默认值:false)
dialog-button-role?(in?enum?DialogButtonRole): Specify that this is a button in a?Dialog.? ? ? Dialog -button-role 对话框-按钮-角色(in 枚举?DialogButtonRole):指定这是一个对话框中的按钮。
opacity?(in?float): A value between 0 and 1 (or a percentage) that is used to draw the element and its children with transparency. 0 is fully transparent (invisible), and 1 is fully opaque. The opacity is applied to the tree of child elements as if they were first drawn into an intermediate layer, and then the whole layer is rendered with this opacity. (default value: 1)? ? ? ?opacity 不透明(in 浮点数):一个介于0到1之间的值(或百分比)，用于绘制具有透明度的元素及其子元素。0是完全透明的(不可见)，1是完全不透明的。不透明度应用于子元素树，就像它们首先被绘制到中间层一样，然后整个层都用这种不透明度渲染。(默认值:1)
visible?(in?bool): When set to?false, the element and all his children won’t be drawn and not react to mouse input (default value:?true)? ? ? ? ?visible 可见性(in 布尔值):当设置为false时，元素及其所有子元素将不会被绘制，也不会对鼠标输入做出反应(默认值:true)

The following example demonstrates the?opacity?property with children. An opacity is applied to the red rectangle. Since the green rectangle is a child of the red one, you can see the gradient underneath it, but you can’t see the red rectangle through the green one.

下面的例子演示了带有子属性的不透明度属性。对红色矩形应用不透明度。因为绿色矩形是红色矩形的子矩形，你可以看到它下面的渐变，但是你不能通过绿色矩形看到红色矩形。

export component Example inherits Window {
    width: 100px;
    height: 100px;
    background: @radial-gradient(circle, black, white, black, white);
    Rectangle {
        opacity: 0.5;
        background: red;
        border-color: #822;
        border-width: 5px;
        width: 50px; height: 50px;
        x: 10px; y: 10px;
        Rectangle {
            background: green;
            border-color: #050;
            border-width: 5px;
            width: 50px; height: 50px;
            x: 25px; y: 25px;
        }
    }
}

Accessibility 可访问性

Use the following?accessible-?properties to make your items interact well with software like screen readers, braille terminals and other software to make your application accessible.

使用以下可访问属性（accessible-?properties ）使您的项目与屏幕阅读器、盲文终端和其他软件良好地交互，从而使您的应用程序易于访问。

accessible-role?(in?enum?AccessibleRole): The role of the element. This property is mandatory to be able to use any other accessible properties. It should be set to a constant value. (default value:?none?for most elements, but?text?for the Text element)? ? ? ? ? ? accessible-role 可访问角色(in 枚举 AccessibleRole):元素的角色。此属性是必需的，以便能够使用任何其他可访问的属性。它应该被设置为一个常量。(默认值:大多数元素为none，但text元素为text)
accessible-checkable?(in?bool): Whether the element is can be checked or not.? ? accessible-checkable 可访问可选中(in 布尔值):元素是否可以被选中。
accessible-checked?(in?bool): Whether the element is checked or not. This maps to the “checked” state of checkboxes, radio buttons, and other widgets.? ? ? ? ? ? ? ? ? ? ? ? ? ? accessible-checked?可访问已选中?(in 布尔值):元素是否被选中。这映射到复选框、单选按钮和其他小部件的“已选中”状态。
accessible-description?(in?string): The description for the current element.? ? ? ? ?accessible-description 可访问的描述(in 字符串):当前元素的描述。
accessible-has-focus?(in?bool): Set to true when the current element currently has the focus.? ? ?accessible-has-focus 可访问有焦点(in 布尔值):当当前元素当前具有焦点时设置为true。
accessible-label?(in?string): The label for an interactive element. (default value: empty for most elements, or the value of the?text?property for Text elements)? ? ? ? ? ? ? ? ? ? ? ? accessible-label 可访问的标签(in 字符串):交互元素的标签。(默认值:大多数元素为空，或text元素的text属性值)
accessible-value-maximum?(in?float): The maximum value of the item. This is used for example by spin boxes.? ? ? ? accessible-value-maximum 可访问值最大值(in 浮点数):项的最大值。例如，旋转箱就使用了这种方法。
accessible-value-minimum?(in?float): The minimum value of the item.? ? ? ? ? ? ? ? ? ?accessible-value-minimum 可访问值最小值(in f浮点数):条目的最小值。
accessible-value-step?(in?float) The smallest increment or decrement by which the current value can change. This corresponds to the step by which a handle on a slider can be dragged.? ? ? ? ? ? accessible-value-step 可访问值的步长(in 浮点数)当前值可以改变的最小增量或减量。这对应于拖动滑块上的手柄的步长。
accessible-value?(in?string): The current value of the item.? ? ? ?accessible-value 可访问的值(in 字符串):该项的当前值。

Drop Shadows 阴影

To achieve the graphical effect of a visually elevated shape that shows a shadow effect underneath the frame of an element, it’s possible to set the following?drop-shadow?properties:

为了实现视觉提升形状的图形效果，在元素的框架下显示阴影效果，可以设置以下阴影属性:

drop-shadow-blur?(in?length): The radius of the shadow that also describes the level of blur applied to the shadow. Negative values are ignored and zero means no blur. (default value: 0)? ? ? ? ? ? drop-shadow-blur 下拉-阴影-模糊(in 长度):阴影的半径，它也描述了应用于阴影的模糊程度。负值被忽略，零表示没有模糊。(默认值:0)
drop-shadow-color?(in?color): The base color of the shadow to use. Typically that color is the starting color of a gradient that fades into transparency.? ? ? ? drop-shadow-color 下拉-阴影-颜色(in 颜色):要使用的阴影的颜色。通常，这种颜色是渐变到透明的起始颜色。
drop-shadow-offset-x?and?drop-shadow-offset-y?(in?length): The horizontal and vertical distance of the shadow from the element’s frame. A negative value places the shadow left / above of the element.? ? ? ? ?drop-shadow-offset-x和drop-shadow-offset-y 下拉-阴影-偏移量-x 和下拉-阴影-偏移量-y(in 长度):阴影与元素框架的水平和垂直距离。负值表示阴影位于元素的左侧/上方。

The?drop-shadow?effect is supported for?Rectangle?elements.

矩形元素支持投影效果。

`Dialog 对话框`

Dialog is like a window, but it has buttons that are automatically laid out.

对话框就像一个窗口，但它有自动布局的按钮。

A Dialog should have one main element as child, that isn’t a button. The dialog can have any number of?StandardButton?widgets or other buttons with the?dialog-button-role?property. The buttons will be placed in an order that depends on the target platform at run-time.

对话框应该有一个主元素作为子元素，而不是按钮。对话框可以有任意数量的StandardButton小部件或其他带有dialog-button-role属性的按钮。这些按钮将根据运行时的目标平台按顺序放置。

The?kind?property of the?StandardButtons and the?dialog-button-role?properties need to be set to a constant value, it can’t be an arbitrary variable expression. There can’t be several?StandardButtons of the same kind.

StandardButtons和dialog-button-role属性的kind属性需要设置为一个常量，它不能是一个任意变量表达式。不能有几个相同类型的standardbutton。

A callback?<kind>_clicked?is automatically added for each?StandardButton?which doesn’t have an explicit callback handler, so it can be handled from the native code: For example if there is a button of kind?cancel, a?cancel_clicked?callback will be added.

对于每个没有显式回调处理程序的StandardButton，会自动添加一个回调??<kind>_clicked，因此可以从本机代码处理:例如，如果有一个cancel类型的按钮，将添加一个cancel_clicked回调。

Properties 属性

icon?(in?image): The window icon shown in the title bar or the task bar on window managers supporting it.? ? ? ?图标(in 图像):在支持它的窗口管理器的标题栏或任务栏中显示的窗口图标。
title?(in?string): The window title that is shown in the title bar.? ? ? ? ?title 标题(in 字符串）:显示在标题栏中的窗口标题。

Example 例子

import { StandardButton, Button } from "std-widgets.slint";
export component Example inherits Dialog {
    Text {
      text: "This is a dialog box";
    }
    StandardButton { kind: ok; }
    StandardButton { kind: cancel; }
    Button {
      text: "More Info";
      dialog-button-role: action;
    }
}

`Flickable?可轻弹`

The?Flickable?is a low-level element that is the base for scrollable widgets, such as the?ScrollView. When the?viewport-width?or the?viewport-height?is greater than the parent’s?width?or?height?respectively, the element becomes scrollable. Note that the?Flickable?doesn’t create a scrollbar. When unset, the?viewport-width?and?viewport-height?are calculated automatically based on the?Flickable’s children. This isn’t the case when using a?for?loop to populate the elements. This is a bug tracked in issue?#407. The maximum and preferred size of the?Flickable?are based on the viewport.

Flickable是一个低级元素，是ScrollView等可滚动小部件的基础。当viewport-width或viewport-height分别大于父元素的宽度或高度时，元素变为可滚动的。注意，Flickable不创建滚动条。当未设置时，viewport-width和viewport-height将基于Flickable的子元素自动计算。当使用for循环填充元素时，情况并非如此。这是在问题#407中跟踪的错误。Flickable的最大和首选大小是基于视口的。

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

如果不是布局的一部分，则未指定时其宽度或高度默认为父元素的100%。。

Pointer Event Interaction 指针事件交互

If the?Flickable’s area contains elements that use?TouchArea?to act on clicking, such as?Button?widgets, then the following algorithm is used to distinguish between the user’s intent of scrolling or interacting with?TouchArea?elements:

如果Flickable区域包含使用TouchArea来操作点击的元素，例如Button小部件，那么下面的算法将用于区分用户滚动或与TouchArea元素交互的意图:

If the?Flickable’s?interactive?property is?false, all events are forwarded to elements underneath.? ? ? ? ? 如果Flickable的interactive属性为false，所有事件都被转发到下面的元素。
If a press event is received where the event’s coordinates interact with a?TouchArea, the event is stored and any subsequent move and release events are handled as follows:? ? ? 如果接收到新闻事件，其中事件的坐标与触摸区交互，则存储该事件，并按如下方式处理任何后续移动和释放事件：:
1. If 100ms elapse without any events, the stored press event is delivered to the?TouchArea.? ? ? ? ?如果100毫秒过去而没有发生任何事件，则存储的按压事件将传送到触摸区。
2. If a release event is received before 100ms have elapsed, the stored press event as well as the release event are immediately delivered to the?TouchArea?and the algorithm resets.? ? ? ? 如果在100ms之前接收到释放事件，则存储的按下事件以及释放事件将立即传递给TouchArea并重置算法。
3. Any move events received will start a flicking operation on the?Flickable?if all of the following conditions are met:? ? ? ?如果满足以下所有条件，接收到的任何移动事件都将在Flickable上启动一个轻拍操作:
  1. The event is received before 500ms have elapsed since receiving the press event.? ? ? ?在收到新闻事件后的500毫秒之前接收到事件。
  2. The distance to the press event exceeds 8 logical pixels in an orientation in which we are allowed to move. If?Flickable?decides to flick, any press event sent previously to a?TouchArea, is followed up by an exit event. During the phase of receiving move events, the flickable follows the coordinates.? ? ? ?在允许移动的方向上，到新闻事件的距离超过8个逻辑像素。如果Flickable决定轻弹，之前发送到TouchArea的任何按下事件都会被一个退出事件所跟随。在接收移动事件的阶段，可轻弹对象遵循坐标。
If the interaction of press, move, and release events begins at coordinates that do not intersect with a?TouchArea, then?Flickable?will flick immediately on pointer move events when the euclidean distance to the coordinates of the press event exceeds 8 logical pixels.? ? ? ? ?如果按压、移动和释放事件的交互开始于不与TouchArea相交的坐标，那么当按压事件坐标的欧氏距离超过8个逻辑像素时，Flickable将在指针移动事件上立即轻弹。

Properties 属性

interactive?(in?bool): When true, the viewport can be scrolled by clicking on it and dragging it with the cursor. (default value: true)? ? ? ? ? ? ?interactive 交互的(in 布尔值):当为true时，可以通过点击视窗并用光标拖动它来滚动视窗。(默认值:true)
viewport-height,?viewport-width?(in?length): The total size of the scrollable element.? ? ? ? viewport-height 视口高度, viewport-width 视口宽度(in 长度):可滚动元素的总尺寸。
viewport-x,?viewport-y?(in?length): The position of the scrollable element relative to the?Flickable. This is usually a negative value.? ? ? ? viewport-x, viewport-y (in 长度):可滚动元素相对于可闪烁元素的位置。这通常是一个负值。

Example 例子

export component Example inherits Window {
    width: 270px;
    height: 100px;

    Flickable {
        viewport-height: 300px;
        Text {
            x:0;
            y: 150px;
            text: "This is some text that you have to scroll to see";
            // 这是一些你必须滚动才能看到的文本
        }
    }
}

`FocusScope 焦点作用域`

The?FocusScope?exposes callbacks to intercept key events. Note that?FocusScope?will only invoke them when it?has-focus.

FocusScope 焦点作用域公开回调以拦截关键事件。注意，FocusScope只有在具有焦点时才会调用它们。

The?KeyEvent?has a text property, which is a character of the key entered. When a non-printable key is pressed, the character will be either a control character, or it will be mapped to a private unicode character. The mapping of these non-printable, special characters is available in the?Key?namespace

KeyEvent有一个text属性，它是输入的键的一个字符。当按下一个不可打印的键时，该字符将是一个控制字符，或者它将被映射到一个私有的unicode字符。这些不可打印的特殊字符的映射在Key名称空间中可用

Properties 属性

has-focus?(out?bool): Is?true?when the element has keyboard focus. has-focus 具有焦点(out 布尔值):当元素具有键盘焦点时为true。
enabled?(in?bool): When true, the?FocusScope?will make itself the focused element when clicked. Set this to false if you don’t want the click-to-focus behavior. Similarly, a disabled?FocusScope?does not accept the focus via tab focus traversal. A parent?FocusScope?will still receive key events from child?FocusScopes that were rejected, even if?enabled?is set to false. (default value: true)? ? ? ? ? ? ?enabled 激活的?(in 布尔值):当为true时，FocusScope将在点击时使自己成为焦点元素。如果不想要点击焦点行为，将此设置为false。类似地，禁用的FocusScope不接受通过选项卡焦点遍历的焦点。即使enabled设置为false，父FocusScope仍然会从被拒绝的子FocusScope接收关键事件。(默认值:true)

Functions 功能

focus()?Call this function to transfer keyboard focus to this?FocusScope, to receive future?KeyEvents.? ? ? ?focus（）调用此函数将键盘焦点转移到此FocusScope，以接收未来的KeyEvents。。

Callbacks 回调

key-pressed(KeyEvent)?->?EventResult: Invoked when a key is pressed, the argument is a?KeyEvent?struct. The returned?EventResult?indicates whether to accept or ignore the event. Ignored events are forwarded to the parent element.? ? ? ? ? ? ? ?key-pressed 按键已按下(KeyEvent) -> EventResult:当键被按下时调用，参数是一个KeyEvent结构体。返回的EventResult指示是否接受或忽略该事件。被忽略的事件被转发到父元素。
key-released(KeyEvent)?->?EventResult: Invoked when a key is released, the argument is a?KeyEvent?struct. The returned?EventResult?indicates whether to accept or ignore the event. Ignored events are forwarded to the parent element.? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? key-released 键已释放(KeyEvent) -> EventResult:当key被释放时调用，参数是一个KeyEvent结构体。返回的EventResult指示是否接受或忽略该事件。被忽略的事件被转发到父元素。
focus-changed-event(): Invoked when the focus on the?FocusScope?has changed.? ? ? ? focus-changed-event 焦点更改事件():当FocusScope的焦点发生变化时调用。

Example 例子

export component Example inherits Window {
    width: 100px;
    height: 100px;
    forward-focus: my-key-handler;
    my-key-handler := FocusScope {
        key-pressed(event) => {
            debug(event.text);
            if (event.modifiers.control) {
                debug("control was pressed during this event");
            }
            if (event.text == Key.Escape) {
                debug("Esc key was pressed")
            }
            accept
        }
    }
}

`GridLayout?网格布局`

GridLayout?places its children in a grid.?GridLayout?adds properties to each child:?col,?row,?colspan,?rowspan. You can control the position of children with?col?and?row. If?col?or?row?aren’t specified, they are automatically computed such that the item is next to the previous item, in the same row. Alternatively, the item can be put in a?Row?element. GridLayout将它的子节点放在一个网格中。GridLayout为每个子节点添加属性:col, row, colspan, rowspan。您可以使用col和row来控制子元素的位置。如果未指定col或row，则自动计算它们，使项位于前一项的旁边，位于同一行中。或者，也可以将项目放在Row元素中。

Properties 属性?

spacing?(in?length): The distance between the elements in the layout.? ? ? ? ?间距( in 长度):排版中元素之间的距离。
spacing-horizontal,?spacing-vertical?(in?length): Set these properties to override the spacing on specific directions.? ? ? ? ? ? ?水平间距，垂直间距(in 长度):设置这些属性以覆盖特定方向上的间距。
padding?(in?length): The padding within the layout.? ? ? ? ?padding 填充(in 长度):布局内的填充。
padding-left,?padding-right,?padding-top?and?padding-bottom?(in?length): Set these properties to override the padding on specific sides.? ? ? ? ? ? ? ? 左侧填充, 右侧填充, 上部填充和底部填充(in 长度):设置这些属性来覆盖特定边的padding 填充。

Examples 例子

This example uses the?Row?element: 下面的例子使用了Row元素:

export component Foo inherits Window {
    width: 200px;
    height: 200px;
    GridLayout {
        spacing: 5px;
        Row {
            Rectangle { background: red; }
            Rectangle { background: blue; }
        }
        Row {
            Rectangle { background: yellow; }
            Rectangle { background: green; }
        }
    }
}

This example uses the?col?and?row?properties 本例使用col和row属性

export component Foo inherits Window {
    width: 200px;
    height: 150px;
    GridLayout {
        Rectangle { background: red; }
        Rectangle { background: blue; }
        Rectangle { background: yellow; row: 1; }
        Rectangle { background: green; }
        Rectangle { background: black; col: 2; row: 0; }
    }
}

`Image 图像`

An?Image?can be used to represent an image loaded from a file.

Image可以用来表示从文件中加载的图像。

Properties 属性

colorize?(in?brush): When set, the image is used as an alpha mask and is drawn in the given color (or with the gradient). 着色(in 笔刷):当设置时，图像被用作alpha蒙版，并以给定的颜色(或渐变)绘制。
image-fit?(in?enum?ImageFit): Specifies how the source image shall be fit into the image element. (default value:?contain?when the?Image?element is part of a layout,?fill?otherwise)? ? ? image-fit 图像拟合(in 枚举?ImageFit):指定源图像应该如何适应image元素。(默认值:当图像元素是布局的一部分时contain?包含，否则fill?填充)
image-rendering?(in?enum?ImageRendering): Specifies how the source image will be scaled. (default value:?smooth)? ? ? ?image-rendering 图像渲染(in 枚举 ImageRendering):指定源图像将如何缩放。(默认值:smooth 光滑)
rotation-angle?(in?angle),?rotation-origin-x?(in?length),?rotation-origin-y?(in?length): Rotates the image by the given angle around the specified origin point. The default origin point is the center of the element. When these properties are set, the?Image?can’t have children.? ? ? ? ? ? ? rotate -angle 旋转角度(in 角度)，rotate -origin-x 旋转-原点-x(in 长度)，rotate -origin-y 旋转-原点-y(in 长度):将图像围绕指定原点以给定角度旋转。默认的原点是元素的中心。设置这些属性后，图像不能有子图像。
source?(in?image): The image to load. Use the?@image-url("...")?macro to specify the location of the image.? ? ? ? ? ? source 来源(in image):要加载的图像。使用@image-url("…")宏来指定图像的位置。
source-clip-x,?source-clip-y,?source-clip-width,?source-clip-height?(in?int): Properties in source image coordinates that define the region of the source image that is rendered. By default the entire source image is visible:? ? ? ? ? ? ? ?source-clip-x 来源-剪辑-x, source-clip-y 来源-剪辑-x, source-clip-width 来源-剪辑-宽度, source-clip-height 来源-剪辑-高度(in 整数):源图像坐标中的属性，用于定义要呈现的源图像的区域。默认情况下，整个源图像是可见的:

Property 特性

Default Binding 缺省绑定

source-clip-x

0

source-clip-y

0

source-clip-width

source.width?-?source-clip-x

source-clip-height

source.height?-?source-clip-y
width,?height?(in?length): The width and height of the image as it appears on the screen.The default values are the sizes provided by the?source?image. If the?Image?is?not?in a layout and only?one?of the two sizes are specified, then the other defaults to the specified value scaled according to the aspect ratio of the?source?image.? ? ? ? 宽度，高度(in 长度):图像在屏幕上显示时的宽度和高度。默认值是源图像提供的大小。如果图像不在布局中，并且只指定了两种大小中的一种，则另一种默认为根据源图像的宽高比缩放的指定值。

Property 特性	Default Binding 缺省绑定
`source-clip-x`	`0`
`source-clip-y`	`0`
`source-clip-width`	`source.width?-?source-clip-x`
`source-clip-height`	`source.height?-?source-clip-y`

Example 例子

export component Example inherits Window {
    width: 100px;
    height: 100px;
    VerticalLayout {
        Image {
            source: @image-url("https://slint.dev/logo/slint-logo-full-light.svg");
            // image-fit default is `contain` when in layout, preserving aspect ratio
        }
        Image {
            source: @image-url("https://slint.dev/logo/slint-logo-full-light.svg");
            colorize: red;
        }
    }
}

Scaled while preserving the aspect ratio: 在保持长宽比的同时缩放:

export component Example inherits Window {
    width: 100px;
    height: 150px;
    VerticalLayout {
        Image {
            source: @image-url("https://slint.dev/logo/slint-logo-full-light.svg");
            width: 100px;
            // implicit default, preserving aspect ratio:
            // height: self.width * natural_height / natural_width;
        }
    }
}

`Path 路径`

The?Path?element allows rendering a generic shape, composed of different geometric commands. A path shape can be filled and outlined.

Path 路径元素允许呈现由不同几何命令组成的通用形状。路径形状可以填充和勾画。

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

当不是布局的一部分时，其宽度或高度默认为父元素的100%(未指定)。

A path can be defined in two different ways:

路径可以用两种不同的方式定义:

Using SVG path commands as a string? ? ? ?使用SVG路径命令作为字符串
Using path command elements in?.slint?markup.? ? ? 在.slint标记中使用路径命令元素。

The coordinates used in the geometric commands are within the imaginary coordinate system of the path. When rendering on the screen, the shape is drawn relative to the?x?and?y?properties. If the?width?and?height?properties are non-zero, then the entire shape is fit into these bounds - by scaling accordingly.

几何命令中使用的坐标在路径的虚坐标系内。在屏幕上渲染时，形状是相对于x和y属性绘制的。如果宽度和高度属性不为零，则整个形状都适合这些边界-通过相应地缩放。

Common Path Properties 常用路径属性

fill?(in?brush): The color for filling the shape of the path. 填充(in 笔刷):填充路径形状的颜色。
fill-rule?(in?enum?FillRule): The fill rule to use for the path. (default value:?nonzero?)? ? ? ? ?fill-rule 填充规则(in 枚举?FillRule):要用于路径的填充规则。(默认值:nonzero 非零)
stroke?(in?brush): The color for drawing the outline of the path.? ? ? ? 描边(in 笔刷):画路径轮廓的颜色。
stroke-width?(in?length): The width of the outline. 描边宽度(in 长度):轮廓线的宽度。
width?(in?length): If non-zero, the path will be scaled to fit into the specified width.? ? ? ? ? ? ? ? 宽度(in 长度):如果非零，路径将被缩放以适应指定的宽度。
height?(in?length): If non-zero, the path will be scaled to fit into the specified height.? ? ? ? ? ? 高度(in 长度):如果非零，路径将被缩放以适合指定的高度。
viewbox-x/viewbox-y/viewbox-width/viewbox-height?(in?float) These four properties allow defining the position and size of the viewport of the path in path coordinates.? ? ? ? ? ? ? viewbox-x 视图框-x /viewbox-y/viewbox-width/viewbox-height (in 浮点数)这四个属性允许在路径坐标中定义路径视口的位置和大小。

If the?viewbox-width?or?viewbox-height?is less or equal than zero, the viewbox properties are ignored and instead the bounding rectangle of all path elements is used to define the view port.? ? ? 如果viewbox-width或viewbox-height小于或等于零，则忽略viewbox属性，而使用所有路径元素的边界矩形来定义视图端口。
clip?(in?bool): By default, when a path has a view box defined and the elements render outside of it, they are still rendered. When this property is set to?true, then rendering will be clipped at the boundaries of the view box. This property must be a literal?true?or?false?(default value:?false)? ? ? ? ? clip 修剪;剪掉(in 布尔值):默认情况下，当路径定义了视图框，并且元素在视图框之外呈现时，它们仍然会呈现。当此属性设置为true时，渲染将在视图框的边界处进行裁剪。此属性必须为文字true或false(默认值:false)

Path Using SVG commands 使用SVG命令的路径

SVG is a popular file format for defining scalable graphics, which are often composed of paths. In SVG paths are composed using?commands, which in turn are written in a string. In?.slint?the path commands are provided to the?commands?property. The following example renders a shape consists of an arc and a rectangle, composed of?line-to,?move-to?and?arc?commands:

SVG是一种流行的文件格式，用于定义可伸缩图形，这些图形通常由路径组成。在SVG中，路径是使用命令组成的，而命令又以字符串形式编写。在.slint中，路径命令提供给commands属性。下面的例子渲染了一个由圆弧和矩形组成的形状，由line-to, move-to和arc命令组成:

export component Example inherits Path {
    width: 100px;
    height: 100px;
    commands: "M 0 0 L 0 100 A 1 1 0 0 0 100 100 L 100 0 Z";
    stroke: red;
    stroke-width: 1px;
}

The commands are provided in a property: 这些命令在一个属性中提供:

commands?(in?string): A string providing the commands according to the SVG path specification.? ? ? 命令(in 字符串):根据SVG路径规范提供命令的字符串。

Path Using SVG Path Elements 使用SVG路径元素的路径

The shape of the path can also be described using elements that resemble the SVG path commands but use the?.slint?markup syntax. The earlier example using SVG commands can also be written like that:

路径的形状也可以使用类似于SVG路径命令的元素来描述，但是使用.slint标记语法。前面使用SVG命令的例子也可以这样写:

export component Example inherits Path {
    width: 100px;
    height: 100px;
    stroke: blue;
    stroke-width: 1px;

    MoveTo {
        x: 0;
        y: 0;
    }
    LineTo {
        x: 0;
        y: 100;
    }
    ArcTo {
        radius-x: 1;
        radius-y: 1;
        x: 100;
        y: 100;
    }
    LineTo {
        x: 100;
        y: 0;
    }
    Close {
    }
}

Note how the coordinates of the path elements don’t use units - they operate within the imaginary coordinate system of the scalable path.

注意路径元素的坐标不使用单位——它们在可伸缩路径的虚拟坐标系中运行。

`MoveTo`?Sub-element for?`Path?Path 的 MoveTo 子元素`

The?MoveTo?sub-element closes the current sub-path, if present, and moves the current point to the location specified by the?x?and?y?properties. Subsequent elements such as?LineTo?will use this new position as their starting point, therefore this starts a new sub-path.

MoveTo子元素关闭当前子路径(如果存在)，并将当前点移动到x和y属性指定的位置。随后的元素，如LineTo将使用这个新位置作为它们的起点，因此这将启动一个新的子路径。

Properties 属性

x?(in?float): The x position of the new current point.? ? ? x (in float):新当前点的x位置。
y?(in?float): The y position of the new current point.? ? ? y (in float):新当前点的y位置。

`LineTo`?Sub-element for?`Path?`Path 的`LineTo`子元素

The?LineTo?sub-element describes a line from the path’s current position to the location specified by the?x?and?y?properties.

LineTo子元素描述了从路径的当前位置到x和y特性指定的位置的直线。

Properties 属性

x?(in?float): The target x position of the line.? ? ? ? ?x (in float):线的目标x位置。
y?(in?float): The target y position of the line.? ? ? ? ?y (in float):线的目标y位置。

`ArcTo`?Sub-element for?`Path?Path 的 ArcTo 子元素`

The?ArcTo?sub-element describes the portion of an ellipse. The arc is drawn from the path’s current position to the location specified by the?x?and?y?properties. The remaining properties are modelled after the SVG specification and allow tuning visual features such as the direction or angle.

ArcTo子元素描述椭圆的部分。弧线是从路径的当前位置绘制到由x和y属性指定的位置。其余属性按照SVG规范建模，并允许调整方向或角度等视觉特性。

Properties 属性

large-arc?(in?bool): Out of the two arcs of a closed ellipse, this flag selects that the larger arc is to be rendered. If the property is?false, the shorter arc is rendered instead.? ? ? ? ? ? large-arc 大圆弧(in bool):在封闭椭圆的两个圆弧中，该标志选择渲染较大的圆弧。如果该属性为false，则呈现较短的弧线。
radius-x?(in?float): The x-radius of the ellipse. radius-x 半径 x(in float):椭圆的x半径。
radius-y?(in?float): The y-radius of the ellipse. radius-y 半径 y(in float):椭圆的y半径。
sweep?(in?bool): If the property is?true, the arc will be drawn as a clockwise turning arc; anti-clockwise otherwise.? ? ? ? ? sweep 伸展、延伸(in bool):如果该属性为true，则弧将被绘制为顺时针旋转弧;否则逆时针。
x-rotation?(in?float): The x-axis of the ellipse will be rotated by the value of this properties, specified in as angle in degrees from 0 to 360.? ? ? ? ? x-rotation X 旋转(in float):椭圆的x轴将被此属性的值旋转，该属性的值指定为角度，从0到360度。
x?(in?float): The target x position of the line.? ? ? ? x (in float):线的目标x位置。
y?(in?float): The target y position of the line.? ? ? ? y (in float):线的目标y位置。

`CubicTo`?Sub-element for?`Path?Path 的 CubicTo 子元素`

The?CubicTo?sub-element describes a smooth Bézier from the path’s current position to the location specified by the?x?and?y?properties, using two control points specified by their respective properties.

CubicTo 子元素使用由各自属性指定的两个控制点，描述从路径的当前位置到由 x 和 y 属性指定的位置的平滑 Bézier。

Properties 属性

control-1-x?(in?float): The x coordinate of the curve’s first control point.? ? ? ? ? ? ?control-1-x (in float):曲线的第一个控制点的x坐标。
control-1-y?(in?float): The y coordinate of the curve’s first control point.? ? ? ? ? ? ? control-1-y (in float):曲线的第一个控制点的y坐标。
control-2-x?(in?float): The x coordinate of the curve’s second control point.? ? ? ? ?control-2-x (in float):曲线的第二个控制点的x坐标。
control-2-y?(in?float): The y coordinate of the curve’s second control point.? ? ? ? ? control-2-y (in float):曲线的第二个控制点的y坐标。
x?(in?float): The target x position of the curve.? ? ? ? ?x (in float):曲线的目标x位置。
y?(in?float): The target y position of the curve.? ? ? ? ?y (in float):曲线的目标y位置。

`QuadraticTo`?Sub-element for?`Path?Path 的 QuadraticTo 子元素`

The?QuadraticTo?sub-element describes a smooth Bézier from the path’s current position to the location specified by the?x?and?y?properties, using the control points specified by the?control-x?and?control-y?properties.

QuadraticTo 子元素使用 control-x 和 control-y 属性指定的控制点，描述从路径的当前位置到 x 和 y 属性指定的位置的平滑 Bézier。

Properties 属性

control-x?(in?float): The x coordinate of the curve’s control point.? ? ? ? ? ? ? ?control-x (in float):曲线控制点的x坐标。
control-y?(in?float): The y coordinate of the curve’s control point.? ? ? ? ? ? ? ?control-y (in float):曲线控制点的y坐标。
x?(in?float): The target x position of the curve.? ? ? ? ? ? ? ? ? ? ? ? ?x (in float):曲线的目标x位置。
y?(in?float): The target y position of the curve.? ? ? ? ? ? ? ? ? ? ? ? ?y (in float):曲线的目标y位置。

`Close`?Sub-element for?`Path?`Path 的?`Close?`子元素

The?Close?element closes the current sub-path and draws a straight line from the current position to the beginning of the path.

Close元素关闭当前子路径，并从当前位置到路径的开头绘制一条直线。

`PopupWindow`

Use this element to show a popup window like a tooltip or a popup menu. 使用此元素显示一个弹出窗口，如工具提示或弹出式菜单。

Note: It isn’t allowed to access properties of elements within the popup from outside of the?PopupWindow. 注意:不允许从PopupWindow外部访问弹出框内元素的属性。

Properties 属性?弹出窗口

close-on-click?(in?bool): By default, a PopupWindow closes when the user clicks. Set this to false to prevent that behavior and close it manually using the?close()?function. (default value: true)? ? ? ? ? ? ? close-on-click (in bool):默认情况下，PopupWindow在用户点击时关闭。将其设置为false以防止该行为并使用close()函数手动关闭它。(默认值:true)

Functions 功能

show()?Show the popup on the screen.? ? ? ? ? ?show()在屏幕上显示弹出窗口。
close()?Closes the popup. Use this if you set the?close-on-click?property to false.? ? ? close()关闭弹出窗口。如果将close-on-click属性设置为false，则使用此选项。

Example 例子

export component Example inherits Window {
    width: 100px;
    height: 100px;

    popup := PopupWindow {
        Rectangle { height:100%; width: 100%; background: yellow; }
        x: 20px; y: 20px; height: 50px; width: 50px;
    }

    TouchArea {
        height:100%; width: 100%;
        clicked => { popup.show(); }
    }
}

`Rectangle 矩形`

By default, a?Rectangle?is just an empty item that shows nothing. By setting a color or configuring a border, it’s then possible to draw a rectangle on the screen.

默认情况下，矩形只是一个空项，不显示任何内容。通过设置颜色或配置边框，就可以在屏幕上绘制矩形。

When not part of a layout, its width and height default to 100% of the parent element.

当不是布局的一部分时，其宽度和高度默认为父元素的100%。

Properties 属性

background?(in?brush): The background brush of this?Rectangle, typically a color. (default value:?transparent)? ? ? ?背景(in 笔刷):这个矩形的背景笔刷，通常是一种颜色。(默认值:transparent 透明的)
border-color?(in?brush): The color of the border. (default value:?transparent)? ? ? ? ? ? ? border-color 边框颜色(in 笔刷):边框的颜色。(默认值:transparent)
border-radius?(in?length): The size of the radius. (default value: 0)? ? ? ? ? ? ?border-radius 边界-半径(in length):半径的大小(默认值:0)
border-width?(in?length): The width of the border. (default value: 0)? ? ? ? ? ? ?border-width 边框宽度(in length):边框的宽度。(默认值:0)
clip?(in?bool): By default, when an element is bigger or outside another element, it’s still shown. When this property is set to?true, the children of this?Rectangle?are clipped to the border of the rectangle. (default value:?false)? ? ? ? ? ? ? ? ? ?clip 裁剪(in bool):默认情况下，当一个元素比另一个元素大或位于另一个元素之外时，它仍然会显示。当此属性设置为true时，此矩形的子元素将被剪切到矩形的边框上。(默认值:false)

Example 例子

export component Example inherits Window {
    width: 270px;
    height: 100px;

    Rectangle {
        x: 10px;
        y: 10px;
        width: 50px;
        height: 50px;
        background: blue;
    }

    // Rectangle with a border
    // 带边框的矩形
    Rectangle {
        x: 70px;
        y: 10px;
        width: 50px;
        height: 50px;
        background: green;
        border-width: 2px;
        border-color: red;
    }

    // Transparent Rectangle with a border and a radius
    // 带边框和半径的透明矩形
    Rectangle {
        x: 140px;
        y: 10px;
        width: 50px;
        height: 50px;
        border-width: 4px;
        border-color: black;
        border-radius: 10px;
    }

    // A radius of width/2 makes it a circle
    // 半径为自身宽度的1/2,使它成为一个圆
    Rectangle {
        x: 210px;
        y: 10px;
        width: 50px;
        height: 50px;
        background: yellow;
        border-width: 2px;
        border-color: blue;
        border-radius: self.width/2;
    }
}

`TextInput?文本输入`

The?TextInput?is a lower-level item that shows text and allows entering text.

TextInput 文本输入是显示文本并允许输入文本的底层项。

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

当不是布局的一部分时，其宽度或高度默认为父元素的100%(未指定时)。

Properties 属性

color?(in?brush): The color of the text (default value: depends on the style)? ? ? ? ? ? ? ? ? ? ? color (in brush):文本的颜色(默认值:取决于样式)
font-family?(in?string): The name of the font family selected for rendering the text.? ? ? ? ? font-family 字体类型(in string):选择用于呈现文本的字体类型的名称。
font-size?(in?length): The font size of the text.? ? ? ? ? ?font-size (in length):文本的字体大小。
font-weight?(in?int): The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.? ? ? ? ? ? font-weight (in int):字体的粗细。取值范围为100(最轻)~ 900(最厚)。400是正常重量。
font-italic?(in?bool): Whether or not the font face should be drawn italicized or not. (default value: false)? ? ? ? ? ? ? ? font-italic (in bool):字体是否斜体。(默认值:false)
has-focus?(out?bool):?TextInput?sets this to?true?when it’s focused. Only then it receives?KeyEvents.? ? ? ? ? ? ? ? ?has-focus (out bool): TextInput在获得焦点时将其设置为true。只有这样它才会接收KeyEvents。
horizontal-alignment?(in?enum?TextHorizontalAlignment): The horizontal alignment of the text.? ? ? ? ? ? horizontal-alignment 水平对齐(in 枚举 textthorizontalalignment中):文本的水平对齐方式。
input-type?(in?enum?InputType): Use this to configure?TextInput?for editing special input, such as password fields. (default value:?text)? ? ? ? ? ?input-type 输入类型(in enum InputType):用于配置TextInput，用于编辑特殊输入，如密码字段。(默认值:text)
letter-spacing?(in?length): The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing and a negative value decreases the distance. (default value: 0)? ? ? ? ?字母间距(in 长度):字母间距允许改变字形之间的间距。正值增大间距，负值减小距离。(默认值:0)
read-only?(in?bool): When set to?true, text editing via keyboard and mouse is disabled but selecting text is still enabled as well as editing text programatically. (default value:?false) read-only 只读(in bool):当设置为true时，通过键盘和鼠标编辑文本被禁用，但仍然启用选择文本以及以编程方式编辑文本。(默认值:false)
selection-background-color?(in?color): The background color of the selection.? ? ? ?selection-background-color 选择-背景-颜色(in color):选区的背景色。
selection-foreground-color?(in?color): The foreground color of the selection.? ? ? ? selection-foreground-color 选择-前景-颜色(in color):所选内容的前景色。
single-line?(in?bool): When set to?true, the text is always rendered as a single line, regardless of new line separators in the text. (default value:?true)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?single-line 单行(in bool):当设置为true时，无论文本中是否有新的行分隔符，文本始终呈现为单行。(默认值:true)
text-cursor-width?(in?length): The width of the text cursor. (default value: provided at run-time by the selected widget style)? ? ? ? ? ? ? ? ? ? ? ?text-cursor-width 文本-光标-宽度(in length):文本光标的宽度。(默认值:由所选小部件样式在运行时提供)
text?(in-out?string): The text rendered and editable by the user.? ? ? ? ? ? ? ? ?text 文本(in-out string):由用户呈现和编辑的文本。
vertical-alignment?(in?enum?TextVerticalAlignment): The vertical alignment of the text. vertical-alignment 垂直排列(in enum TextVerticalAlignment):文本的垂直对齐方式。
wrap?(in?enum?TextWrap): The way the text input wraps. Only makes sense when?single-line?is false. (default value: no-wrap)? ? ? ? ? ? ?wrap 换行(in enum textwrap):文本输入的换行方式。只有当单行为假时才有意义。(默认值:no-wrap)

Functions 功能

focus()?Call this function to focus the text input and make it receive future keyboard events.? ? ? ?focus()调用这个函数来聚焦文本输入并使其接收将来的键盘事件。
select-all()?Selects all text.? ? ? ? select-all()选择所有文本。
clear-selection()?Clears the selection.? ? ? ? clear-selection()清除所选内容。
copy()?Copies the selected text to the clipboard.? ? ? ? copy()将选定的文本复制到剪贴板。
cut()?Copies the selected text to the clipboard and removes it from the editable area.? ? ? cut()将选定的文本复制到剪贴板，并将其从可编辑区域中删除。
paste()?Pastes the text content of the clipboard at the cursor position.? ? ? ? ? ? ? paste()将剪贴板的文本内容粘贴到光标位置。

Callbacks 回调

accepted(): Invoked when enter key is pressed.? ? ? ? ? accepted():当按下回车键时调用。
cursor-position-changed(Point): The cursor was moved to the new (x, y) position described by the?Point?argument.? ? ? ?cursor-position-changed 光标位置改变(Point):将光标移动到Point参数所描述的新(x, y)位置。
edited(): Invoked when the text has changed because the user modified it.? ? ? ?edited():当文本因用户修改而发生变化时调用。

Example 例子

export component Example inherits Window {
    width: 270px;
    height: 100px;

    TextInput {
        text: "Replace me with a name";
    }
}

`Text 文本`

The?Text?element is responsible for rendering text. Besides the?text?property, that specifies which text to render, it also allows configuring different visual aspects through the?font-family,?font-size,?font-weight?and?color?properties.

Text元素负责呈现文本。除了指定要呈现哪些文本的text属性之外，它还允许通过font-family、font-size、font-粗细和颜色属性配置不同的视觉方面。

The?Text?element can break long text into multiple lines of text. A line feed character (\n) in the string of the?text?property will trigger a manual line break. For automatic line breaking you need to set the?wrap?property to a value other than?no-wrap, and it’s important to specify a?width?and?height?for the?Text?element, in order to know where to break. It’s recommended to place the?Text?element in a layout and let it set the?width?and?height?based on the available screen space and the text itself.

Text元素可以将长文本分成多行文本。text属性字符串中的换行字符(\n)将触发手动换行。对于自动换行，您需要将wrap属性设置为不换行以外的值，并且为Text元素指定宽度和高度很重要，以便知道在哪里换行。建议将Text元素放置在布局中，并让它根据可用的屏幕空间和文本本身设置宽度和高度。

Properties 属性

color?(in?brush): The color of the text. (default value: depends on the style)? ? ? ? 颜色(in 笔刷):文字的颜色。(默认值:取决于样式)
font-family?(in?string): The name of the font family selected for rendering the text.? ? ? ? ? font-family (in string):选择用于呈现文本的字体族的名称。
font-size?(in?length): The font size of the text.? ? ? ? ? ? ?font-size (in length):文本的字体大小。
font-weight?(in?int): The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.? ? ? ? ? ? font-weight (in int):字体的粗细。取值范围为100(最轻)~ 900(最厚)。400是正常重量。
font-italic?(in?bool): Whether or not the font face should be drawn italicized or not. (default value: false)? ? ? ? ? ? font-italic (in bool):字体是否斜体。(默认值:false)
horizontal-alignment?(in?enum?TextHorizontalAlignment): The horizontal alignment of the text.? ? ? ? ? ? ? horizontal-alignment(in enum textthorizontalalignment中):文本的水平对齐方式。
letter-spacing?(in?length): The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing and a negative value decreases the distance. (default value: 0)? ? ? ? ? ?字母间距(in 长度):字母间距允许改变字形之间的间距。正值增大间距，负值减小距离。(默认值:0)
overflow?(in?enum?TextOverflow): What happens when the text overflows (default value: clip).? ? ? ?overflow (in enum TextOverflow):当文本溢出时会发生什么(默认值:clip)。
text?(in?string): The text rendered.? ? ? ? ? ? ? ?text (in string):呈现的文本。
vertical-alignment?(in?enum?TextVerticalAlignment): The vertical alignment of the text.? ? ? ? ? ? ? vertical-alignment(in enum TextVerticalAlignment中):文本的垂直对齐方式。
wrap?(in?enum?TextWrap): The way the text wraps (default value:?no-wrap).? ? ? ? ? wrap (in enum TextWrap):文本的换行方式(默认值:no-wrap)。

Example 例子

This example shows the text “Hello World” in red, using the default font:

这个例子用红色显示文本“Hello World”，使用默认字体:

export component Example inherits Window {
    width: 270px;
    height: 100px;

    Text {
        x:0;y:0;
        text: "Hello World";
        color: red;
    }
}

This example breaks a longer paragraph of text into multiple lines, by setting a?wrap?policy and assigning a limited?width?and enough?height?for the text to flow down:

下面的例子将一个较长的文本段落分成多行，通过设置一个换行策略，并指定一个有限的宽度和足够的高度，使文本向下流动:

export component Example inherits Window {
    width: 270px;
    height: 300px;

    Text {
        x:0;
        text: "This paragraph breaks into multiple lines of text";
        wrap: word-wrap;
        width: 150px;
        height: 100%;
    }
}

`TouchArea?触摸区`

Use?TouchArea?to control what happens when the region it covers is touched or interacted with using the mouse.

使用TouchArea控制当使用鼠标触摸或交互它所覆盖的区域时会发生什么。

When not part of a layout, its width or height default to 100% of the parent element.

当不是布局的一部分时，其宽度或高度默认为父元素的100%。

Properties 属性

has-hover?(out?bool):?TouchArea?sets this to?true?when the mouse is over it.? ? ? ? ? has-hover 有悬停(out bool):当鼠标在TouchArea上时，将其设置为true。
mouse-cursor?(in?enum?MouseCursor): The mouse cursor type when the mouse is hovering the?TouchArea.? ? ? ? mouse-cursor 鼠标光标(in enum MouseCursor):鼠标悬停在触摸区时的鼠标光标类型。
mouse-x,?mouse-y?(out?length): Set by the?TouchArea?to the position of the mouse within it.? ? ? ?鼠标x，鼠标y(out 长度):由TouchArea设置为鼠标在其中的位置。
pressed-x,?pressed-y?(out?length): Set by the?TouchArea?to the position of the mouse at the moment it was last pressed.? ? ? ? pressed-x, pressed-y(out 长度):由TouchArea设置为鼠标上次被按下时的位置。
pressed?(out?bool): Set to?true?by the?TouchArea?when the mouse is pressed over it.? ? pressed (out bool):当鼠标按在TouchArea上时设置为true。

Callbacks 回调

clicked(): Invoked when clicked: The mouse is pressed, then released on this element.? ? ? ? ? ? ?clicked():单击时调用:按下鼠标，然后在此元素上释放鼠标。
moved(): The mouse has been moved. This will only be called if the mouse is also pressed.? ? ? ? moved():鼠标已被移动。这个函数只有在按下鼠标时才会被调用。
pointer-event(PointerEvent): Invoked when a button was pressed or released. The?PointerEvent?argument contains information such which button was pressed and any active keyboard modifiers.? ? ? ? ?pointer-event 指针事件(PointerEvent):当按钮被按下或释放时调用。PointerEvent参数包含诸如按下了哪个按钮和任何活动的键盘修饰符之类的信息。
scroll-event(PointerScrollEvent)?->?EventResult: Invoked when the mouse wheel was rotated or another scroll gesture was made. The?PointerScrollEvent?argument contains information about how much to scroll in what direction. The returned?EventResult?indicates whether to accept or ignore the event. Ignored events are forwarded to the parent element.? ? ? ? scroll-event 滚动事件(PointerScrollEvent) -> EventResult:当鼠标滚轮被旋转或另一个滚动手势被执行时调用。PointerScrollEvent参数包含关于在哪个方向上滚动多少的信息。返回的EventResult指示是否接受或忽略该事件。被忽略的事件被转发到父元素。

Example 例子

export component Example inherits Window {
    width: 200px;
    height: 100px;
    area := TouchArea {
        width: parent.width;
        height: parent.height;
        clicked => {
            rect2.background = #ff0;
        }
    }
    Rectangle {
        x:0;
        width: parent.width / 2;
        height: parent.height;
        background: area.pressed ? blue: red;
    }
    rect2 := Rectangle {
        x: parent.width / 2;
        width: parent.width / 2;
        height: parent.height;
    }
}

`VerticalLayout`?and?`HorizontalLayout?垂直布局和水平布局`

These layouts place their children next to each other vertically or horizontally. The size of elements can either be fixed with the?width?or?height?property, or if they aren’t set they will be computed by the layout respecting the minimum and maximum sizes and the stretch factor.

这些布局将它们的子元素垂直或水平地放在一起。元素的大小可以通过宽度或高度属性来固定，或者如果没有设置，它们将由布局根据最小和最大尺寸以及拉伸因子来计算。

Properties 属性

spacing?(in?length): The distance between the elements in the layout.? ? ? ? ?间距(in 长度):排版中元素之间的距离。
padding?(in?length): the padding within the layout.? ? ? 填充(in 长度):布局中的填充。
padding-left,?padding-right,?padding-top?and?padding-bottom?(in?length): Set these properties to override the padding on specific sides.? ? ? ? ? ? ? padding-left, padding-right, padding-top和padding-bottom(in 长度):设置这些属性来覆盖特定边的填充。
alignment?(in?enum?LayoutAlignment): Set the alignment. Matches the CSS flex box.? ? ? ? ? ? ? ? alignment 对齐(in enum layoutalalignment中):设置对齐方式。匹配CSS伸缩框。

Example 例子

export component Foo inherits Window {
    width: 200px;
    height: 100px;
    HorizontalLayout {
        spacing: 5px;
        Rectangle { background: red; width: 10px; }
        Rectangle { background: blue; min-width: 10px; }
        Rectangle { background: yellow; horizontal-stretch: 1; }
        Rectangle { background: green; horizontal-stretch: 2; }
    }
}

`Window 窗口`

Window?is the root of the tree of elements that are visible on the screen.

窗口是在屏幕上可见的元素树的根。

The?Window?geometry will be restricted by its layout constraints: Setting the?width?will result in a fixed width, and the window manager will respect the?min-width?and?max-width?so the window can’t be resized bigger or smaller. The initial width can be controlled with the?preferred-width?property. The same applies to the?Windows height.

窗口几何形状将受到其布局约束的限制:设置宽度将导致固定宽度，窗口管理器将尊重最小宽度和最大宽度，因此窗口不能调整大小。初始宽度可以通过preferred-width属性来控制。这同样适用于Windows高度。

Properties 属性

always-on-top?(in?bool): Whether the window should be placed above all other windows on window managers supporting it.? ? ? ? always-on-top 始终在顶部(in bool):该窗口是否应该放在支持它的窗口管理器上的所有其他窗口的上方。
background?(in?brush): The background brush of the?Window. (default value: depends on the style)? ? ?background (in brush):窗口的背景笔刷。(默认值:取决于样式)
default-font-family?(in?string): The font family to use as default in text elements inside this window, that don’t have their?font-family?property set.? ? ? ? ?default-font-family (in string):在此窗口内未设置font-family属性的文本元素中用作默认的字体族。
default-font-size?(in-out?length): The font size to use as default in text elements inside this window, that don’t have their?font-size?property set. The value of this property also forms the basis for relative font sizes.? ? ? ? ? default-font-size (in-out length):该窗口内未设置font-size属性的文本元素的默认字体大小。此属性的值也构成了相对字体大小的基础。
default-font-weight?(in?int): The font weight to use as default in text elements inside this window, that don’t have their?font-weight?property set. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.? ? ? ? ?default-font-weight (in int):该窗口内未设置font-weight属性的文本元素的默认字体粗细。取值范围为100(最轻)~ 900(最厚)。400是正常重量。
icon?(in?image): The window icon shown in the title bar or the task bar on window managers supporting it.? ? ? ?图标(in 图像):在支持它的窗口管理器的标题栏或任务栏中显示的窗口图标。
no-frame?(in?bool): Whether the window should be borderless/frameless or not.? ? ? ? no-frame (in bool):窗口是否应该是无边框/无框架的。
title?(in?string): The window title that is shown in the title bar.? ? ? ? ? title (in string):显示在标题栏中的窗口标题。

Next 下一个

Builtin Enumerations 内装式枚举

文章来源:https://blog.csdn.net/zhanglz888/article/details/135615393
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！

slint 1.3.2 官方文档翻译03

Builtins 内置命令

Builtin Callbacks 内置回调

init()?

Builtin Elements 内置的元素

Common properties 公共属性

Geometry 几何

Layout 布局

Miscellaneous 杂项

Accessibility 可访问性

Drop Shadows 阴影

Dialog 对话框

Properties 属性

Example 例子

Flickable?可轻弹

Pointer Event Interaction 指针事件交互

Properties 属性

Example 例子

FocusScope 焦点作用域

Properties 属性

Functions 功能

Callbacks 回调

Example 例子

GridLayout?网格布局

Properties 属性?

Examples 例子

Image 图像

Properties 属性

Example 例子

Path 路径

Common Path Properties 常用路径属性

Path Using SVG commands 使用SVG命令的路径

Path Using SVG Path Elements 使用SVG路径元素的路径

MoveTo?Sub-element for?Path?Path 的 MoveTo 子元素

Properties 属性

LineTo?Sub-element for?Path?Path 的LineTo子元素

Properties 属性

ArcTo?Sub-element for?Path?Path 的 ArcTo 子元素

Properties 属性

CubicTo?Sub-element for?Path?Path 的 CubicTo 子元素

Properties 属性

QuadraticTo?Sub-element for?Path?Path 的 QuadraticTo 子元素

Properties 属性

Close?Sub-element for?Path?Path 的?Close?子元素

PopupWindow

Properties 属性?弹出窗口

Functions 功能

Example 例子

Rectangle 矩形

Properties 属性

Example 例子

TextInput?文本输入

Properties 属性

Functions 功能

Callbacks 回调

Example 例子

Text 文本

Properties 属性

Example 例子

TouchArea?触摸区

Properties 属性

Callbacks 回调

Example 例子

VerticalLayout?and?HorizontalLayout?垂直布局和水平布局

Properties 属性

Example 例子

Window 窗口

Properties 属性

`init()?`

`Dialog 对话框`

`Flickable?可轻弹`

`FocusScope 焦点作用域`

`GridLayout?网格布局`

`Image 图像`

`Path 路径`

`MoveTo`?Sub-element for?`Path?Path 的 MoveTo 子元素`

`LineTo`?Sub-element for?`Path?`Path 的`LineTo`子元素

`ArcTo`?Sub-element for?`Path?Path 的 ArcTo 子元素`

`CubicTo`?Sub-element for?`Path?Path 的 CubicTo 子元素`

`QuadraticTo`?Sub-element for?`Path?Path 的 QuadraticTo 子元素`

`Close`?Sub-element for?`Path?`Path 的?`Close?`子元素

`PopupWindow`

`Rectangle 矩形`

`TextInput?文本输入`

`Text 文本`

`TouchArea?触摸区`

`VerticalLayout`?and?`HorizontalLayout?垂直布局和水平布局`

`Window 窗口`