关于程序员:Flutter-创建自己的对话框不使用任何包

创立本人的对话框，不应用任何包！

原文 https://itnext.io/create-your…

前言

在本文中，咱们将学习如何创立咱们本人的 showDialog() 函数，并理解到底产生了什么。

注释

先看成果

让咱们首先查看 showDialog，看看它外面有什么！

正如您所看到的，showDialog () 所做的就是获取小部件并将其作为 DialogRoute 应用 Navigator 进行推送。没什么特地的！

因而，如果咱们想创立一个对话框，咱们应该应用导航器和路由，太！

但什么是导航器，为什么咱们须要它的对话？

没错，导航器也是个 widget！

毕竟，一切都是一个 widget，甚至是我，甚至是你，甚至是导航器自身ー匿名 Flutter 开发人员

实质上，Navigator 的工作是治理一堆 Route 对象，并在 Overlay widget 中的 widget 之间进行可视化切换。

什么是叠加，为什么它很重要？

基本上，Overlay 是一种非凡的 Stack widget，它将应用程序包装在导航器中。

正如您所猜想的，Dialogs 仅仅是 UI 之上的 widget (就像吐司 widget 一样)，但在这种状况下，导航器明智地应用 Routes 管制它们。这就是为什么他们让咱们感觉像别的货色。

是的，咱们也能够仅仅应用 Overlay widget 创立咱们本人的 widget，然而咱们也想与导航器交互，因为咱们不想从新创造轮子！如果咱们不必领航员的话。咱们必须解决所有的过渡、生命周期、后退按钮、可勾销的阻碍等等。

这就是为什么咱们也应该晓得路线！

记住，showDialog() 也应用 DialogRoute 是有起因的。

然而对话路由有什么特别之处呢？

对话路由继承模式

对话路线的超能力来自于它的先人! 让我来通知你怎么做！

让咱们看看，在每一步，咱们继承了什么！

Route -> A basic route“Route is a base class that interacts with the navigator.”OverlayRoute -> A route that knows how to interact with Overlay“A route that displays widgets in the Navigator’s Overlay.”TransitionRoute -> A route that can do a magic trick“A route with entrance and exit transitions.”ModalRoute -> A route that has a barrier behind it“A route that blocks interaction with previous routes.”PopupRoute -> A route that shows up over the current route“A modal route that overlays a widget over the current route.”RawDialogRoute -> A pre-configured route for dialogs“A general dialog route which allows for customization of the dialog popup.”DialogRoute -> A ready-to-use, pre-designed route“A dialog route with Material entrance and exit animations, modal barrier color, and modal barrier behavior”

(这些句子都参考了官网的 api 文档。)

这里的教训是: 当咱们调用 showDialog()，它调用导航器.push()，当导航器推动某些货色，如果它是 PopupRoute，它失去生命周期 (来自导航器)，家庭 (来自 OverlayRoute)，过渡 (来自过渡路线)，阻碍 (来自 ModalRoute)，并呈现在路线上 (来自本身)。

无论如何，如果咱们失去了次要的想法，让咱们看看代码，并学习如何创立咱们本人的对话框！

对话框例子

1. 设计一个对话框

创立本人的对话框小部件

// Just a simple custom dialog, nothing special
class CustomDialog extends StatelessWidget {
  const CustomDialog({
    super.key,
    required this.title,
    required this.description,
    required this.confirmText,
    this.onTap,
  });

  final String title;
  final String description;
  final String confirmText;
  final void Function()? onTap;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(padding: const EdgeInsets.all(32),
        child: Material(
          elevation: 4,
          borderRadius: const BorderRadius.all(Radius.circular(16)),
          child: Padding(padding: const EdgeInsets.all(24),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 12),
                Text(
                  description,
                  style: const TextStyle(color: Colors.grey),
                ),
                const SizedBox(height: 32),
                SizedBox(
                  width: double.infinity,
                  child: CupertinoButton.filled(
                    onPressed: onTap,
                    child: Text(confirmText),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

2. 创立本人的对话框

在这个例子中，我将应用 PopupRoute 来制作我本人的配置。如果须要事后配置的 Dialogs，能够应用 RawDialogRoute 或 DialogRoute，就像 showDialog () 所做的那样。

// Custom Dialog implementation
class CustomDialogRoute<T> extends PopupRoute<T> {
  CustomDialogRoute({
    required this.builder,
    super.settings,
  });
  // We're getting a widget with context
  final Widget Function(BuildContext context) builder;

  @override
  Widget buildPage(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) {
    // return just a static widget
    return builder(context);
  }

  @override
  Widget buildTransitions(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    // random animations go 🔪 🔪 🔪
    return RotationTransition(turns: Tween<double>(begin: 0.25, end: 0).animate(animation),
      child: ScaleTransition(
        scale: animation,
        child: child,
      ),
    );
  }

  @override
  Color? get barrierColor => Colors.black.withOpacity(.65);

  @override
  bool get barrierDismissible => true;

  @override
  String? get barrierLabel => 'CustomDialog';

  @override
  Duration get transitionDuration => const Duration(milliseconds: 250);
}

3. 为可重用代码创立 showCustomDialog 办法

为了让事件变得更简略，我把它变成了一种延长。

extension DialogExtension on BuildContext {
  Future<T?> showCustomDialog<T extends Object?>(
    Widget child, {RouteSettings? settings,}) {return Navigator.of(this).push<T>(
      CustomDialogRoute<T>(builder: (_) => child,
        settings: settings,
      ),
    );
  }
}

4. 想在哪里用就在哪里用！

class HomePage extends StatelessWidget {const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(onPressed: () {
            context.showCustomDialog(
              CustomDialog(
                title: 'Hello Fellow!',
                description: "Don't you think Flutter is awesome?",
                confirmText: 'Absolutely!',
                onTap: () {debugPrint('agreed');
                  Navigator.pop(context);
                },
              ),
            );
          },
          child: const Text('Show Dialog'),
        ),
      ),
    );
  }
}

代码

https://github.com/rei-codes/…

结束语

如果本文对你有帮忙，请转发让更多的敌人浏览。

兴许这个操作只有你 3 秒钟，对我来说是一个激励，感激。

祝你有一个美妙的一天~

© 猫哥

• 微信 ducafecat
• https://wiki.ducafecat.tech
• https://video.ducafecat.tech

本文由 mdnice 多平台公布