Flutter Vant UI

Appearance

On this page

Dialog 对话框 ​

代码演示 ​

基本用法 ​

dart
DialogStatic.show(
  context,
  title: "标题",
  message: "如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。",
);

无标题 ​

dart
DialogStatic.show(
  context,
  title: "无标题",
  message: "生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。",
);

确定取消按钮 ​

dart
DialogStatic.show(
  context,
  title: "标题",
  message: "如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。",
  action: DialogConfirm(
    onOK: () => ToastStatic.show(context, message: "确定了"),
    onCancel: () => ToastStatic.show(context, message: "取消了"),
    okText: "确定",
    cancelText: "取消",
  ),
);

自定义渲染 ​

dart
DialogStatic.show(
  context,
  title: "标题",
  message: TailBox().p(20).as((s) {
    return s.Container(
      child: Image.network(
          "https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"),
    );
  }),
);

长内容渲染 ​

dart
DialogStatic.show(
  context,
  title: "标题",
  expands: true,
  message: ListView.builder(
    itemCount: 999,
    itemBuilder: (_, i) => Text("Item $i"),
  ),
  action: DialogConfirm(onOK: () {}, onCancel: () {}),
);

API ​

Props类型描述
showbool是否展示面板
titleWidget | String | null标题
messageWidget | String内容
actionDialogConfirm确认栏，提供确认、取消、或二者
constraintsBoxConstraints | BoxConstraints Function(BoxConstraints layout)面板尺寸约束
closeOnClickOverlaybool点击遮罩层关闭面板
expandsbool是否拉长内容，用于嵌入 ListView 内容
onAfterClosebool完全关闭后触发