用戶界面由 Slint 語(yǔ)言編寫，并保持在.slint格式的文本文件中。每個(gè).slint文件可定義一個(gè)或多個(gè)組件，通過(guò)調(diào)用這些組件聲明形成一個(gè)組件樹(shù)，這些節(jié)點(diǎn)組件構(gòu)成了界面的框架。您可以重復(fù)使用某些控件，也可以遞歸調(diào)用或繼承的方式生成新的組件。如下展示了一個(gè)簡(jiǎn)單的 GUI 界面組件的代碼：

import { Button } from "std-widgets.slint";

component MyRectangle inherits Rectangle {
    in property  name: "EmbeddedTeckTalk";
    Text {
        text: root.name;
    }
}

export component MyApp inherits Window {
    height: 320px;
    width: 280px;

    VerticalLayout {
        alignment: LayoutAlignment.start;
        width: parent.width;
        Rectangle {
            height: 100px;
            background: green;
            Text {
                text: "Hello Slint";
            }
        }
        MyRectangle{
            // width: 100px;
            height: 100px;
        }

        MyRectangle {
            // width: 100px;
            height: 100px;
            name: "Slint";
        }
    }
    
}

以上代碼中，MyRectangle和MyApp都是自定義的組件，其中MyRectangle繼承了Slint 內(nèi)置的Rectangle組件庫(kù)，意味著MyRectangle直接繼承了Rectangle的所有屬性，同時(shí)，MyRectangle也將Slint的Text包含到內(nèi)部子節(jié)點(diǎn)，因此擁有了一個(gè)Text對(duì)象。MyApp則繼承Window組件，則可以作為該 GUI 節(jié)點(diǎn)的根節(jié)點(diǎn)，因此可以用來(lái)作為 GUI 的顯示入口組件。MyApp內(nèi)部聲明了多個(gè)組件，通過(guò)組件和屬性聲明各子節(jié)點(diǎn)組件的位置、從屬、約束等關(guān)系。各組件通過(guò)屬性綁定固定的值，也可通過(guò)接口或表達(dá)式綁定動(dòng)態(tài)變化的值，Slint會(huì)自動(dòng)計(jì)算表達(dá)式或依賴的變化, 因此組件屬性值的變化能自動(dòng)傳導(dǎo)并更新所有依賴該屬性的節(jié)點(diǎn)。渲染效果如下所示

各子組件也可以使用:=語(yǔ)法來(lái)指定對(duì)象名，如下示例所示:

export component MyApp inherits Window {
    width: 200px;
    height: 200px;
    in property   name: "EmbeddedTechTalk";

    // 這是一行注釋
    rec := Rectangle {
        background: red;
        width: root.width;
        height: self.width;
        border-radius: self.width/2;
        border-color: red;

        /* 注釋 
            這是一個(gè)注釋
        */
        VerticalLayout {
            alignment: LayoutAlignment.space-between;
            txt1 := Text{
                text: root.name;
                width: rec.width;
                horizontal-alignment: center;
                font-size: 15px;
            }
    
            txt2 := Text{
                text: "Hello world";
                width: parent.width;
            }
        }
    }
}

子組件對(duì)象的命名規(guī)范如下：

• 可由字母（a-zA-Z）、數(shù)字、下劃線(_)、破折號(hào)(-)組成
• 不能以數(shù)字開(kāi)頭
• 下劃線(_)、破折號(hào)(-)可互換，因此命名如top_rec和top-rec為同一個(gè)對(duì)象名。

同時(shí) Slint 保留以下三個(gè)作為預(yù)定義的命名，有特殊含義，因此新的對(duì)象不能指定以下三個(gè)作為對(duì)象名。

• root: 該組件的根節(jié)點(diǎn)組件引用
• self: 當(dāng)前組件的引用
• parent: 當(dāng)前組件的父節(jié)點(diǎn)的引用

Slint 文件注釋支持以下兩種，與 C語(yǔ)言注釋完全一樣

• 單行注釋//: 只在當(dāng)前行中標(biāo)記注釋文字
• 多行注釋  /* ... */：將多行注釋包含到注釋塊

以上slint代碼渲染如下: