はじめに
Rustによる軽量GUIフレームワーク、スリントのアドベントカレンダーも後半戦17日目に突入しました。いやぁ、結構頻繁に書くの辛いですね。まぁ、クリスマスまであと少しですし、できるだけがんばりますが。
昨日は、@task_jp さんによる「Slint で車載用のメーターを作ってみました」でした。こういうの、通常の組込だと画像に頼るほうが多いきがしますが、頑張ってAPIで実装されているので、色々参考になりますよね。
本日のお題
本日はSlint言語入門の方を再開しておきます。
構文については一通り書いたので、Slint言語に組み込まれたビルトイン機能についての解説になります。
Slint言語入門
ビルトイン機能
Slint言語が提供するビルトインは、モジュールimportを必要とせず、標準で利用できる基本機能です。
ただし、一部機能についてはマイコン向けのno_std環境では利用できません。また、一部はstd-widgets.slintと組み合わせること前提のものもあります。
以下のような分類でそれぞれを解説していきます。
- エレメント
- 列挙型
- 構造体
- グローバルシングルトン
- 関数
- コールバック
組込エレメント
エレメントは構成要素です。本家のドキュメントは名前順で解説していますが、とりあえずざっくり種類別に区分してみて並べてみました。
ウィンドウエレメント
表示系エレメントで、エレメントツリーの親になるウィンドウ部のエレメント郡です。
Window
ウィンドウの基本エレメントです。
| プロパティ | 型 | 概要 |
|---|---|---|
| always-on-top | in bool | 常に最上位にウィンドを置くか |
| background | in brush | 背景ブラシ |
| default-font-family | in string | フォントファミリ |
| default-font-size | in-out length | フォントサイズ |
| default-font-weight | in int | フォント太さ |
| icon | in image | ウィンドウアイコン |
| no-frame | in bool | フレームレス |
| resize-border-width | in length | ボーダーサイズ |
| title | in string | ウィンドタイトル |
Dialog
自動的にレイアウトされるボタンを有するウィンドウ。ボタン以外に１つ以上のエレメントを必要とします。
| プロパティ | 型 | 概要 |
|---|---|---|
| icon | in image | ウィンドアイコン |
| title | in string | タイトル |
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;
}
}
PopupWindow
ツールチップやポップアップメニューなどのポップアップウィンドウとなるエレメント
| プロパティ | 型 | 概要 |
|---|---|---|
| close-on-click | in bool | click時に閉じるか否か |
| 関数 | 概要 |
|---|---|
| show() | ウィンドウを開く |
| close() | ウィンドウを閉じる |
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(); }
}
}
レイアウトエレメント
レイアウトエレメントはエレメントを特定の条件に従い配置する配置するエレメントです。
GridLayout
格子状配置用レイアウト
| プロパティ | 型 | 概要 |
|---|---|---|
| spacing | in length | 要素間距離 |
| spacing-horizontal | in length | 水平方向間隔 |
| spacing-vertical | in length | 垂直方向間隔 |
| padding | in length | パディング |
| padding-left | in length | 左パディング |
| padding-right | in length | 右パディング |
| padding-top | in length | 上パディング |
| padding-bottom | in length | 下パディング |
example
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; }
}
}
VerticalLayout/HorizontalLayout
垂直方向レイアウト・水平方向レイアウト
| プロパティ | 型 | 概要 |
|---|---|---|
| spacing | in length | 要素間距離 |
| padding | in length | パディング |
| padding-left | in length | 左パディング |
| padding-right | in length | 右パディング |
| padding-top | in length | 上パディング |
| alignment | in LayoutAlignment(enum) | 上パディング |
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; }
}
}
表示系エレメント
画面を構成する表示用のエレメント
Rectangle
デフォルトでは何も表示されない空白の四角形。色の設定や境界線を設定することで画面上に四角形を表示できます。
| プロパティ | 型 | 概要 |
|---|---|---|
| background | in brash | 背景ブラシ。デフォルト透明色 |
| border-color | in brash | ボーダーブラシ。デフォルト透明色 |
| border-radius | in length | ボーダー半径の大きさ。デフォルト値 0 |
| border-top-left-radius | in length | ボーダー左上半径 |
| border-bottom-left-radius | in length | ボーダー左下半径 |
| border-bottom-right-radius | in length | ボーダー右下半径 |
| border-top-right-radius | in length | ボーダー右上半径 |
| border-width | in length | ボーダー幅 |
| clip | in bool | 子要素をクリップするか。デフォルト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
Rectangle {
x: 210px;
y: 10px;
width: 50px;
height: 50px;
background: yellow;
border-width: 2px;
border-color: blue;
border-radius: self.width/2;
}
}
Text
テキストのレンダリング用エレメント。
| プロパティ | 型 | 概要 |
|---|---|---|
| color | in brash | 文字描画ブラシ |
| font-family | in string | フォントファミリ |
| font-size | in lengt | フォントサイズ |
| font-weight | in lengt | フォントの太さ: 100〜900,標準400 |
| font-italic | in bool | 斜体。デフォルトfalse |
| horizontal-alignment | in TextHorizontalAlignment | 水平方向の配置 |
| letter-spacing | in length | 文字間隔 |
| overflow | TextOverflow | オーバーフロー時動作 デフォルト Clip |
| text | in string | テキスト |
| vertical-alignment | in TextVerticalAlignment | 垂直方向 |
| wrap | in TextRap | 折り返し方法。デフォルト np-wrap |
| stroke | in Brash | アウトライン描画ブラシ。デフォルト値 透明色 |
| stroke-width | in length | アウトライン幅。０の場合は1で描画 |
| stroke-style | in TextStrokeStyle | アウトラインスタイル。デフォルト outside |
| rotation-angle | in angle | テキスト回転角度 |
| rotation-origin-x | in length | 回転中心X座標 |
| rotation-origin-y | in length | 回転中心Y座標 |
TextInput
入力可能なテキスト領域エレメント
| プロパティ | 型 | 概要 |
|---|---|---|
| color | in brash | 文字描画ブラシ |
| font-family | in string | フォントファミリ |
| font-size | in lengt | フォントサイズ |
| font-weight | in lengt | フォントの太さ: 100〜900,標準400 |
| font-italic | in bool | 斜体。デフォルトfalse |
| has-focus | out bool | フォーカスの有無 |
| horizontal-alignment | in TextHorizontalAlignment | 水平方向の配置 |
| input-type | in InputType | 入力種別。パスワードなどの特殊タイプ選択 |
| letter-spacing | in length | 文字間隔 |
| read-only | in bool | テキスト編集無効、選択とプログラム編集は可能。デフォルトfalse |
| selection-background-color | in color | 選択範囲の背景色 |
| selection-foreground-color | in color | 選択範囲の文字色 |
| single-line | in bool | テキスト内改行に関わらず１行で表示する |
| text-cursor-width | in length | カーソル幅 |
| text | in string | テキスト |
| vertical-alignment | in TextVerticalAlignment | 垂直方向 |
| wrap | in TextRap | 折り返し方法。デフォルト np-wrap |
| 関数 | 概要 |
|---|---|
| focus() | フォーカスを取得する |
| clear-focus() | フォーカスをクリアする |
| set-selection-offsets(int, int) | 範囲選択 |
| select-all() | 全選択 |
| clear-selection() | 選択解除 |
| copy() | クリップボードコピー |
| cut() | クリップボードカット |
| paste() | クリップボードペースト |
| コールバック | 概要 |
|---|---|
| accepted() | 確定(Enterキー入力)の通知 |
| cursor-position-changed(Point) | カーソル位置移動通知 |
| edited() | テキスト変更通知 |
Image
ロード済み画像表示エレメント
| プロパティ | 型 | 概要 |
|---|---|---|
| colorize | in brash | 画像をマスクに使いブラシで描画する |
| horizontal-alignment | in ImageHorizontalAlignment | 水平方向配置 |
| horizontal-tiling | in ImageTiling | 画像を水平に沿って並べるか |
| image-fit | in ImageFit | 画像フィッチング方法 |
| image-rendering | in ImageRendering | 画像レンダリング方法 |
| rotation-angle | in angle | テキスト回転角度 |
| rotation-origin-x | in length | 回転中心X座標 |
| rotation-origin-y | in length | 回転中心Y座標 |
| source | in image | 画像イメージ。@image-urlマクロで場所指定する |
| source-clip-x | in int | クリップイメージ領域X座標 |
| source-clip-y | in int | クリップイメージ領域Y座標 |
| source-clip-width | in int | クリップイメージ領域幅 |
| source-clip-height | in int | クリップイメージ領域高 |
| vertical-alignment | in TextVerticalAlignment | 垂直方向 |
| vertical-tiling | in ImageTiling | 画像を垂直に沿って並べるか |
| width | in size | 表示幅 |
| height | in size | 表示高 |
このあたりは、開発中のスナップショットされたドキュメントがわかりやすいのでそちらを参考にしてみてください。
https://snapshots.slint.dev/master/docs/slint/reference/elements/image/
Path
SVGパスコマンドあるいはマークアップパスコマンドで一般的なシェイプをレンダリングするエレメント。
複雑な幾何学コマンドで画像を構成できますが、わりと複雑な上にドキュメントがわかりにくいので、詳細は省略して今後どこかでまとめ直したいと思います。
Flickable
こちらはScrollViewなどのベースとなるフリック可能エレメントです。表示可能領域と表示領域を持っていて隠れた部分をマウス操作やキー操作で移動して表示できるエレメントとなっています。ただしスクロールバーなどの機能を有していません。まぁ、スマホの画面操作みたいなものだと思っていただければ外していないかと。
| プロパティ | 型 | 概要 |
|---|---|---|
| interactive | in bool | イベントを自身で受け取る（false時は子に転送する),デフォルトtrue |
| viewport-x | in length | スクロール可能な要素の相対位置X座標 |
| viewport-y | in length | スクロール可能な要素の相対位置Y座標 |
| viewport-width | in length | スクロール可能な要素の幅 |
| viewport-height | in length | スクロール可能な要素の高さ |
| コールバック | 概要 |
|---|---|
| flicked() | ユーザーアクション (ドラッグ、スクロール) によってviewportが変更されたことを通知 |
イベント系エレメント
マウス・ジェスチャー・キー入力・タイマー等のイベントに関わるエレメント
Timer
指定した間隔でコールバックをスケジュールする疑似タイマーエレメント。
特殊エレメントで、共通プロパティなし。子を持つことはなく、継承もできない。
| プロパティ | 型 | 概要 |
|---|---|---|
| interval | in duration | タイマー間隔。必須プロパティ |
| running | in bool | タイマー実行。デフォルト値 true |
| コールバック | 概要 |
|---|---|
| triggered() | タイマー経過時に発生 |
FocusScope
キーイベントをインターセプトするためのエレメント。
| プロパティ | 型 | 概要 |
|---|---|---|
| has-focus | out bool | フォーカスの有無 |
| enabled | in bool | フォーカス可能にするか。デフォルト値true |
| 関数 | 概要 |
|---|---|
| focus() | フォーカスを取得する |
| clear-focus() | フォーカスをクリアする |
| コールバック | 概要 |
|---|---|
| key-pressed(KeyEvent) -> EventResult | キーが押されたことを通知 |
| key-released(KeyEvent) -> EventResult | キーが離されたことを通知 |
| focus-changed-event() | フォーカス変更通知 |
なお、EventResultでrejectを返すと親エレメントにイベントが転送されます。
TouchArea
マウスやタッチパネルなどで操作したときのイベントを処理するエレメント。
| プロパティ | 型 | 概要 |
|---|---|---|
| has-hover | out bool | マウスが領域内にあるか |
| mouse-cursor | in MouseCursor | hover中のカーソルの種類 |
| mouse-x | out length | マウスX座標 |
| mouse-y | out length | マウスY座標 |
| pressed-x | out length | マウスが最後に押されたX座標 |
| pressed-y | out length | マウスが最後に押されたY座標 |
| pressed | out bool | マウスが押されているか |
| コールバック | 概要 |
|---|---|
| clicked() | クリックされたことを通知 |
| double-clicked() | ダブルクリックされたことを通知 |
| moved() | マウスの移動を通知 |
| pointer-event(PointerEvent) | ポインタのイベントを通知 |
| scroll-event(PointerScrollEvent) | ホイール回転やスクロールジェスチャーイベントを通知 |
SwipeGestureHandler
スワイプジェスチャを処理するエレメント
| プロパティ | 型 | 概要 |
|---|---|---|
| enabled | in bool | 有効にするか否か。デフォルト値true |
| handle-swipe-left | out bool | 左方向へスワイプするか。デフォルト値false |
| handle-swipe-right | out bool | 右方向へスワイプするか。デフォルト値false |
| handle-swipe-up | out bool | 上方向へスワイプするか。デフォルト値false |
| handle-swipe-down | out bool | 下方向へスワイプするか。デフォルト値false |
| pressed-position | out Point | スワイプ開始された位置情報 |
| current-position | out Point | 現在の位置情報 |
| swiping | out bool | スワイプ中か否か |
| コールバック | 概要 |
|---|---|
| moved() | マウスの移動を通知 |
| swiped() | スワイプされポインタが開放されたことを通知 |
| canceled() | スワイプのプログラム的なキャンセル、またはフォーカスロスト時の通知 |
| 関数 | 概要 |
|---|---|
| cancel() | ジェスチャーをキャンセルする |
共通プロパティ
ほとんどのエレメントが共通で持つプロパティ
| カテゴリ | プロパティ | 型 | 概要 |
|---|---|---|---|
| ジオメトリ | x | in length | 親に対する相対位置X座標 |
| y | in length | 親に対する相対位置Y座標 | |
| z | in length | 兄弟アイテムとスタックする順序。デフォルト値 0 | |
| width | in length | エレメントの幅 | |
| height | in length | エレメントの高さ | |
| absolute-position | out Point | Window内のエレメントの位置 | |
| レイアウト | col | in int | 列位置 |
| row | in int | 行位置 | |
| colspan | in int | 列結合数 | |
| rowspan | in int | 行結合数 | |
| horizontal-streatch | in-out float | 水平方向の拡大縮小係数 | |
| vertical-streatch | in-out float | 垂直方向の拡大縮小係数 | |
| max-width | in length | 最大幅 | |
| max-height | in length | 最大高さ | |
| min-width | in length | 最小幅 | |
| min-height | in length | 最小高さ | |
| preferred-width | in length | 推奨幅 | |
| preferred-height | in length | 推奨高さ | |
| アクセスビリティ | accessible-role | in AccessibleRole | エレメントのロール設定 |
| accessible-checkable | in bool | エレメントがチェック可能か | |
| accessible-checked | in bool | エレメントがチェックされているか | |
| accessible-description | in string | エレメントの説明 | |
| accessible-label | in string | インタラクティブエレメントのラベル | |
| accessible-value-maximum | in float | アイテムの最大数 | |
| accessible-value-minimum | in float | アイテムの最小数 | |
| accessible-value-step | in float | 増減値 | |
| accessible-value | in string | 現在値 | |
| accessible-placeholder-text | in string | 空の場合に利用するプレースホルダテキスト | |
| ドロップシャドウ（Rectangleに対する影による視覚効果） | drop-shadow-blur | in length | 影の半径,ぼかしレベル。負数は０。デフォルト値: 0 |
| drop-shadow-color | in Color | 影の基本色(グラデーション開始色） | |
| drop-shadow-offset-x | in length | エレメントフレームからの影の水平位置 | |
| drop-shadow-offset-y | in length | エレメントフレームからの影の垂直位置 | |
| その他 | cache-rendering-hint | in bool | レンダリングキャッシュを有効にするか。画面変更の少ない複雑なエレメント構成ならメモリを消費して高速描画できる |
| dialog-button-role | in DialogButtonRole | ダイアログのボタンロール設定 | |
| opacity | in float | 自身を含むエレメントツリーの透明度。０〜１の範囲。デフォルト値１ | |
| visible | in bool | 表示・非表示操作。デフォルト true |
共通コールバック
ほとんどのエレメントが共通で持つコールバック
| 種別 | コールバック | 概要 |
|---|---|---|
| アクセスビリティ | accessible-action-default() | デフォルトのアクション要求通知 |
| accessible-action-set-value(string) | 値変更通知 | |
| accessible-action-increment() | 値加算通知 | |
| accessible-action-decrement() | 値減算通知 |
組込列挙型
AccessibleRole
共通プロパティ"accessible-role"用の列挙型。スクリーンリーダーなどの支援技術にエレメントの役割を通知するために利用される。一般的なUIにあるパーツとしてどのような操作意図しているかを提示するもので、Slintでは未実装なウィジェット種別もある。
| name | 概要 |
|---|---|
| none | アクセス不可 |
| button | Button、またはその様に動作 |
| checkbox | CheckBox、またはその様に動作 |
| combobox | ComboBox、またはその様に動作 |
| list | ListView、またはその様に動作 |
| slider | Slider、またはその様に動作 |
| spinbox | SpinBox、またはその様に動作 |
| tab | Tab、またはその様に動作 |
| tab-list | タブのリストの様に動作(TabWidgetのタブバーのようなもの） |
| text | テキストとして動作 |
| table | TableView、またはその様に動作 |
| tree | TreeView、またはその様に動作 |
| progress-indicator | ProgressIndicator、またはその様に動作 |
| text-input | LineEdit、またはその様に動作 |
| switch | Switch、またはその様に動作 |
| list-item | ListViewのアイテム、またはその様に動作 |
ColorScheme
ウィジェットスタイルでの配色指定用に利用することを想定した列挙体。
| name | 概要 |
|---|---|
| unknown | 未指定。システムに従う |
| dark | ダーク系スタイル |
| light | ライト系スタイル |
DialogButtonRole
dialog-button-role プロパティ用共用体
| name | 概要 |
|---|---|
| none | ボタンではない |
| accept | OK/Yesを意図するボタンである |
| reject | Cancel/Noを意図するボタンである |
| apply | Applyを意図するボタンである |
| reset | Resetを意図するボタンである |
| help | Helpを意図するボタンである |
| action | その他のアクションを行うボタンである |
EventResult
イベントハンドラが処理した結果を返すために利用される列挙体
| name | 概要 |
|---|---|
| accept | 承認。それ以上は処理されない |
| reject | 拒否。親エレメントに転送して処理を委任 |
FillRule
Pathの図形内部の塗りつぶしについての指定に使われる。
| name | 概要 |
|---|---|
| nonzero | SVG定義のnonzeroに相当 |
| evenodd | SVG定義のevenoddに相当 |
ImageFit
Imageエレメントをどの様にフィットするかの指定に利用される
| name | 概要 |
|---|---|
| fill | エレメントサイズに合わせて拡大・縮小される |
| contain | エレメントサイズに合わせアスペクト比を維持してエレメント内に収まるサイズに拡大・縮小される。 |
| cover | エレメントサイズに合わせアスペクト比を維持してエレメント内を満たすサイズに拡大・縮小される。収まらない部分はカットされる |
| preserve | イメージは論理ピクセル単位で維持し、ウィンドウ内すべてのエレメントに適用される拡大・縮小率に従い拡大縮小される。余分なスペースは空白として維持される |
ImageHorizontalAlignment
Imageエレメントの画像水平アライメント
| name | 概要 |
|---|---|
| center | 中央配置 |
| left | 左側配置 |
| right | 右側配置 |
ImageVerticalAlignment
Imageエレメントの画像水直アライメント
| name | 概要 |
|---|---|
| center | 中央配置 |
| top | 上部配置 |
| bottom | 下部配置 |
ImageRendering
イメージをどのように拡大縮小するかを指定します。
| name | 概要 |
|---|---|
| smooth | 線形補間アルゴリズムを使用して拡大縮小されます |
| pixelated | 最近傍アルゴリズムで拡大縮小されます |
ImageTiling
イメージをタイル化する方法を指定します。
| name | 概要 |
|---|---|
| none | タイル化しない |
| repeat | 繰り返しにより埋め合わせる |
| round | 画像が切れない範囲で繰り返し埋め合わせる |
InputType
InputTextの入力タイプ定義
| name | 概要 |
|---|---|
| text | デフォルト。一般テキスト |
| password | パスワードとして"*"レンダリング |
| number | 数字(0〜9)のみ受け入れる |
| decimal | 少数点数として有効な文字のみ受け入れる |
LayoutAlignment
HorizontalLayout, VerticalLayout, HorizontalBox, VerticalBoxの配置に関するプロパティに利用
| name | 概要 |
|---|---|
| stretch | すべてをminimum配置後、残ったスペースをstreatch係数に従って配分する |
| center | すべてのエレメントに推奨サイズを使用し、最初と最後のエレメントの前後に残りのスペースを均等に配分する |
| start | すべてのエレメントに推奨サイズを使用し、最後のエレメントの後に残りのスペースを配分します。 |
| end | すべてのエレメントに推奨サイズを使用し、最初のエレメントの前に残りのスペースを配分します。 |
| space-between | すべてのエレメントに推奨サイズを使用し、残りをエレメント間に均等に配分します |
| space-around | すべてのエレメントに推奨サイズを使用し、残りを最初と最後のエレメントの前後、エレメント間とに均等に配分します |
MouseCursor
マウスカーソル形状指定に利用されます。
| name | 概要 |
|---|---|
| none | 非表示 |
| default | システムデフォルト |
| help | ヘルプを指すカーソル |
| pointer | リンクを指すカーソル |
| progress | ビジー（ただし操作可能）を指すカーソル |
| wait | ビジー（待ち状態）を指すカーソル |
| crosshair | 十字線カーソル |
| text | 選択可能なテキストを示すカーソル |
| alias | エイリアス・ショートカット作成中を示すカーソル |
| copy | コピー中を示すカーソル |
| move | 移動中を示すカーソル |
| no-drop | ドロップ禁止を示すカーソル |
| not-allowed | アクセス禁止を示すカーソル |
| grab | 掴める事を示すカーソル |
| grabbing | 掴んでいる事を示すカーソル |
| col-resize | 列が水平方向にサイズ変更可能であることを示すカーソル |
| row-resize | 行が垂直方向にサイズ変更可能であることを示すカーソル |
| n-resize | 北方向にサイズ変更可能であることを示すカーソル |
| e-resize | 東方向にサイズ変更可能であることを示すカーソル |
| s-resize | 南方向にサイズ変更可能であることを示すカーソル |
| w-resize | 西方向にサイズ変更可能であることを示すカーソル |
| ne-resize | 北東方向にサイズ変更可能であることを示すカーソル |
| nw-resize | 北西方向にサイズ変更可能であることを示すカーソル |
| se-resize | 南東方向にサイズ変更可能であることを示すカーソル |
| sw-resize | 南西方向にサイズ変更可能であることを示すカーソル |
| nesw-resize | 北東南西方向にサイズ変更可能であることを示すカーソル |
| nwse-resize | 北西南西東向にサイズ変更可能であることを示すカーソル |
Orientation
Sliderなどのウィジェットの方向を指定するために利用
| name | 概要 |
|---|---|
| horizontal | 水平方向 |
| vertical | 垂直方向 |
PathEvent
SVGコマンドなどからコンパイルによる生成される低レベルデータで利用
| name | 概要 |
|---|---|
| begin | パス開始 |
| line | パス上の直線 |
| quadratic | 2次ベジェ曲線 |
| cubic | ３次ベジェ曲線 |
| end-open | パスを開いたまま終了する |
| end-closed | パスを閉じて終了する |
PointerEventButton
ポインタイベントのボタン種別として利用
| name | 概要 |
|---|---|
| left | 左ボタン |
| right | 右ボタン |
| middle | 中ボタン |
| back | 戻るボタン |
| forward | 進むボタン |
| other | その他のボタン |
PointerEventKind
ポインターで発生したイベント種別
| name | 概要 |
|---|---|
| down | ボタンが押された |
| up | ボタンが離された |
| move | ポインタが移動した |
| cancel | アクションがキャンセルされた |
SortOrder
StandardTableViewのsort-orderプロパティ等でソート方法指定に利用される
| name | 概要 |
|---|---|
| unsorted | ソートしない |
| ascending | 昇順 |
| descending | 降順 |
StandardButtonKind
標準ボタンの種別を指定する
| name | 概要 |
|---|---|
| ok | OKボタン |
| cancel | Cancelボタン |
| apply | Applyボタン |
| close | Closeボタン |
| reset | Resetボタン |
| help | ヘルプボタン |
| yes | はい/Yes/受託を意図するボタン |
| no | いいえ/No/拒否を意図するボタン |
| abort | 中止を意図するボタン |
| retry | 再試行を意図するボタン |
| ignore | 無視を意図するボタン |
TextHorizontalAlignment
Textエレメントの水平軸に沿った配置タイプ指定
| name | 概要 |
|---|---|
| left | 左端揃え |
| center | 中央揃え |
| right | 右端揃え |
TextVerticalAlignment
Textエレメントの水直軸に沿った配置タイプ指定
| name | 概要 |
|---|---|
| top | 上部揃え |
| center | 中央揃え |
| bottom | 下部揃え |
TextOverflow
テキストが幅に収まらない場合、テキストがどのように表示されるか
| name | 概要 |
|---|---|
| clip | 切り取り表示 |
| elide | 省略表示 |
TextStrokeStyle
テキストグリフのストローク配置指定（詳細未確認。わかったら追記します）
| name | 概要 |
|---|---|
| outside | 外側 |
| center | 中心 |
TextWrap
テキストの折返し指定
| name | 概要 |
|---|---|
| no-wrap | 折り返さない |
| word-wrap | 可能な限り単語境界での折返し |
| char-wrap | 任意文字での折返し(Qtおよびソフトウェアレンダラーの場合に有効） |
組込構造体
KeyEvent
キーイベントとしてFocusScopeのコールバックに渡される構造体
| フィールド | 型 | 概要 |
|---|---|---|
| text | string | unicode文字列 |
| modifiers | KeyboardModifiers | キー押下イベント時にアクティブなキーボード修飾子 |
| repeat | bool | 繰り返し中か（押されたままか） |
KeyboardModifiers
KeyEvent時に同時に押されるキーボード修飾子状態
| フィールド | 型 | 概要 |
|---|---|---|
| alt | bool | Altキーが押されているか |
| control | bool | Ctrlキー(macOSではコマンドキー）が押されているか |
| shift | bool | Shiftキーが押されているか |
| meta | bool | Windowsキー(macOSではControlキー）が押されているか |
Point
座標を意味する構造体
| フィールド | 型 | 概要 |
|---|---|---|
| x | length | X座標 |
| y | length | Y座標 |
PointerEvent
TouchAreadのpointer-eventコールバックに渡されるイベント構造体
| フィールド | 型 | 概要 |
|---|---|---|
| button | PointerEventButton | 対象となるボタン |
| kind | PointerEventKind | イベントの種類 |
| modifiers | KeyboardModifiers | 同時操作されたキーボード修飾子 |
PointerScrollEvent
スクロールまたはホイールイベント
| フィールド | 型 | 概要 |
|---|---|---|
| delta_x | length | 水平方向ピクセル数 |
| delta_y | length | 水直方向ピクセル数 |
| modifiers | KeyboardModifiers | 同時操作されたキーボード修飾子 |
StandardListViewItem
StandardListViewおよびStandardTableView内のアイテム
| フィールド | 型 | 概要 |
|---|---|---|
| text | string | アイテムコンテンツ |
TableColumn
TableViewの列と列ヘッダー用構造体
| フィールド | 型 | 概要 |
|---|---|---|
| title | string | タイトル |
| min_width | length | 最小列幅 |
| horizontal_stretch | float | 水平方向の列の伸縮 |
| sort_order | SortOrder | ソート順 |
| width | length | 列幅 |
組込グローバルシングルトン
Palette
スタイルに一致するカスタムウィジェットを作成するためのパレット保持用
| フィールド | 型 | 概要 |
|---|---|---|
| background | out brush | 背景ブラシ |
| foreground | out brush | 前景ブラシ |
| alternate-background | out brush | 代替背景ブラシ |
| alternate-foreground | out brush | 代替前景ブラシ |
| control-background | out brush | コントロール用背景ブラシ |
| control-foreground | out brush | コントロール用前景ブラシ |
| accent-background | out brush | 強調表示用背景ブラシ |
| accent-foreground | out brush | 強調表示用背景ブラシ |
| selection-background | out brush | 選択表示用背景ブラシ |
| selection-foreground | out brush | 選択表示用前景ブラシ |
| border | out brush | ボーダー線用ブラシ |
| ColorScheme | in out ColorScheme | カラースキーム決定 |
TextInputInterface
エレメントにフォーカスがあるかどうかの状態保持。仮想キーボードの表示・非表示などでの利用を想定
| フィールド | 型 | 概要 |
|---|---|---|
| text-input-focused | bool | TextInputにフォーカルがあるか否か |
組込名前空間
名前空間は、特殊キーや名前付きの色などの共通定数へのアクセスを提供します。
Colors
color型定数値と、colorを生成するための関数を保持している。
名前によるリストは CSS仕様を参照。
数値をカラーに変換する以下の関数が用意されている。関数はグローバルスコープを持つので名前空間を指定せずに利用可能
rgb(r :int, g: int,b: int) -> color
rgba(r: int,g: int, b: int, a: float) -> color
hsv(h: float, s: float, v: float) -> color
hsv(h: float, s: float, v: float, a: float) -> color
Key
印刷可能な文字を持たないキーのtext値
- Backspace
- Tab
- Return
- Escape
- Backtab
- Delete
- Shift
- Control
- Alt
- AltGr
- CapsLock
- ShiftR
- ControlR
- Meta
- MetaR
- Space
- UpArrow
- DownArrow
- LeftArrow
- RightArrow
- F1
- F2
- F3
- F4
- F5
- F6
- F7
- F8
- F9
- F10
- F11
- F12
- F13
- F14
- F15
- F16
- F17
- F18
- F19
- F20
- F21
- F22
- F23
- F24
- Insert
- Home
- End
- PageUp
- PageDown
- ScrollLock
- Pause
- SysReq
- Stop
- Menu
Math
一般的な数学関数が定義されている。グローバルスコープを持つので名前空間なしでも利用できる。
abs(T) -> T
acos(float) -> angle
asin(float) -> angle
atan(float) -> angle
atan2(float) -> angle
cos(angle) -> float
sin(angle) -> float
tan(angle) -> float
ceil(float) -> int
floot(float) -> int
clamp(value: T, min: T, max: T) -> T
log(float, float) -> float
max(T, T) -> T
min(T, T) -> T
mod(T, T) -> T
round(float) -> int
sqrt(float) -> float
pow(float, float) -> float
clampは、minより小さければminを、maxより大きければmaxを返す。
組込関数
animation-tick()
アニメーションに使用できる単調に増加する時間を返す関数
export component Example inherits Window {
preferred-width: 100px;
preferred-height: 100px;
Rectangle {
y:0;
background: red;
height: 50px;
width: parent.width * mod(animation-tick(), 2s) / 2s;
}
Rectangle {
background: blue;
height: 50px;
y: 50px;
width: parent.width * abs(sin(360deg * animation-tick() / 3s));
}
}
debug(...)
debug()は、デバッグ出力用関数
組込コールバック
Init()
エレメント初期化通知。インスタンス化され、プロパティが初期化されたあと呼び出されます。最終バインディングであることを保証する必要があり、このコールバックハンドラではプロパティの初期化をしてはいけないとされています。
ビジネスロジック側にはon_init関数は用意されません。インスタンス化の時点で呼び出しが完了しており、on_initを設定できるタイミングが無いためです。グローバルシングルトンのコールバックを用意し、initハンドラから呼び出すという方法は可能ですが、生成のタイミングで機能するため静的に作成されたコンポーネントで機能しないことに注意が必要です。
まとめ
今回は、Slint言語入門ということで、言語組込の機能について一通り記載しました。1.9.0からはドキュメントがだいぶ変わる様子で、現在ブラッシュアップが続いているので、1.9.0が出たらそちらのドキュメントを機械翻訳して見るほうがわかりやすいかもしれませんが・・・。
次回は、このままウィジェットについて書くか、それとも何か作業してみたことを書くか、時間と相談して決めたいと思います。
明日は、@task_jp さんが何か書いてくださるそうです。楽しみにお待ちしましょう。