---
url: https://nsh.dev/zh-HK/elements
description: "每個 NSH 應用程式都由這些基本元素和基礎元件組成，支援 Rust 和 TSX，並包含它們共用的屬性、事件和 ref 方法。"
---
# 元素
Native Shell 以一小組元素構建每個畫面:`View`、`Text` 和 `Image` 等基本元素,以及 `Button`、`Dialog` 和 `NavStack` 等基礎元件。每個基本元素都是原生視圖(在 iOS 和 Mac Catalyst 上是 UIView 子類別,在 Android 上是 `View`,在桌面平台上是 AppKit、GTK 或 Win32 視圖),由 NSH runtime 建立並排版。應用程式顯示的一切都由它們組成:應用程式的按鈕、卡片、列和畫面都是它自己的元件,以這些元素繪製並由應用程式設定樣式,所以應用程式的外觀完全由自己決定。
這些頁面上的每個範例都提供 Rust 和 TSX 兩個版本:選擇一個分頁,頁面上所有範例都會跟着切換。
```rust
use nsh_core::prelude::*;
fn app() -> impl IntoElement {
let count = signal(0_u32);
view()
.flex_1()
.items_center()
.justify_center()
.gap_3()
.child(text(move || format!("Tapped {} times", count.get())).text_2xl())
.child(
view()
.rounded_lg()
.bg(rgb(0x2563eb))
.px_4()
.py_2()
.active(|s| s.opacity(0.6))
.on_press(move || count.update(|n| *n += 1))
.child(text("Tap").text_color(white())),
)
}
```
```tsx
import { mount, signal, Text, View } from "nsh";
function App() {
const count = signal(0);
return (
Tapped {count()} times
count.update((n) => n + 1)} class="rounded-lg bg-blue-600 px-4 py-2 active:opacity-60">
Tap
);
}
mount(App);
```
在 Rust 中,基本元素是 `nsh_core::prelude` 的函式(`view()`、`text(..)`、`image(..)`),基礎元件來自 `nsh_base` crate。樣式是有型別的方法(`.flex_1()`、`.gap_3()`、`.px(px(20.0))`、`.bg(..)`),狀態樣式接受一個閉包(`.active(|s| s.opacity(0.6))`),監聽器是接收其事件的閉包(`.on_press(move || ..)`、`.on_change(move |text: &str| ..)`),而 `.child(..)` 用來加入子元素。一段 UI 就是一個回傳 `impl IntoElement` 的普通函式;它只會執行一次,而在閉包(`text(move || ..)`、`.bg(move || ..)`)中讀取的 signal 會更新它們所綁定的內容。參閱[以 Rust 構建](https://nsh.dev/translations/zh-HK/docs/rust.md)。
在 TSX 中,每個標籤都使用 PascalCase,並指向作用域內的一個綁定:基本元素來自 `nsh`,基礎元件來自 `nsh/base`。只有 `` 和 `` 是全域的,無需匯入。小寫標籤(例如 ``)會造成建置錯誤,因為 TypeScript 會按每個名稱一個全域型別來檢查它,而 `List` 和 `Each` 等泛型元件將無法推斷其項目型別。編譯器透過匯入來識別這些元素,並就地建立原生視圖,因此匯入它們不會增加任何執行時成本。參閱 [JSX 與元件](https://nsh.dev/translations/zh-HK/docs/jsx-and-components.md)。
```tsx
import { Canvas, Image, List, Overlay, Scroll, Shader, Text, Video, View, WebView } from "nsh";
import { Button, Dialog, Menu, NavPage, NavStack, Popover, Sheet, Tooltip, Input } from "nsh/base";
```
## 基本元素
TSX 中從 `nsh` 匯入,Rust 中從 `nsh_core::prelude` 匯入。
| 元素 | Rust | 原生視圖(iOS / Android) | 頁面 |
|---|---|---|---|
| `` | `view()` | UIView / ViewGroup;配合 `selectable` 時,其中的文字會一併選取 | [View](https://nsh.dev/translations/zh-HK/elements/view.md)、[文字選取](https://nsh.dev/translations/zh-HK/elements/text-selection.md) |
| `` | `text(content)` | CoreText 視圖 / StaticLayout 視圖 | [Text](https://nsh.dev/translations/zh-HK/elements/text.md) |
| `` | `image(src)` | 帶有圖像圖層的視圖 / 圖像視圖 | [Image](https://nsh.dev/translations/zh-HK/elements/image.md) |
| `` | `scroll()` | UIScrollView / ScrollView | [Scroll](https://nsh.dev/translations/zh-HK/elements/scroll.md) |
| `` | `virtual_list(count, \|at\| row)` | UIScrollView / 回收儲存格的 ScrollView | [List](https://nsh.dev/translations/zh-HK/elements/list.md) |
| `