slint-tutorial-cn/起步/5 - 你好世界.md

了解完项目如何创建之后，我们来创建一个简单的程序来介绍Slint语言的基本模块。

application.slint

import { Button } from "std-widgets.slint";
component BaseView {
    Rectangle {
        background: #FF6699;

        VerticalLayout {
            text := Text {
                text: "Hello, World!";
                font-size: 24pt;
                color: #FFFFFF;
            }
    
            Button {
                text: "Click me!";
                clicked => {
                    text.text = "Clicked!";
                }
            }
        }

    }
}

export component MainWindow inherits Window {
    preferred-height: 800px;
    preferred-width: 600px;
    
    BaseView {
        height: 100%;
        width: 100%;
    }
}

窗口运行效果（虽然配色有点丑，但是问题不大）

当点击按钮后，“Hello, World!" 就会变成"Clicked!"

首先我们先看代码的这个部分：

export component MainWindow inherits Window {
    preferred-height: 800px;
    preferred-width: 600px;
    
    BaseView {
        height: 100%;
        width: 100%;
    }
}

我们要创建一个程序，就一定需要定义一个用来呈现内容的窗口，在这里我们定义了一个名叫MainWindow的组件，为了定义一个组建需要在前方添加component关键字， 使用inherits关键字表明我们继承某个组件。在这里我们继承Slint内置的Window以用来创建窗口。

我们并不一定需要将窗口命名为MainWindow，这可以自己命名。实际上控制程序展现哪个窗口的是后端代码，使用export关键字将会导出此组件表现在代码上就是slint文件被编译成.hpp或者.rust文件后，再调用run()的方式启动。我们会在之后的章节更深入的讨论Slint语言，现在只需要知道它描述了一系列有层次的用户界面。

component BaseView {
    Rectangle {
        background: #FF6699;

        VerticalLayout {
            text := Text {
                text: "Hello, World!";
                font-size: 24pt;
                color: #FFFFFF;
            }
    
            Button {
                text: "Click me!";
                clicked => {
                    text.text = "Clicked!";
                }
            }
        }

    }
}

在这个部分，我们自定义了一个组件，也没有继承某个Slint组件。这段slint代码定义了一个名为BaseView的组件，该组件包含一个矩形背景和一个垂直布局。布局中包含一个文本标签和一个按钮。当用户点击按钮时，文本标签的文本将更改为“Clicked!”。在这里代码做了这几件事：

1. 导入Button组件，来自std-widgets.slint库。
2. 定义BaseView组件。
3. 在BaseView组件中，创建一个矩形背景的Rectangle组件。
4. 在矩形背景上，创建一个垂直布局的VerticalLayout组件。
5. 在垂直布局中，创建一个文本标签的Text组件，显示文本“Hello, World!”。
6. 为Text组件设置字体大小为24pt，颜色为白色。
7. 创建一个按钮的Button组件，显示文本“Click me!”。
8. 为Button组件添加一个点击事件处理程序，当用户点击按钮时，触发文本标签的文本更改。

想要让按钮点击后针对某一个组件做出一些处理，那么就需要为需要处理的组件添加一个名字，使用 变量名 := 组件名的方式便可以做到这一点。在按钮中设置了点击事件，在里面可以放一些类似javaScript语言的脚本代码。在这个代码块中，我们取得了变量text的text属性，将它赋值为"Clicked!"