扩展一个小部件真的是一种反模式吗？答案

【问题标题】：Is extending a widget really an antipattern?扩展一个小部件真的是一种反模式吗？
【发布时间】：2020-08-20 10:54:23
【问题描述】：

我在couple places 中读到，扩展 Flutter 小部件是一种反模式。这是真的吗？

我使用小部件子类化来减少嵌套，方法是对要删除的小部件进行子类化并将其小部件放入其构造函数中，就像这样

class Foo extends FormBuilder {
    Foo() : super (
        // bunch of widgets here
    );
}

扩展无状态小部件似乎更受欢迎，但它向树中添加了几行代码和一个小部件，这不是我的偏好：

class Foo extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return FormBuilder(
       // bunch of widgets here
    );
}

我读过从函数返回小部件是一种反模式，因为它breaks rendering optimization。我的第一种方法是否同样有隐藏的副作用？即，它真的是一种反模式吗？

【问题讨论】：

我认为这与这样一个事实有关，如果要渲染某些东西，最好嵌套多个 build() 方法，而不是调用另一个 Widget 的 build() 函数。我不认为它已经被测试到被证明是坏的程度。但如果是负责代码do not recommend it的人，我也不推荐。

标签： flutter subclass anti-patterns

【解决方案1】：

扩展有状态小部件可能会导致问题，因为它们的状态是输入到超类中的，并且您不能扩展它们的状态，因为大多数状态类都是私有的。很多像BuildContext.findAncestorStateOfType() 这样的查找方法可能会失败。

扩展无状态小部件在大多数情况下应该可以工作，但不推荐，正如您已经发现的那样。

一般来说，由于 Flutter 的整个响应式和小部件性质，composition over inheritance 的原理是一个很好的模式。

你将小部件组合成新小部件、新小部件、新小部件、新小部件、新小部件……你明白了。

除此之外，您节省了 2 行代码，这些代码大部分是自动生成的，但是您剥夺了 VSCode/IntelliJ 中所有简单的帮助程序，例如“使用填充包裹小部件”。在您的应用程序中使用填充来包装扩展的FormBuilder 要困难得多。如果您编写它很简单，只需将其包裹在Foo 中。用于主题、颜色、字体样式等的所有其他小部件也是如此 - 填充只是一个示例。

【讨论】：

【解决方案2】：

Flutter 更多的是 composition 而不是 Inheritance。但是当父控件需要在子控件中重用时，使用 StatelessWidget 的继承总是有用的。

例如：

class FormBuilder extends StatelessWidget {
  Widget getWidget() {
    return Text('Child Text');
  }

  @override
  Widget build(BuildContext context) {
    return Text('FormBuilder Text');
  }
}

class Foo extends FormBuilder {
  Foo() : super();

  @override
  Widget build(BuildContext context) {
    return getWidget();
  }
}

因此，Widget 将调用 Foo() Widget 元素树将是的 Widget

-- 呵呵

-- 容器

如果它的正常组合，那么 元素树 将是为此

class Foo extends StatelessWidget {
      Foo() : super();
    
      @override
      Widget build(BuildContext context) {
        return FormBuilder();
      }
    }

-- 呵呵

-- 表单生成器

-- 文字

没有任何官方文档说它的模式不好，而是考虑到Composition 设计的颤振。所以，就我个人而言，我从未观察到任何此类性能或继承滞后问题，所以我建议Inheritance 使用它是一个不错的选择。

【讨论】：