---
url: https://nsh.dev/zh-CN/elements/alert-dialog
description: "AlertDialog：平台自己的警告框或操作表，在原生侧显示，并以用户选择的操作作为结果。"
demo: https://nsh.dev/play/index.html#el-alert-dialog
---
# AlertDialog
`AlertDialog` 显示平台自己的警告框或操作表：在 iOS 和 Mac Catalyst 上是 `UIAlertController`，在 Android 上是 `AlertDialog`（操作表为列表对话框），在其他平台上是平台对话框风格的警告框。`AlertDialog.show`（Rust 中为 `alert_dialog()` 的 `.show()`）返回一个 promise（在 Rust 中是 future），以用户选择的操作作为结果。所有文字都来自应用，所以警告框说的是你的应用要说的话，用的是它的语言。
```rust
use nsh_base::{alert_dialog, button};
use nsh_core::ui::prelude::*;
fn app() -> impl IntoElement {
let answer = signal(SharedString::from("–"));
let confirm = move || {
spawn(async move {
let choice = alert_dialog()
.title("Delete the photo?")
.description("This cannot be undone.")
.cancel("Cancel")
.destructive("Delete")
.show()
.await;
let deleted = matches!(choice, Ok(Some(label)) if label == "Delete");
answer.set(if deleted { "deleted" } else { "kept" }.into());
});
};
view()
.flex_1()
.p_4()
.pt(px(48.0))
.gap_3()
.child(
button()
.on_press(confirm)
.rounded_lg()
.bg(rgb(0xdc2626))
.px_4()
.py_3()
.child(text("Delete…").text_color(white()).font_weight(FontWeight::SEMIBOLD)),
)
.child(text(answer))
}
```
```tsx
import { mount, signal, Text, View } from "nsh";
import { AlertDialog, Button } from "nsh/base";
function App() {
const answer = signal("–");
const confirm = async () => {
const choice = await AlertDialog.show({
title: "Delete the photo?",
description: "This cannot be undone.",
actions: [
{ label: "Cancel", role: "cancel" },
{ label: "Delete", role: "destructive", id: "delete" },
],
});
answer.set(choice === "delete" ? "deleted" : "kept");
};
return (
{answer()}
);
}
mount(App);
```
需要自己设计外观的对话框（卡片、sheet、全屏流程），使用 [Dialog](https://nsh.dev/zh-CN/elements/dialog.md)。
## AlertDialog.show
```ts
AlertDialog.show(options: AlertDialogOptions): Promise
```
```rust
alert_dialog().title(..).description(..).action(..).cancel(..).destructive(..).show()
-> impl Future