---
url: https://nsh.dev/versions/v0.3.0/zh-CN/elements
description: "构成每个 NSH 应用的原语和基础组件，附 Rust 与 TSX 示例，以及它们共有的属性、事件和 ref 方法。"
---
# 元素
Native Shell 用一小组元素构建每个界面：`View`、`Text`、`Image` 等原语，以及 `Button`、`Dialog`、`NavStack` 等基础组件。每个原语都对应一个原生视图（iOS 和 Mac Catalyst 上是 UIView 子类，Android 上是 `View`，桌面上是 AppKit、GTK 或 Win32 视图），由 NSH 运行时创建并布局。应用显示的一切都由它们组成：应用的按钮、卡片、列表行和页面都是它自己的组件，用这些元素绘制、由应用设置样式，因此应用的外观完全由应用决定。
这些页面上的每个示例都同时给出 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!("已点击 {} 次", 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("点我").text_color(white())),
)
}
```
```tsx
import { mount, signal, Text, View } from "nsh";
function App() {
const count = signal(0);
return (
已点击 {count()} 次
count.update((n) => n + 1)} class="rounded-lg bg-blue-600 px-4 py-2 active:opacity-60">
点我
);
}
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` 的普通函数，只运行一次；它在闭包里读取的 signal（`text(move || ..)`、`.bg(move || ..)`）会更新所绑定的内容。参见[用 Rust 构建](https://nsh.dev/versions/v0.3.0/zh-CN/docs/rust.md)。
在 TSX 中，每个标签都使用 PascalCase，并指向作用域中的绑定：原语从 `nsh` 导入，基础组件从 `nsh/base` 导入。只有 `` 和 `` 是无需导入的全局组件。`` 这样的小写标签会导致构建错误，因为 TypeScript 只能对照每个名称一个的全局类型来检查它，`List`、`Each` 这类泛型组件就无法推断条目类型。编译器通过导入识别这些元素并就地创建原生视图，所以导入它们在运行时没有任何开销。参见 [JSX 与组件](https://nsh.dev/versions/v0.3.0/zh-CN/docs/jsx-and-components.md)。
```tsx
import { Canvas, Image, List, Overlay, Scroll, 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/versions/v0.3.0/zh-CN/elements/view.md)、[文字选择](https://nsh.dev/versions/v0.3.0/zh-CN/elements/text-selection.md) |
| `` | `text(content)` | CoreText 视图 / StaticLayout 视图 | [Text](https://nsh.dev/versions/v0.3.0/zh-CN/elements/text.md) |
| `` | `image(src)` | 带图片图层的视图 / 图片视图 | [Image](https://nsh.dev/versions/v0.3.0/zh-CN/elements/image.md) |
| `` | `scroll()` | UIScrollView / ScrollView | [Scroll](https://nsh.dev/versions/v0.3.0/zh-CN/elements/scroll.md) |
| `` | `virtual_list(count, \|at\| row)` | 复用单元格的 UIScrollView / ScrollView | [List](https://nsh.dev/versions/v0.3.0/zh-CN/elements/list.md) |
| `