如何重构 Flutter StatefulWidget 中的功能？

Question

下面的代码是我想要重构的 Flutter 小部件的简单示例，以提高组织性和可读性。

我想重构

_incrementCounter

和

_decrementCounter

以便

_MySimpleWidgetState

类不再那么混乱。我尝试通过移动

_MySimpleWidgetState

和

_incrementCounter

函数来扩展

_decrementCounter

类，但这使得代码可读性较差。

我在这里缺少什么？我依稀记得知道如何做到这一点，但现在我还没有想到这项技术。如果这是非常基本的事情，请原谅我。

class MySimpleWidget extends StatefulWidget {
  const MySimpleWidget({super.key});

  @override
  State<MySimpleWidget> createState() => _MySimpleWidgetState();
}

class _MySimpleWidgetState extends State<MySimpleWidget> {

  int _counter = 0;

  _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.only(top: 16.0),

          child: Text('Counter Value: $_counter'),
        ),

        TextButton(onPressed: () => _incrementCounter(), 
        child: const Text('Increment Counter')),

        TextButton(onPressed: () => _decrementCounter(), 
        child: const Text('Decrement Counter'))
      ],
    );
  }
}

Answer 1

为了使代码更有组织性和可读性，您可以通过创建一个单独的类来处理计数逻辑（递增和递减），从而将逻辑与 UI 分离。

这样，您的小部件的

State

类就可以专注于 UI，使您的代码更易于管理。

具体操作方法如下：

1. 创建一个

   CounterController

   类：该类将管理递增和递减计数器的逻辑。
2. 将

   MySimpleWidget

   和

   _MySimpleWidgetState

   集中在 UI 上：这些类仅处理用户界面。
3. 将

   CounterController

   传递给小部件的状态，保持逻辑和 UI 之间的清晰分离。

重构代码：

class CounterController {
  int _counter = 0;

  int get counter => _counter;

  void incrementCounter() {
    _counter++;
  }

  void decrementCounter() {
    _counter--;
  }
}

class MySimpleWidget extends StatefulWidget {
  const MySimpleWidget({super.key});

  @override
  State<MySimpleWidget> createState() => _MySimpleWidgetState();
}

class _MySimpleWidgetState extends State<MySimpleWidget> {
  final CounterController _counterController = CounterController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.only(top: 16.0),
          child: Text('Counter Value: ${_counterController.counter}'),
        ),
        TextButton(
          onPressed: () {
            setState(() {
              _counterController.incrementCounter();
            });
          },
          child: const Text('Increment Counter'),
        ),
        TextButton(
          onPressed: () {
            setState(() {
              _counterController.decrementCounter();
            });
          },
          child: const Text('Decrement Counter'),
        ),
      ],
    );
  }
}

说明：

• CounterController 类：该类管理计数逻辑，因此小部件的状态不再直接处理它。

• _MySimpleWidgetState Class：该类负责 UI。它创建

  CounterController

  的实例并使用其方法来更新计数器。

这种方法使您的代码保持模块化，将业务逻辑与 UI 分开，这使得将来更容易维护和扩展。