在 Flutter 中，您什么时候应该更喜欢 `Widget` inheritance 而不是组合？

Question

我一直在阅读类似这篇文章的文章，解释 Flutter 如何比 inheritance 更喜欢组合。虽然我部分理解原因，但我质疑在这种做法变得冗长的情况下该怎么做。 另外，在 Flutter 的内部代码中，内置组件到处都是 inheritance。 所以从哲学上讲，一定有场景可以的。

考虑这个例子（基于我制作的真实Widget ）：

class MyFadingAnimation extends StatefulWidget {
    final bool activated;
    final Duration duration;
    final Curve curve;
    final Offset transformOffsetStart;
    final Offset transformOffsetEnd;
    final void Function()? onEnd;
    final Widget? child;

    const MyFadingAnimation({
        super.key,
        required this.activated,
        this.duration = const Duration(milliseconds: 500),
        this.curve = Curves.easeOut,
        required this.transformOffsetStart,
        this.transformOffsetEnd = const Offset(0, 0),
        this.onEnd,
        this.child,
    });

    @override
    State<MyFadingAnimation> createState() => _MyFadingAnimationBuilder();
}

class _MyFadingAnimationBuilder extends State<MyFadingAnimation> {
    @override
    Widget build(BuildContext context) {
        return AnimatedContainer(
            duration: widget.duration,
            curve: widget.curve,
            transform: Transform.translate(
                offset: widget.activated ?
                    widget.transformOffsetStart : widget.transformOffsetEnd,
            ).transform,
            onEnd: widget.onEnd,
            child: AnimatedOpacity(
                duration: widget.duration,
                curve: widget.curve,
                opacity: widget.activated ? 1 : 0,
                child: widget.child
            ),
        );
    }
}

MyFadingAnimation的目标是在Widget上同时执行平移和不透明度 animation。 伟大的！

现在，假设我想为这个小部件创建一些“快捷方式”或“别名”，例如用于水平淡入的 MyHorizo MyHorizontalAnimation或用于垂直淡入的MyVerticalAnimation 。 使用组合，你必须创建这样的东西：

class MyHorizontalAnimation extends StatelessWidget {
    final bool activated;
    final Duration duration;
    final Curve curve;
    final double offsetStart;
    final void Function()? onEnd;
    final Widget? child;

    const MyHorizontalAnimation({
        super.key,
        required this.activated,
        this.duration = const Duration(milliseconds: 500),
        this.curve = Curves.easeOut,
        required this.offsetStart,
        this.onEnd,
        this.child,
    });

    @override
    Widget build(BuildContext context) {
        return MyFadingAnimation(
            activated: activated,
            duration: duration,
            curve: curve,
            transformOffsetStart: Offset(offsetStart, 0),
            onEnd: onEnd,
            child: child,
        );
    }
}

这似乎......对我来说非常冗长。 所以我最初的想法是“好吧，也许我应该尝试扩展 class 无论如何......”

class MyHorizontalAnimation extends MyFadingAnimation {
    final double offsetStart;

    MyHorizontalAnimation({
        super.key,
        required super.activated,
        super.duration,
        super.curve,
        this.offsetStart,
        super.onEnd,
        super.child,
    }) : super(
        transformOffsetStart: Offset(offsetStart, 0),
    );
}

对我来说，这看起来更干净。 此外，它还有一个额外的好处，即如果我向MyFadingAnimation添加功能/道具，它几乎会自动集成到MyHorizontalAnimation （除了必须添加super.newProp ）。 使用组合方法，我必须添加一个新属性，可能会复制/维护默认值，将其添加到构造函数中，当我完成时，感觉就像一件苦差事。

我使用 inheritance 的主要问题是（这可能真的很琐碎）除了我的基本小部件MyFadingAnimation之外，我不能有任何东西的const构造函数。 再加上inheritance的强烈劝阻，让我觉得还有更好的办法。

所以，总而言之，这是我的两个问题：

1. 我应该如何组织上面的代码以使const Widget重定向到其他“基本” Widget ？
2. 什么时候可以使用 inheritance over composition？ 这有什么好的经验法则吗？

Answer 1

我不会担心您的重定向构造函数中缺少const - 毕竟，组合示例在内部MyFadingAnimation构造中也缺少const 。 不可能用未知的 integer 参数创建一个const Offset ，所以这是一个不可避免的语言限制。

关于组合与 inheritance 的主题，您的用例还有另一个解决方案：基础 class 中的辅助构造函数。整个框架都使用了这种模式 - 例如，看看SizedBox 。

但是请注意，当涉及到默认参数值时，这种风格确实引入了一些重复性。

class MyFadingAnimation extends StatefulWidget {
    final bool activated;
    final Duration duration;
    final Curve curve;
    final Offset transformOffsetStart;
    final Offset transformOffsetEnd;
    final void Function()? onEnd;
    final Widget? child;

    const MyFadingAnimation({
        super.key,
        required this.activated,
        this.duration = const Duration(milliseconds: 500),
        this.curve = Curves.easeOut,
        required this.transformOffsetStart,
        this.transformOffsetEnd = const Offset(0, 0),
        this.onEnd,
        this.child,
    });

    MyFadingAnimation.horizontal({
      super.key,
      required this.activated,
      this.duration = const Duration(milliseconds: 500),
      this.curve = Curves.easeOut,
      required double offsetStart,
      this.onEnd,
      this.child,
    })  : transformOffsetStart = Offset(offsetStart, 0),
          transformOffsetEnd = const Offset(0, 0);

    @override
    State<MyFadingAnimation> createState() => _MyFadingAnimationBuilder();
}

Answer 2

为什么要在 inheritance 之上使用组合？

优化

正如您所提到的，在使用组合时，外部小部件可以具有const构造函数，在build中而不是在构造函数本身中执行计算。 这有多种用途：

1. const具有传染性。 任何使用您的小部件的小部件也可以声明为const ，从而为大型小部件树带来显着好处。
2. 除非实际使用小部件，否则不会执行任何计算。
   以一个在两个子部件之间交叉淡入淡出的部件为例。 有时一个孩子永远不会被建造。 在 build 方法中执行计算允许廉价地构建可能永远不会使用的子 widget。

类型无关紧要

Flutter 风格指南规定如下：

每个 API 应该是独立的，不应该知道其他功能。

很多Widgets child 。 小部件应该完全不知道那个孩子的类型。 不要使用is或类似的检查来根据孩子的类型采取不同的行动。

例如，许多具有text字段的小部件接受任何Widget ，而不是Text小部件。

如果遵循这条指令，inheritance 的最大特性之一就无关紧要了：继承公共 API。 小部件不应该（通常）用于传递和返回之外的任何其他用途。 有什么理由使用inheritance？

灵活性

使用 inheritance 只允许使用一个特定类型的孩子。 如果您希望以后使重定向小部件更复杂怎么办？

例如，您可能意识到HorizontalFadingAnimation可以使用一些添加的动画填充来获得更好的视觉效果。

将子小部件包装在另一个小部件中需要完全重写外部小部件，以及重大的 API 更改（因为小部件的类型必须更改）。