TrionesDev Antd Flutter

Appearance

Alert 警告提示 ​

Alert组件用于展示需要引起用户关注的信息。

何时使用 ​

  • 当需要向用户展示提示信息时
  • 当需要展示成功、警告、错误等状态信息时
  • 当需要用户对某些操作进行确认时

代码演示 ​

import 'package:antd_flutter_example/demo_block.dart';
import 'package:flutter/widgets.dart';
import 'package:trionesdev_antd_mobile/trionesdev_antd_mobile.dart';

class AlertPage extends StatefulWidget {
  const AlertPage({super.key});

  @override
  State<StatefulWidget> createState() => _AlertPageState();
}

class _AlertPageState extends State<AlertPage> {
  @override
  Widget build(BuildContext context) {
    return AntScaffold(
      appBar: AntAppBar(
        title: const Text('Alert'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            DemoBlock(
              title: "基本使用",
              child: AntAlert(
                type: AntAlertType.success,
                message: Text("Success Text"),
              ),
            ),
            DemoBlock(
              title: "四种样式",
              child: Column(spacing: 10,children: [
                AntAlert(
                  type: AntAlertType.success,
                  message: Text("Success Text"),
                ),
                AntAlert(
                  type: AntAlertType.info,
                  message: Text("Info Text"),
                ),
                AntAlert(
                  type: AntAlertType.warning,
                  message: Text("Warning Text"),
                ),
                AntAlert(
                  type: AntAlertType.error,
                  message: Text("Error Text"),
                ),
              ],),
            ),
            DemoBlock(
              title: "可关闭的警告提示",
              child: AntAlert(
                type: AntAlertType.warning,
                closable: true,
                message: Text(softWrap: true,"Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"),
              ),
            ),
            DemoBlock(
              title: "图标",
              child: Column(
                spacing: 10,
                children: [
                  AntAlert(
                    type: AntAlertType.warning,
                    closable: true,
                    showIcon: true,
                    message: Text(softWrap: true,"Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"),
                  ),
                  AntAlert(
                    type: AntAlertType.warning,
                    closable: true,
                    showIcon: true,
                    message: Text(softWrap: true,"Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"),
                    description: Text( "Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

API ​

参数说明类型默认值
closable是否可以关闭bool?null
message消息,与messageText二选一，优选使用messageText?null
messageText消息文本,与message二选一，优选使用messageString?null
description描述,与descriptionText二选一，优选使用descriptionText?null
descriptionText描述文本,与description二选一，优选使用descriptionString?null
icon图标Widget?null
showIcon显示图标bool?null
type类型(info,success,warning,error)AntAlertType?AntAlertType.info
onClose关闭回调Function?null
style样式StateStyle?null
decoration装饰BoxDecoration?null