Question

我对Flutter还是陌生的，但仍然不知道如何正确地进行操作。我希望标题足够清晰，因为我不知道解决该问题的合适关键字。第一个片段扩展了StatelessWidget：

class FloatingActionButtonBuilder extends StatelessWidget {
  final Function function;
  final String text;
  final String toolTip;
  final IconData icon;

  const FloatingActionButtonBuilder({
    Key key,
    @required this.function,
    @required this.text,
    @required this.toolTip,
    this.icon,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton.extended(
      onPressed: function,
      foregroundColor: Colors.white,
      tooltip: '$toolTip',
      icon: Icon(
        icon,
      ),
      label: Text(
        '$text',
        style: TextStyle(
          fontSize: 16.0,
        ),
      ),
    );
  }
}

第二节常规课程：

class FloatingActionButtonBuilder2 {
  final BuildContext context;
  final Function function;
  final String text;

  const FloatingActionButtonBuilder2({
    @required this.context,
    @required this.function,
    @required this.text,
  });

  Widget buildFAB(String toolTip, IconData icon) {
    return FloatingActionButton.extended(
      onPressed: function,
      foregroundColor: Colors.white,
      tooltip: '$toolTip',
      icon: Icon(
        icon,
      ),
      label: Text(
        '$text',
        style: TextStyle(
          fontSize: 16.0,
        ),
      ),
    );
  }
}

我一直在用的是普通的。最初，我进行了StatelessWidget的扩展，但后来我决定不这样做，因为我认为仍然没有区别，也没有考虑太多。现在，我的大脑无处不在想知道专家们对这种特殊情况的看法，深入地提出了建议。而且我注意到，使用覆盖构建功能时，不需要BuildContext作为依赖项。

编辑：使用扩展StatelessWidget（Scaffold的floatActionButton属性）的页面摘要：

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  final String text = 'PUSH';
  final IconData icon = Icons.add;

  void push() {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => Test3(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButtonBuilder(
        function: push,
        text: text,
        toolTip: text,
        icon: icon,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              'PUSH PAGE',
              style: TextStyle(
                fontSize: 32.0,
              ),
            ),
            Text(
              'EXTENDS CLASS',
              style: TextStyle(
                fontSize: 32.0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

使用常规类（Scaffold的floatActionButton属性）的页面摘要：

class Test3 extends StatefulWidget {
  @override
  _Test3State createState() => _Test3State();
}

class _Test3State extends State<Test3> {
  final String text = 'POP';
  final IconData icon = Icons.remove;

  void pop() {
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButtonBuilder2(
        context: context,
        function: pop,
        text: text,
      ).buildFAB(text, icon),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              'POP PAGE',
              style: TextStyle(
                fontSize: 32.0,
              ),
            ),
            Text(
              'REGULAR CLASS',
              style: TextStyle(
                fontSize: 32.0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

每次编辑时，两种方法之间存在一个关键区别-方法A中的类是一个小部件，而方法B中的类仅包含一个返回小部件。

对于Flutter，这种差异非常重要。定义新的窗口小部件时，Flutter使用该窗口小部件类来跟踪窗口小部件树中的可视元素以进行更改。它能够检测到何时更改了窗口小部件并需要重绘，并且这样做非常好，而不会影响到绝对必要的窗口小部件树。

但是，如果您通过方法调用创建窗口小部件，则Flutter无法检测到您正在执行此操作，因此您将无法进行此类优化。这就是为什么在重构UI代码以将其拆分为模块化片段时，Flutter的官方建议是将UI代码拆分为新的小部件类，而不是将其拆分为同一小部件类中的单独方法。

这是一个更语义的描述。在方法A中，小部件类具有作为小部件类的固有作用的构建方法。 Flutter调用了此构建方法，它返回的小部件成为小部件类本身的子级。（如果您在Dart DevTools中查看小部件树，则可以看到这一点。）在方法B中，build方法只是碰巧返回小部件的另一种方法。该小部件将成为您将其传递到调用方法的任何其他小部件（在您的情况下为Scaffold）的子代。因此，正在构建的小部件与类本身之间没有固有的关系。这种缺乏关系的情况将在脆弱的小部件树中显示出来，并且在整个UI管理中都表现得非常草率，导致将应用程序与麻线和祈祷结合在一起。

不使用第二种方法的另一个原因？没有充分的理由，它会使您的代码更加冗长。将方法A的实现与方法B进行比较-括号中的所有内容都是相同的，但是方法B需要对build方法本身进行额外的调用，并且您在使用“ not-a-widget”类的任何地方都必须这样做。您已经在UI声明中交换了代码的简洁性，不必在某个地方键入StatelessWidget，这真是太糟糕了。

此外，如果您的班级不是适当的窗口小部件，则它无法利用所有窗口小部件生命周期事件。是否希望在小部件初始化时收到通知？它何时在更新过程中？何时导航至/远离？什么时候处理？如果您想触发更新怎么办？假设甚至有可能，使用泛型类来实现所有这些都是很痛苦的事情，而当您的类扩展StatefulWidget时，所有这些功能都是可以使用的（加上试图迫使它在方法B中起作用， d可能最终还是从头开始重新发明StatefulWidget。

简而言之，从根本上讲，几乎没有很好的理由让泛型非窗口小部件类带有您手动调用的builder方法。如果您有UI代码，则它属于小部件类（除非您有非常很好的理由，否则）。

Answer 2

区别在于，如果您使用 Stateful 或 Stateless 小部件扩展一个类，则该类本身就是一个小部件类，返回一个小部件。简单来说，如果您使用有状态或无状态窗口小部件扩展类，则将需要覆盖通常创建窗口小部件的 build 函数，或者我们可以返回窗口小部件：D

我建议您首先了解有关类窗口小部件（有状态和无状态）的更多信息，我向您保证，您将了解它的工作原理。

类使用继承构建功能扩展StatelessWidget和使用我自己的功能的常规类之间有什么区别

2 个答案: