Flutter代码优化：如何复用setState逻辑并将onTap移入无状态组件？

核心优化思路 #

1. 组件内聚：给无状态按钮组件添加点击回调参数，将InkWell整合到组件内部，避免在主页面重复嵌套
2. 逻辑复用：把重复的计数器增减、布尔值更新逻辑抽离到单独文件，减少主页面代码冗余
3. 参数化调用：通过参数传递不同的状态变量，复用相同的更新逻辑

第一步：修改无状态组件（test2.dart） #

让按钮组件自带点击交互，无需在主页面重复包裹InkWell：

import 'package:flutter/material.dart';

class PlusMinusButton extends StatelessWidget {
  PlusMinusButton({
    required this.icon,
    required this.bgColor,
    required this.iconColor,
    this.onTap,
  });

  final Color bgColor;
  final Color iconColor;
  final IconData icon;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        constraints: BoxConstraints(
          minWidth: 30,
          maxWidth: 80,
          minHeight: 80,
          maxHeight: 80,
        ),
        margin: EdgeInsets.all(9),
        decoration: BoxDecoration(
          color: bgColor,
          borderRadius: BorderRadius.circular(10),
        ),
        child: FittedBox(
          fit: BoxFit.scaleDown,
          child: Icon(
            icon,
            color: iconColor,
          ),
        ),
      ),
    );
  }
}

class CounterAndButtons extends StatelessWidget {
  CounterAndButtons({
    required this.minusButton,
    required this.counter,
    required this.plusButton,
  });

  final Widget minusButton;
  final Widget counter;
  final Widget plusButton;
  
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [minusButton, counter, plusButton],
    );
  }
}

class Counter extends StatelessWidget {
  Counter({required this.counter});

  final String counter;
  
  @override
  Widget build(BuildContext context) {
    return Text(
      counter,
      style: TextStyle(fontSize: 60),
      maxLines: 1,
    );
  }
}

class NormalButtons extends StatelessWidget {
  NormalButtons({
    required this.tpNumber,
    required this.boxColor,
    required this.textColor,
    this.onTap,
  });

  final String tpNumber;
  final Color boxColor;
  final Color textColor;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 5, vertical: 8),
        padding: EdgeInsets.all(3),
        decoration: BoxDecoration(
          color: boxColor,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Center(
          child: Text(
            tpNumber,
            style: TextStyle(color: textColor, fontSize: 80),
            textAlign: TextAlign.center,
            maxLines: 2,
          ),
        ),
      ),
    );
  }
}

第二步：抽离状态更新逻辑到单独文件（counter_logic.dart） #

把重复的业务逻辑封装成工具类，方便全局调用：

class CounterLogic {
  // 减少计数器逻辑
  static void decreaseCounter({
    required int localCounter,
    required Function(int) updateLocal,
    required int globalCounter,
    required Function(int) updateGlobal,
  }) {
    if (localCounter <= 0) return;
    updateLocal(localCounter - 1);
    if (globalCounter > 0) updateGlobal(globalCounter - 1);
  }

  // 增加计数器逻辑
  static void increaseCounter({
    required int localCounter,
    required Function(int) updateLocal,
    required int globalCounter,
    required Function(int) updateGlobal,
    int maxLimit = 12,
  }) {
    if (globalCounter >= maxLimit) return;
    if (localCounter < maxLimit) updateLocal(localCounter + 1);
    updateGlobal(globalCounter + 1);
  }

  // 更新布尔值逻辑
  static void updateBooleans({
    required Function(bool) updateBool1,
    required Function(bool) updateBool2,
    bool value = true,
  }) {
    updateBool1(value);
    updateBool2(value);
  }
}

第三步：简化主页面代码（TestMain） #

调用抽离的逻辑和带回调的组件，大幅减少冗余代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'test2.dart';
import 'counter_logic.dart';

class TestMain extends StatefulWidget {
  const TestMain({Key? key}) : super(key: key);

  @override
  State<TestMain> createState() => _TestMainState();
}

class _TestMainState extends State<TestMain> {
  int localCounter1 = 0;
  int localCounter2 = 0;
  int globalCounter = 0;
  bool bool1 = false;
  bool bool2 = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          CounterAndButtons(
            minusButton: PlusMinusButton(
              icon: CupertinoIcons.minus,
              bgColor: Colors.blueGrey,
              iconColor: Colors.white,
              onTap: () => setState(() {
                CounterLogic.decreaseCounter(
                  localCounter: localCounter1,
                  updateLocal: (val) => localCounter1 = val,
                  globalCounter: globalCounter,
                  updateGlobal: (val) => globalCounter = val,
                );
              }),
            ),
            counter: Counter(counter: '$localCounter1'),
            plusButton: PlusMinusButton(
              icon: CupertinoIcons.plus,
              bgColor: Colors.blueGrey,
              iconColor: Colors.white,
              onTap: () => setState(() {
                CounterLogic.increaseCounter(
                  localCounter: localCounter1,
                  updateLocal: (val) => localCounter1 = val,
                  globalCounter: globalCounter,
                  updateGlobal: (val) => globalCounter = val,
                );
              }),
            ),
          ),
          SizedBox(height: 20),
          CounterAndButtons(
            minusButton: PlusMinusButton(
              icon: CupertinoIcons.minus,
              bgColor: Colors.blueGrey,
              iconColor: Colors.white,
              onTap: () => setState(() {
                CounterLogic.decreaseCounter(
                  localCounter: localCounter2,
                  updateLocal: (val) => localCounter2 = val,
                  globalCounter: globalCounter,
                  updateGlobal: (val) => globalCounter = val,
                );
              }),
            ),
            counter: Counter(counter: '$localCounter2'),
            plusButton: PlusMinusButton(
              icon: CupertinoIcons.plus,
              bgColor: Colors.blueGrey,
              iconColor: Colors.white,
              onTap: () => setState(() {
                CounterLogic.increaseCounter(
                  localCounter: localCounter2,
                  updateLocal: (val) => localCounter2 = val,
                  globalCounter: globalCounter,
                  updateGlobal: (val) => globalCounter = val,
                );
              }),
            ),
          ),
          SizedBox(height: 20),
          Counter(counter: '$globalCounter'),
          SizedBox(height: 20),
          NormalButtons(
            tpNumber: 'button Text',
            boxColor: Colors.blueGrey,
            textColor: Colors.white,
            onTap: () => setState(() {
              CounterLogic.updateBooleans(
                updateBool1: (val) => bool1 = val,
                updateBool2: (val) => bool2 = val,
              );
            }),
          ),
        ],
      ),
    );
  }
}

优化效果 #

• 代码简洁度：主页面重复的setState逻辑全部被替换为工具类调用，行数大幅减少
• 可维护性：修改计数器规则或布尔值更新逻辑时，只需修改counter_logic.dart一处
• 组件复用性：按钮组件自带交互逻辑，可直接在其他页面复用，无需重复嵌套InkWell

内容的提问来源于stack exchange，提问作者Nomad09