AlertDialog 填充颤动 - Dart

在 Flutter 中，AlertDialog 是一种常见的弹出式对话框。通过使用 AlertDialog，您可以显示一些重要的提示信息或提示用户采取某种操作。

有时，您需要使 AlertDialog 更加动态，并显示一些填充颤动。在 Flutter 中，您可以使用动画和 Tween 来实现这一点。本文将向您展示如何在 AlertDialog 中实现填充颤动。

1. 导入必要的包

import 'dart:async';

import 'package:flutter/material.dart';

2. 实现类

class VibratingAlertDialog extends StatefulWidget {
  final String title;
  final String message;
  final String positiveText;
  final String negativeText;
  final VoidCallback onPositivePressed;
  final VoidCallback onNegativePressed;

  VibratingAlertDialog(
      {required this.title,
      required this.message,
      required this.positiveText,
      required this.negativeText,
      required this.onPositivePressed,
      required this.onNegativePressed});

  @override
  _VibratingAlertDialogState createState() => _VibratingAlertDialogState();
}

class _VibratingAlertDialogState extends State<VibratingAlertDialog>
    with TickerProviderStateMixin {
  late Animation _animation;
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    _animation =
        Tween(begin: 0.0, end: 10.0).animate(CurvedAnimation(parent: _controller, curve: Curves.elasticInOut))
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              _controller.reverse();
            } else if (status == AnimationStatus.dismissed) {
              _controller.forward();
            }
          });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(widget.title),
      content: AnimatedBuilder(
        animation: _animation,
        builder: (BuildContext context, Widget? child) {
          return Transform.translate(
            offset: Offset(_animation.value, 0.0),
            child: widget.message == null ? null : Text(widget.message),
          );
        },
      ),
      actions: [
        TextButton(
            onPressed: () {
              widget.onNegativePressed();
              Navigator.of(context).pop();
            },
            child: Text(widget.negativeText)),
        TextButton(
            onPressed: () {
              widget.onPositivePressed();
              Navigator.of(context).pop();
            },
            child: Text(widget.positiveText)),
      ],
    );
  }
}

3. 如何使用

使用您的 StatefulWidget，例如：

showDialog<void>(
  context: context,
  builder: (BuildContext context) {
    return VibratingAlertDialog(
      title: 'AlertDialog',
      message: '您确认要执行该操作吗？',
      positiveText: '确认',
      negativeText: '取消',
      onPositivePressed: () {
        // 在此处编写确认操作
      },
      onNegativePressed: () {
        // 在此处编写取消操作
      },
    );
  },
);

结论

现在，您已经学会如何在 Flutter 中创建 AlertDialog 并添加填充颤动。通过使用动画和 Tween，您可以使您的 AlertDialog 更具动态性，并引起用户的注意。所以，尝试一下吧！