Flutter 重构：基于 PopupRoute 的极简弹窗

Posted 2023-04-27

参考技术A 这可能是颗粒度最好的 PopupRoute 弹窗封装。

Flutter 需要自定义各式各样的弹窗视图，总是有些场景系统提供的无法满足需求，随使用弹出路由 PopupRoute 进行封装；核心是继承 PopupRoute 进行容器化封装，将 视图 child 抽出，用户可以传入任意 Widget， 通过 Alignment 调整 child 视图显示位置；

NNPopupRoute.dart

NNAlertDialog.dart

在 Flutter 和 Dart 中重构小部件的最优雅/高效的方式

【中文标题】在 Flutter 和 Dart 中重构小部件的最优雅/高效的方式

【英文标题】：Most elegant/efficient way to refactor widgets in Flutter and Dart

【发布时间】：2020-04-17 22:28:56

【问题描述】：

在网上搜索“如何重构 Flutter 小部件”，我发现存在两种可能的方式，根据我的测试，它们都可以正常工作，但从结构的角度来看仍然非常不同。第二种方法，确实包含了额外的构建指令，应该会给应用性能带来更大的负担吧？

这是我要重构的代码：

Container(
    child: Column(
        children: <Widget> [
            [long code to create a button with many properties],
            [long code to create a button with many properties],
            [long code to create a button with many properties],
            [long code to create a button with many properties],
        ],),);

这些是我发现的主要方式：

1):

Widget MyButton(Color color, String text) 
    return [long code to create a button with many properties];

2)：

class MyButton extends StatelessWidget 
    MyButton(this.color, this.text);

    final Color color;
    final String text;

    @override
    Widget build(BuildContext context) 
        return [long code to create a button with many properties];
    

哪种方法最好？

【参考方案1】：

请查看并考虑这个其他问题：

What is the difference between functions and classes to create reusable widgets?

简答：第二种方法更好（既高效又优雅）。

---

在第一种方法（提取到函数）中，您只是创建了一个返回封装小部件的函数。

在第二种方法（提取到类）中，您将小部件提取到从StatelessWidget 扩展的新类。这种差异为 Flutter 框架提供了一种优化方式。