slint学习笔记

slint是一个类似qml的标记语言（xml/css之类方便界面设计的语言），经过编译器slint compile（类似QT的moc/uic/rcc工具）可完整的转换成Cpp或者Rust。
其开发方式类似qml+cpp，这得益于slint ui的两位初始创建人来自QT团队。

与qt的qml相比，slint有几个优点：

1. 全slint代码转换成本地语言
2. 原生多本地语言支持（Rust/Cpp/NodeJs）
3. 无历史包袱
4. 开源协议(手机和嵌入式收费)

slint 优点

• 流畅：平滑，触摸友好的用户接口
• 跨平台：目标平台包括嵌入式设备和桌面应用软件(手机和网页)
• 多语言：可以使用自己擅长的语言API(C++,Rust,JavaScript)

许可协议

GPLv3 + 商业

1.1版本以后：
许可证变更：新增更宽松的免版税许可证
除了 GPLv3 和专有商业许可，此版本添加了新的免版税许可作为第三个选项，该许可证可免费用于构建桌面或 Web 应用程序，并消除了 Copyleft 许可证的限制。
所有示例、教程中的示例代码等现在都可以在宽松的 MIT 许可证下使用。这可以在应用程序中自由复制、修改和使用代码，而不受任何 Copyleft 条款的限制。
简化了 CLA 协议，所有贡献现在均在 MIT 无署名许可证下实现，没有版权限制。

https://github.com/slint-ui/slint/blob/release/1.3/LICENSES/LicenseRef-Slint-Royalty-free-1.1.md

个人结论

思路很好，做UI感受很不错（IDE+预览）。
有种LVGL Pro的感觉，对于简单UI的程序，完全够用。对于复杂UI缺失内容太多。
支持多种前端和后端，支持很广泛，点赞。
支持嵌入式设备，点赞！（收费问题很坑）

值得入手学习一下，作为小工具语言。（替代flutter）
如果做商业，用在嵌入式领域rust+slint还可以。(如果不用rust，可以完全使用LVGL替代)

所以，以语言为导向，rust系，推荐。c++系，不推荐。

基础用法

// Explicit positioning
export component Example inherits Window {width: 200px;height: 200px;Rectangle {x: 100px;y: 70px;width: parent.width - self.x;   // 动态计算height: parent.height - self.y;background: blue;Rectangle {x: 10px;y: 5px;width: 50px;height: 30px;background: green;}}// alignment 和 horizontal-stretchHorizontalLayout {alignment: start;Rectangle { background: blue; min-width: 20px; }Rectangle { background: yellow; min-width: 30px; }Rectangle { background: navy; horizontal-stretch: 2;}}// borderRectangle {border-color: orange; border-width: 2px;HorizontalLayout {Rectangle { border-color: black; border-width: 2px; }Rectangle { border-color: pink; border-width: 2px; }}}// 支持for循环HorizontalLayout {spacing: 5px;Rectangle { background: green; }for t in [ "Hello", "World", "!" ] : Text {text: t;}Rectangle { background: blue; }}// gridGridLayout {spacing: 0px;Rectangle { background: red; }Rectangle { background: blue; }Rectangle { background: yellow; row: 1; }Rectangle { background: green; }Rectangle { background: black; col: 2; row: 0; }}
}

常规属性:

• px像素, phx物理像素(考虑缩放)
• preferred-width/preferred-height: 优先的size，不指定时由子元素决定
  • 如果制定了 width、height 那么大小就不可变了
  • horizontal-stretch、vertical-stretch 非零时，表示拉伸
• VerticalLayout / HorizontalLayout / GridLayout：布局，默认子元素拉伸
• padding/padding-left/padding-right/padding-top/bottom: 子元素与layout之间的空白
• spacing: layout内子元素之间的空白
• alignment: stretch/start/end/center/space-between/space-around

容器(可重用组件)

component BoxWithLabel inherits GridLayout {Row {Text { text: "label text here"; }}Row {@children}
}export component MyApp inherits Window {preferred-height: 100px;// 使用容器BoxWithLabel {Rectangle { background: blue; }Rectangle { background: yellow; }}
}

高阶用法

• 多国语言参考 https://slint.dev/releases/1.3.0/docs/slint/src/language/concepts/translations

import { Button } from "std-widgets.slint";
import "./NotoSans-Regular.ttf";  // 引用字体component LabeledInput inherits GridLayout {forward-focus: input;Row {Text {text: @tr("Input Label:");  // @tr() 用来做多国语言font-family: "xxx";font-size: 20px;font-weight: bold;}input := TextInput {}}
}export component App inherits Window {default-font-family: "Noto Sans";  // 默认字体GridLayout {Button {text: "press me";clicked => { label.focus(); }  // 组件的事件}// 为组件起名label := LabeledInput {}}
}

完整语法

1. comments
// 或者 /* .. */2. 命名
a-zA-Z 0-9 _ -
注意: _会被统一改为-，所以 foo_bar 等价于 foo-bar3. 数据类型
参考 https://slint.dev/releases/1.3.0/docs/slint/src/language/syntax/typesangle:0deg/1.2rad/0.25turn
bool: true/false
brush: Colors.red... // 通常是color或者渐变色linear-gradient/radial-gradient
color: #RRGGBBAA / #RGB / transparent
duration: 1ms/2s  // the duration of animations
easing:  linear/ease/... // animation allow specifying an easing curve
float: 0.21/42%
image: @image-url("...")  // image reference
int: 10/222/..
length: 1px / 1pt / 1in / 1mm / 1cm  // used for x, y, width and height coordinates
percent: 0% // 32-bit floating point number that is interpreted as percentage
physical-length: 1phx // an amount of physical pixels
relative-font-size: 0rem  // font size factor that is multiplied with the Window
string: "abc"  // UTF-8 encoded, 支持 \n \u{x} \\ \{ex} 转义符4. 数据结构
// 结构体
export struct Player  {name: string,score: int,
}anonymous structures using 
{ identifier1: type2, identifier1: type2 }// 枚举
export enum CardSuit { clubs, diamonds, hearts, spade }// 数组
[int] l1 : [1,12,35];
l1.length
l1[index]5. 类型转换
int,float可以直接转string
physical-length,length 可以直接转
struct直接如果有相同属性名可以直接转
array不能直接互相转
string转float: "3.14".to-float()/is-float()6. Properties
每个element都有built-in的属性，比如width、color等。
属性的值可以是值，也可以是表达式`{42px}`，支持各种运算符.//自定义属性
export component Example {// declare a property of type int with the name `my-property`property<int> my-property;// declare a property with a default valueproperty<int> my-second-property: 42;// This is meant to be set by the user of the component.in property <string> text;// This property is meant to be read by the user of the component.out property <bool> pressed;// This property is meant to both be changed by the user and the component itself.in-out property <bool> checked;// This property is internal to this component.private property <bool> has-mouse;
}// 默认的property是private, 只在component内部使用
// in 表示input, 可以被外部user修改/binding, assignment by callback。 内部理论上也可以。
// out 表示output, 可以被component内部修改，但是外部user只有read-only.
// in-out both7. Binding
// 普通绑定
import { Button } from "std-widgets.slint";
export component Example inherits Window {preferred-width: 50px;preferred-height: 50px;Button {property <int> counter: 3;clicked => { self.counter += 3 }text: self.counter * 2;  // 根据counter动态计算 binding}
}// 双向绑定
export component Example  {in property<brush> rect-color <=> r.background;// It's allowed to omit the type to have it automatically inferredin property rect-color2 <=> r.background;r:= Rectangle {width: parent.width * 50%;  // 单向 Relative Lengthsheight: parent.height * 50%; // 单向 Relative Lengthsbackground: blue;  // 双向同步}
}8. Function// function 关键字定义函数，默认 private
export component Example {in-out property <int> min;in-out property <int> max;protected function set-bounds(min: int, max: int) {root.min = min;root.max = max}public pure function inbound(x: int) -> int {return Math.min(root.max, Math.max(root.min, x));}
}9. Callback
communicate changes of state to the outsideexport component Example inherits Rectangle {// declare a callbackcallback hello(int, string);callback clicked <=> area.clicked;  // 双向绑定两个 callbackhello(aa, bb) => { aa + bb }  // callback的实现，可以在其他地方通过 => 绑定一个callbackarea := TouchArea {// sets a handler with `=>`clicked => {// emit the callbackroot.hello(1, "abc")}}
}10. Repetition and condition
// 通过for循环创建重复component
export component Example inherits Window {preferred-width: 300px;preferred-height: 100px;for my-color[index] in [ #e11, #1a2, #23d ]: Rectangle {height: 100px;width: 60px;x: self.width * index;background: my-color;}
}// if 条件执行不同渲染
export component Example inherits Window {preferred-width: 50px;preferred-height: 50px;if area.pressed : foo := Rectangle { background: blue; }if !area.pressed : Rectangle { background: red; }area := TouchArea {}
}11. Animation
// 属性动画，具体效果参考 https://slint.dev/releases/1.3.0/docs/slint/src/language/syntax/animations
export component Example inherits Window {preferred-width: 100px;preferred-height: 100px;background: area.pressed ? blue : red;animate background {duration: 250ms;}area := TouchArea {}
}12. States
13. Global Singletons
14. Modules
// button.slint
component Button inherits Rectangle {// ...
}export { Button as ColorButton } // option1
export { Button }  // Option2// main.slint
import { Button } from "./button.slint";
import { Button as CoolButton } from "../other_theme/button.slint";export component App inherits Rectangle {// ...Button {// ...}
}// 相对路径引入
import { MySwitch } from "@mylibrary";

内建功能

1. init()

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 {}
}
// print “first”, then “second”, and then “third”

2. Common properties
   Geometry

• width/height: length
• x/y: length
• z: float
• absolute-position: point

Layout

• col/row/colspan/rowspan: int
• horizontal-stretch/vertical-stretch: float
• max-width/max-height/min-width/min-height: length
• preferred-width/preferred-height: length

Miscellaneous

• cache-rendering-hint: bool
• dialog-button-role: enum DialogButtonRole
• opacity: float, 0-1, 0 is fully transparent (invisible), and 1 is fully opaque
• visible: bool

Drop Shadows(support Rectangle)

• drop-shadow-blur: length // The radius of the shadow
• drop-shadow-color: color // The base color of the shadow
• drop-shadow-offset-x/y: length // The horizontal and vertical distance of the shadow from the element’s frame

Accessibility

• accessible-role: enum AccessibleRole
• accessible-checkable: bool
• accessible-checked: bool
• accessible-description: string
• accessible-has-focus: bool
• accessible-label: string
• accessible-value-maximum/minimum/step: float
• accessible-value: string

Image

• colorize: brush // is used as an alpha mask and is drawn in the given color
• image-fit: enum ImageFit // default contain, fill parent
• image-rendering: enum ImageRendering //image scaled, default smooth
• rotation-angle: angle
• rotation-origin-x/y: length // Rotates the image by the given origin point.
• source: image // @image-url(“…”)
• source-clip-x/y/width/height: int // define the region of the source image that is rendered
• width/height: length

Path(SVG or slint)

• fill: brush // The color for filling the shape of the path
• fill-rule: enum FillRule // nonzero
• stroke: brush // the outline of the path.
• stroke-width: length
• width/height: length // If non-zero, the path will be scaled to fit into the specified height
• viewbox-x/viewbox-y/viewbox-width/viewbox-height: float // the position and size of the viewport of the path
• clip: bool // default false. if true, rendering will be clipped at the boundaries of the view box
• commands: string // SVG Path, such as: “M 0 0 L 0 100 A 1 1 0 0 0 100 100 L 100 0 Z”

custom the Path in slint:

// more command: https://slint.dev/releases/1.3.0/docs/slint/src/language/builtins/elements#path-using-svg-path-elements
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 {}
}

PopupWindow

• close-on-click : in bool
• show()
• close()

Rectangle

• background : in brush
• border-color : in brush
• border-radius : in length
• border-width : in length
• clip : in bool //default false, 超出parent border时，子元素是显示还是裁剪掉

TextInput

• color: brush
• font-family: string
• font-size: length
• font-weight: int // 100-900
• font-italic: bool
• has-foucs: out bool
• vertical/horizontal-alignment: enum TextVerticalAlignment/TextHorizontalAlignment
• input-type: enum InputType // default text, password/number/decimal
• letter-spacing: length
• read-only: bool
• selection-background/foreground-color: color // 选中文本颜色
• single-line: bool // default true
• text-cursor-width: length
• wrap: enum TextWrap //default no-wrap, Only makes sense when single-line is false
• focus()
• select-all()
• clear-selection()
• copy() // 剪切板
• cut() // 剪切板
• paste() //剪切板
• accepted() : callback // when enter key is pressed
• cursor-position-changed(Point) : callback // cursor was moved to the new (x, y) position
• edited() : callback // the text has changed because the user modified it

Text

• color: brush
• font-family: string
• font-size: length
• font-weight: int // 100-900
• font-italic: bool
• vertical/horizontal-alignment: enum TextVerticalAlignment/TextHorizontalAlignment
• letter-spacing: length
• wrap: enum TextWrap //default no-wrap, Only makes sense when single-line is false
• overflow: enum TextOverflow // default clip. What happens when the text overflows
• text: string

TouchArea

• has-hover : out bool
• mouse-cursor： enum MouseCursor
• mouse-x, mouse-y： length //
• pressed-x, pressed-y: length // the position of the mouse at the moment it was last pressed
• pressed : bool
• clicked() : callback
• moved() : callback // his will only be called if the mouse is also pressed
• pointer-event(PointerEvent) : callback // when a button was pressed or released.
• scroll-event(PointerScrollEvent) -> EventResult: callback // when the mouse wheel was rotated or another scroll gesture was made

Window

• preferred-width/preferred-height: length // initial window size
• always-on-top: bool
• background: brush // default depends on window style
• default-font-family: string
• default-font-size: length
• default-font-weight: int // 100-900, 400 normal
• icon: image // window icon shown in the title bar or the task bar
• no-frame: bool // window should be borderless/frameless or not
• title: string // window title that is shown in the title bar

functions/global

• animation-tick()
• debug(…)
• TextInputInterface.text-input-focused:bool //全局输入状态，做屏幕键盘用
• rgb(int, int, int) -> color, rgba(int, int, int, float) -> color
• abs(float) -> float / ceil(float) -> int / floor(float) -> int / mod(T, T) -> T
• Colors.aquamarine/Colors.red
• Key.F1/Key.Home

3. Widgets
   All widgets support all properties common to builtin elements.

• AboutSlint
• Button // icon, checkable, text, primary, clicked()
• CheckBox // checked, text, toggled()
• Switch // checked, text, toggled()
• ComboBox // current-index, model [], selected(string)
• GroupBox // title
• LineEdit // input-type, placeholder-text, text, accepted(string), edited(string)
• TextEdit // text, wrap, edited(string)
• ListView // like ScrollView, 虚拟的list容器，需要自定义item
• ScrollView // viewport-width/height, visible-width/height
• StandardListView // 标准list. current-item, model, set-current-item(int), current-item-changed(int)
• ProgressIndicator //indeterminate, progress
• Spinner // indeterminate, progress
• Slider // value, maximum, minimum, orientation, changed(float)
• SpinBox // value, maximum, minimum, edited(int)
• StandardButton // kind, pressed, clicked()
• StandardTableView // 标准table, current-sort-column, columns, rows, current-row, set-current-row(int), current-row-changed(int)
• TabWidget // current-index, content-width/height. For Tab: icon, num-tabs, tab-index, title, current-focused
• VerticalBox/HorizontalBox/GridBox // as with VerticalLayout/HorizontalLayout/GridLayout

Widget Style

The widget style is determined at your project’s compile time.
If no style is selected, native is the default.

Renderer

Slint可以选择多种渲染后端，各有利弊。
https://slint.dev/releases/1.3.0/docs/slint/src/advanced/backends_and_renderers

Qt Renderer
Software Renderer
FemtoVG Renderer
Skia Renderer