From 71ceab305f25428c67c52e6a11649ef47172ff31 Mon Sep 17 00:00:00 2001 From: cvraindays Date: Mon, 4 Mar 2024 20:45:06 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B0=8F=E7=BB=93=EF=BC=9A?= =?UTF-8?q?=E4=BD=A0=E5=A5=BD=E4=B8=96=E7=95=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Img/0-5-1.png | Bin 0 -> 7519 bytes Img/0-6-1.png | Bin 0 -> 6410 bytes README.md | 2 +- 起步/5 - 你好世界.md | 96 +++++++++++++++++++++++++++++++++++++ 4 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 Img/0-5-1.png create mode 100644 Img/0-6-1.png create mode 100644 起步/5 - 你好世界.md diff --git a/Img/0-5-1.png b/Img/0-5-1.png new file mode 100644 index 0000000000000000000000000000000000000000..4829fb1e75c18433066c37fd116ae4051875d361 GIT binary patch literal 7519 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 literal 0 HcmV?d00001 diff --git a/Img/0-6-1.png b/Img/0-6-1.png new file mode 100644 index 0000000000000000000000000000000000000000..ee5a717b56fc127353684182009ee1b44d97d919 GIT binary patch literal 6410 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 literal 0 HcmV?d00001 diff --git a/README.md b/README.md index f034468..a3be040 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ | 起步 | 什么是Slint | 完成 | | 起步 | 搭建C++开发环境 | 完成 | | 起步 | 搭建Rust开发环境 | 完成 | -| | | | +| 起步 | 你好世界 | 完成 | ## 参考连接 diff --git a/起步/5 - 你好世界.md b/起步/5 - 你好世界.md new file mode 100644 index 0000000..6c2c174 --- /dev/null +++ b/起步/5 - 你好世界.md @@ -0,0 +1,96 @@ +了解完项目如何创建之后,我们来创建一个简单的程序来介绍Slint语言的基本模块。 + +**application.slint** +```Sint +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%; + } +} +``` + +![](Img/0-5-1.png) +窗口运行效果(虽然配色有点丑,但是问题不大) + + +![](Img/0-6-1.png) +当点击按钮后,“Hello, World!" 就会变成"Clicked!" + +首先我们先看代码的这个部分: +```Slint +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语言,现在只需要知道它描述了一系列有层次的用户界面。 + +```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组件添加一个点击事件处理程序,当用户点击按钮时,触发文本标签的文本更改。 +9. +想要让按钮点击后针对某一个组件做出一些处理,那么就需要为需要处理的组件添加一个名字,使用 `变量名 := 组件名`的方式便可以做到这一点。在按钮中设置了点击事件,在里面可以放一些类似`javaScript`语言的脚本代码。在这个代码块中,我们取得了变量`text`的`text`属性,将它赋值为"Clicked!" \ No newline at end of file