面试题：Flutter有状态Widget性能优化与状态管理

使用 ValueNotifier 和 ValueListenableBuilder
- 原理：ValueNotifier 是一个可监听的值持有者。当 ValueNotifier 内部的值发生变化时，依赖它的 ValueListenableBuilder 会重建，而不会影响其他无关的Widget。这样可以将状态变化的影响范围缩小到只与该 ValueNotifier 相关的部分，避免整个有状态Widget不必要的重绘。
- 示例代码：

ValueNotifier<int> counterNotifier = ValueNotifier(0);

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: counterNotifier,
      builder: (context, value, _) {
        return Text('Count: $value');
      },
    );
  }
}

采用 InheritedWidget 结合 BuildContext.dependOnInheritedWidgetOfExactType
- 原理：InheritedWidget 是一种在Widget树中共享数据的方式。当 InheritedWidget 的数据发生变化时，依赖它的子Widget会重建。通过 BuildContext.dependOnInheritedWidgetOfExactType，Widget可以精确地声明对特定 InheritedWidget 的依赖，只有相关的依赖Widget会因为 InheritedWidget 的变化而重绘，其他Widget不受影响。
- 示例代码：

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

  static MyInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }

  @override
  bool updateShouldNotify(covariant MyInheritedWidget oldWidget) {
    return data != oldWidget.data;
  }
}

class DependentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = MyInheritedWidget.of(context)?.data;
    return Text('Data: $data');
  }
}

使用 Provider 包
- 原理：Provider 是一个状态管理库，它基于 InheritedWidget 原理工作。通过 Provider，可以更方便地管理和共享状态，并且可以细粒度地控制哪些Widget在状态变化时需要重建。Provider 会自动跟踪依赖关系，只有依赖特定状态的Widget会在状态改变时重绘。
- 示例代码：

ChangeNotifierProvider(
  create: (context) => MyModel(),
  child: MyApp(),
);

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final model = context.watch<MyModel>();
    return Text('Value from model: ${model.value}');
  }
}

分离状态逻辑到独立的类（如 ChangeNotifier）并使用 Consumer
- 原理：将状态逻辑封装到 ChangeNotifier 类中，然后通过 Consumer 来监听状态变化。Consumer 只会在其依赖的 ChangeNotifier 状态改变时重建，从而避免不必要的重绘。这种方式将状态管理与Widget的构建逻辑分离，提高了代码的可维护性和可测试性。
- 示例代码：

class MyModel extends ChangeNotifier {
  int _value = 0;
  int get value => _value;
  void increment() {
    _value++;
    notifyListeners();
  }
}

Consumer<MyModel>(
  builder: (context, model, child) {
    return Text('Value: ${model.value}');
  },
);

星途面试题库

面试题：Flutter有状态Widget性能优化与状态管理

知识考点

面试题答案