Slint 内置元素

内置元素

通用属性

几何坐标

这些属性对所有可见项目都有效：

• width 和 height (length)：元素的尺寸，被设置后可以重写默认的大小
• x和y（length）：元素相对于其父级元素的偏移位置
• z(float)：允许指定不同的顺序来将项目与其同级项目堆叠。 （默认值：0）
• absolute-position(float)：元素在所包含窗口中的位置。

布局

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

• col,row ,col-span 和 row-span (int)：具体查看 GridLayout。
• horizontal-stretch 和 vertical-stretch (in-out float)：指定元素在布局中的拉伸因子。当为0时，这意味着除非所有元素都为0，否则元素不会被拉伸。内置小部件的值为 0 或 1。
• max-width 和 max-heigth (in length)：元素尺寸的最大值。
• min-width 和 min-height (in length)：元素尺寸的最小值。
• preferred-width 和 preferred-height (in length)：元素尺寸的偏好值。

杂项

• cache-rendering-hint (in bool)：当设置为 true 时，这会向渲染器提供提示，将元素和所有子元素的内容缓存到中间缓存层中。对于很少改变的复杂子树，这可能会加快渲染速度，但代价是增加内存消耗。并非所有渲染后端都支持这一点，因此这只是一个提示。(默认为flase)。
• dialog-button-role (in enum DialogButtonRole): 指定在对话框中这是一个按钮。
• opacity (in float): 在0到1之间的浮点数（或者使用百分比）用来绘制元素以及其子元素的不透明度。0 是完全透明（不可见），1 是完全不透明。不透明度应用于子元素树，就好像它们首先被绘制到中间层中一样，然后使用此不透明度渲染整个层。 （默认值：1）
• visable (in bool): 当设置为falase时，此元素还有它的所有子元素均不会被绘制并且针对鼠标输入事件不进行交互（默认值是true）。
• 以下示例演示了子级的不透明度（opacity）属性。对红色矩形应用不透明度。由于绿色矩形是红色矩形的子级，因此您可以看到其下方的渐变，但无法透过绿色矩形看到红色矩形。

  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;
          }
      }
  }

可访问性

使用带有accessible-前缀的属性可以使您的项目与屏幕阅读器、盲文终端和其他软件等软件良好交互，从而使您的应用程序易于访问。

• accessible-role （in enum (AccessibleRole)[https://slint.dev/releases/1.4.1/docs/slint/src/language/builtins/enums.html#accessiblerole]）：元素的作用。为了能够使用任何其他可访问的属性，此属性是必需的。应将其设置为恒定值。 （默认值：大多数元素均无默认值，但 Text 元素为文本）
• accessible-checkable（in bool）：元素是否可以被选中。
• accessible-checked（in bool）：元素是否被选中。这映射到复选框、单选按钮和其他小部件的“checked”状态。
• accessible-description（in string）：当前元素的描述。
• accessible-has-focus（in bool）：当当前元素当前具有焦点时，设置为true。
• accessible-label（in string）：交互式元素的标签。（默认值：对于大多数元素为空，或者对于Text元素为text属性的值）
• accessible-value-maximum（in float）：项目的最大值。例如，这被用于微调框。
• accessible-value-minimum（in float）：项目的最小值。
• accessible-value-step（int float）：当前值可以更改的最小增量或减量。这对应于滑块上的手柄可以拖动的步长。
• accessible-value（in string）：项目的当前值。

阴影

为了实现在元素框架下方显示阴影效果以提升视觉上的物理影响，可以为其设置drop-shadow属性：

• drop-shadow-blur(in length) ：阴影的半径并且描述了应用阴影的模糊程度。设置为负数值则被忽略，设置为0为无模糊效果。（默认值为0）
• drop-shadow-color (in color)：阴影使用的基本颜色。通常，该颜色是渐变为透明的渐变的起始颜色。
• drop-shadow-offset-x drop-shadow-offset-y (in length)：阴影距离元素框架的水平和垂直距离。一个正数值会将阴影对于元素的左方/上方提升
  Rectangle矩形元素支持drop-shadow效果

对话框

对话框就像一个窗口，但它具有自动布局的按钮。
一个对话框必须拥有一个子元素作为主元素，但是它不可以是一个按钮。一个对话框可以用多个StandardButton组件或其他具有dialog-button-role属性的按钮。按钮的放置顺序取决于运行时的目标平台。
StandardButton中的kind属性以及dialog-button-role属性需要被设置为一个常量，它不能是一个随意的变量表达式。 不能有多个相同类型的StandardButton。
当一个StandardButton没有显式回调处理程序（callback handler），一个<kind>_clicked的回调函数将自动添加到StandardButton中，因此可以从本机代码中处理它。例如：如果有一个取消（kind:cancel）类型的按钮，则会添加 cancel_clicked 回调。

属性

• icon (in image)：支持在标题栏或者是任务栏中显示的图标。
• title(in string)：显示在标题栏中的窗口标题。

案例

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滑动性

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

指针事件交互

如果Flickable的区域包含了TouchArea的元素并使用点击动作，比如说Button控件，则使用以下算法来区分用户的滑动意图或与 TouchArea 元素交互的意图：

1. 如果Flickable的交互(interactive)属性设置为false，所有的事件都会转发到下方的元素中。
2. 如果在事件坐标与 TouchArea 交互的情况下接收到按下事件，则会存储该事件，并按如下方式处理任何后续移动和释放事件：
   1. 如果 100ms 后没有发生任何事件，则存储的按下事件将传递到 TouchArea。
   2. 如果在 100 毫秒之前收到释放事件，则存储的按下事件和释放事件将立即传递到 TouchArea，并且算法会重置。
   3. 如果满足以下所有条件，接收到的任何移动事件都会在 Flickable 上启动滑动操作：
      1. 在收到新闻事件后的500毫秒之前接收到事件。
      2. 在允许移动的方向上，到新闻事件的距离超过8个逻辑像素。如果Flickable决定滑动，之前发送到TouchArea的任何按下事件都会被一个退出事件所跟随。在接收移动事件的阶段，闪烁跟随坐标
3. 如果按压、移动和释放事件的交互开始于不与TouchArea相交的坐标，那么当按压事件坐标的欧氏距离超过8个逻辑像素时，Flickable将在指针移动事件上立即滑动。