Experiments with slint

src/main.rs

@@ -8,13 +8,13 @@ slint::include_modules!();
 fn main() -> Result<(), Box<dyn Error>> {
     let ui = AppWindow::new()?;
 
-    ui.on_request_increase_value({
-        let ui_handle = ui.as_weak();
-        move || {
-            let ui = ui_handle.unwrap();
-            ui.set_counter(ui.get_counter() + 1);
-        }
-    });
+    // ui.on_request_increase_value({
+    //     let ui_handle = ui.as_weak();
+    //     move || {
+    //         let ui = ui_handle.unwrap();
+    //         ui.set_counter(ui.get_counter() + 1);
+    //     }
+    // });
 
     ui.run()?;
 

ui/app-window.slint

@@ -1,18 +1,32 @@
-import { Button, VerticalBox } from "std-widgets.slint";
+import { Button, VerticalBox, TextEdit } from "std-widgets.slint";
+import { ChatView } from "chat-view.slint";
 
 export component AppWindow inherits Window {
-    in-out property <int> counter: 42;
-    callback request-increase-value();
-    VerticalBox {
-        Text {
-            text: "Counter: \{root.counter}";
+
+    VerticalLayout {
+
+        ChatView {
+            messages: [
+                { text: "hello", sender: "Bob", time: "10:00" },
+                { text: "hey!", sender: "Joe", time: "10:01" },
+                { text: "i like cats c:", sender: "Bob", time: "10:03" },
+                { text: "me too c:", sender: "Joe", time: "10:08" },
+                {
+                    text: "meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow ",
+                    sender: "Joe",
+                    time: "10:08"
+                },
+                {
+                    text: "meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow ",
+                    sender: "Bob",
+                    time: "10:12"
+                },
+            ];
         }
 
-        Button {
-            text: "Increase value";
-            clicked => {
-                root.request-increase-value();
-            }
+        TextEdit {
+            height: 64px;
+            font-size: 16px;
         }
     }
 }

ui/chat-view.slint

@@ -0,0 +1,16 @@
+import { Button, VerticalBox, ScrollView } from "std-widgets.slint";
+import { Message } from "message.slint";
+
+export component ChatView inherits ScrollView {
+    in property <[{text: string, sender: string, time: string}]> messages;
+
+    VerticalLayout {
+        spacing: 5px;
+
+        for message in root.messages: Message {
+            text: message.text;
+            sender: message.sender;
+            time: message.time;
+        }
+    }
+}

ui/message.slint

@@ -0,0 +1,24 @@
+export component Message inherits Rectangle {
+    in property <string> sender;
+    in property <string> time;
+    in property <string> text;
+
+    VerticalLayout {
+        padding-top: 12px;
+
+        Text {
+            text: sender + " " + time;
+
+            x: 12px;
+            font-size: 12px;
+        }
+
+        Text {
+            text: text;
+
+            x: 24px;
+            font-size: 16px;
+            wrap: word-wrap;
+        }
+    }
+}