Writing gui programs with Rust with Dioxus! Kyle Installation ██ 首先請先安裝 Rust(https://rustup.rs/) 和 rust-analyzer
• 記得要同意安裝 Visual Studio Prerequisites
• 安裝完後要 重啟終端機 才可運行 cargo
• 在 VSCode 的擴充元件搜尋 rust-analyzer 即可安裝
██ 安裝 dioxus cli • cargo install cargo-binstall
• `` • cargo binstall dioxus-cli 創建 App ===
██ dx new your_project • 選擇 barebones • 不選擇 fullstack • 不選擇 Router • 選擇 Tailwind css • 選擇 Desktop 2 / 8 HTML 與 CSS ██ HTML ██ CSS
• 網頁的骨架 • 網頁的外觀
• 表示內容 • 表示使用者所互動的
██ 結論 • 將內容放進 HTML • 再利用 CSS 將 HTML 變好看，變好用 3 / 8 Template • 利用 dx serve 編譯
use dioxus::prelude::*;
fn main() {
dioxus::launch(App);
}
#[component]
fn App() -> Element {
rsx! {
document::script { src: "
https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4" }
Hero {}
}
}
#[component]
pub fn Hero() -> Element {
rsx! {
div {
class: "text-3xl",
"my text!"
}
} 4 / 8
}
HTML Cheatsheet • div 一個「元素」區塊，可以 nesting
• button 類似 div，但可利用 onclick: move |_| { // code }
• image 利用 href: {path} 嵌入照片
• 利用 class: "stuff" 撰寫 CSS
5 / 8 Dioxus Cheatsheet(properties) #[component]
pub fn PrintName(name: String) -> Element {
rsx! {
div {
class: "text-3xl",
"Hello my name is {name}!"
}
}
}
#[component]
fn App() -> Element {
rsx! {
document::Script { src: "
https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4" }
PrintName { name: "Kyle" }
PrintName { name: "Rust" }
PrintName { name: "Tatom" }
}
}
6 / 8 Dioxus Cheatsheet(data) • use_signal(|| String::new)，需先有一個預設值
• 可利用 use_effect(|| { // your code here })，closure 裡面的
#[component]
pub fn PrintName(name: String) -> Element {
let count = use_signal(|| 0);
rsx! {
button {
class: "text-3xl",
onclick: move |_| {
*count.write() += 1;
},
"Hello my name is {name}!"
}
div {
class: "text-2xl",
"I have been clicked {count}"
}
}
}
7 / 8 Styling Cheatsheet ██ margin vs padding? • 皆會擴張元素「佔地面積」 • margin 不會擴張背景顏色、padding 則會 • m-1 m-2 m-3 mt-3 mb-3 ml-3 mr-3
• p-1 p-2 p-3 pt-3 pb-3 pl-3 pr-3
██ Text 大小及顏色 • text-xl text-2xl text-3xl text-4xl text-5xl ...
• text-white text-red-100 text-green-300 text-slate-500
██ Layout • flex 是個智慧 Container
• 利用 gap-1 gap-2 控制間隔
8 / 8