面试题：Flutter中StatefulWidget状态管理在大型项目中如何处理组件间状态传递

Question

在大型Flutter项目中，假设存在多个嵌套层级的StatefulWidget组件，子组件的状态变化需要通知到父组件以及其他兄弟组件，你会使用哪些方法来实现这种状态传递？请简述思路并给出关键代码示例。

Answer 1

方法一：回调函数（Callback Function）

1. 思路：在父组件中定义一个回调函数，将该函数作为参数传递给子组件。当子组件状态变化时，调用这个回调函数，父组件通过这个回调函数获取子组件的状态变化并进行相应处理，同时父组件可以再将这个变化通知给其他兄弟组件。
2. 关键代码示例：

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  String childData = '';

  void updateData(String data) {
    setState(() {
      childData = data;
      // 在这里可以通知兄弟组件
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ChildWidget(onDataChanged: updateData),
        Text('Data from child: $childData'),
      ],
    );
  }
}

class ChildWidget extends StatefulWidget {
  final ValueChanged<String> onDataChanged;

  ChildWidget({required this.onDataChanged});

  @override
  _ChildWidgetState createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {
  String localData = 'Initial data';

  void _handleChange() {
    setState(() {
      localData = 'Updated data';
    });
    widget.onDataChanged(localData);
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _handleChange,
      child: Text('Update data'),
    );
  }
}

方法二：InheritedWidget

1. 思路：创建一个继承自InheritedWidget的类，用于共享状态。任何子组件都可以通过InheritedWidget获取到共享状态，当状态发生变化时，所有依赖这个共享状态的组件都会重新构建。父组件可以在状态变化时，通知所有依赖该状态的子组件和兄弟组件。
2. 关键代码示例：

class DataProvider extends InheritedWidget {
  final String data;
  DataProvider({required this.data, required Widget child}) : super(child: child);

  static DataProvider of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<DataProvider>()!;
  }

  @override
  bool updateShouldNotify(DataProvider oldWidget) => data != oldWidget.data;
}

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  String sharedData = 'Initial shared data';

  void _updateData() {
    setState(() {
      sharedData = 'Updated shared data';
    });
  }

  @override
  Widget build(BuildContext context) {
    return DataProvider(
      data: sharedData,
      child: Column(
        children: [
          ChildWidget(),
          ElevatedButton(
            onPressed: _updateData,
            child: Text('Update shared data'),
          ),
        ],
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String data = DataProvider.of(context).data;
    return Text('Data from provider: $data');
  }
}

方法三：事件总线（EventBus）

1. 思路：引入事件总线库（如event_bus），子组件在状态变化时发布一个事件，父组件和兄弟组件监听这个事件，当事件触发时，相应组件执行相应的处理逻辑。
2. 关键代码示例： 首先在pubspec.yaml中添加依赖：

dependencies:
  event_bus: ^2.0.0

然后编写代码：

import 'package:event_bus/event_bus.dart';

final EventBus eventBus = EventBus();

class DataChangedEvent {
  final String newData;
  DataChangedEvent(this.newData);
}

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  String receivedData = '';

  @override
  void initState() {
    super.initState();
    eventBus.on<DataChangedEvent>().listen((event) {
      setState(() {
        receivedData = event.newData;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ChildWidget(),
        Text('Data received: $receivedData'),
      ],
    );
  }
}

class ChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        eventBus.fire(DataChangedEvent('New data from child'));
      },
      child: Text('Fire event'),
    );
  }
}