面试题：Flutter复用Widget时如何处理不同的状态逻辑

使用回调函数（Callback Function）：
- 思路：在复用的Widget构造函数中，定义一个函数类型的参数，这个参数就是按钮点击后的回调函数。当按钮被点击时，调用这个回调函数，将控制权交给使用该Widget的地方，让其定义具体的逻辑。
- 示例代码（以Dart语言为例）：

import 'package:flutter/material.dart';

class CustomButtonWidget extends StatelessWidget {
  final VoidCallback onButtonPressed;

  CustomButtonWidget({required this.onButtonPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onButtonPressed,
      child: Text('Click Me'),
    );
  }
}

在使用这个Widget时：

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomButtonWidget(
          onButtonPressed: () {
            // 在这里定义按钮点击后的具体逻辑
            print('Button clicked in MyPage');
          },
        ),
      ),
    );
  }
}

使用状态管理模式（如InheritedWidget、Provider等）：
- 思路：通过状态管理，Widget可以从上层获取不同的状态，进而根据不同状态执行不同的按钮点击逻辑。例如，使用Provider，在使用Widget的地方，根据业务需求提供不同的状态对象，Widget通过监听状态变化来决定按钮点击后的行为。
- 示例代码（以Flutter + Provider为例）：首先定义状态类：

class ButtonLogicState {
  final String logicType;
  ButtonLogicState(this.logicType);
}

然后定义Widget：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class CustomButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final state = Provider.of<ButtonLogicState>(context);
    return ElevatedButton(
      onPressed: () {
        if (state.logicType == 'type1') {
          // 执行type1的逻辑
          print('Executing type1 logic');
        } else if (state.logicType == 'type2') {
          // 执行type2的逻辑
          print('Executing type2 logic');
        }
      },
      child: Text('Click Me'),
    );
  }
}

在使用Widget的地方：

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => ButtonLogicState('type1'),
      child: Scaffold(
        body: Center(
          child: CustomButtonWidget(),
        ),
      ),
    );
  }
}

使用抽象类或接口：
- 思路：定义一个抽象类或接口，其中包含按钮点击后执行逻辑的抽象方法。在复用Widget时，让使用Widget的类实现这个抽象类或接口，然后将实现类的实例传递给Widget。Widget在按钮点击时，调用实现类中的具体逻辑方法。
- 示例代码（以Java语言为例）：定义抽象类：

public abstract class ButtonClickListener {
    public abstract void onButtonClick();
}

定义复用Widget：

import javax.swing.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class CustomButtonWidget extends JPanel {
    private final ButtonClickListener listener;

    public CustomButtonWidget(ButtonClickListener listener) {
        this.listener = listener;
        JButton button = new JButton("Click Me");
        button.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                listener.onButtonClick();
            }
        });
        add(button);
    }
}

在使用Widget的地方：

public class MainFrame extends JFrame {
    public MainFrame() {
        ButtonClickListener clickListener = new ButtonClickListener() {
            @Override
            public void onButtonClick() {
                // 定义按钮点击后的具体逻辑
                JOptionPane.showMessageDialog(null, "Button clicked");
            }
        };
        CustomButtonWidget customButtonWidget = new CustomButtonWidget(clickListener);
        add(customButtonWidget);
        setSize(300, 200);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setVisible(true);
    }

    public static void main(String[] args) {
        new MainFrame();
    }
}

星途面试题库

面试题：Flutter复用Widget时如何处理不同的状态逻辑

知识考点

面试题答案