面试题：Flutter中StatefulWidget与InheritedWidget结合使用场景及实现原理

典型场景

数据共享：当应用中有一些数据需要在多个Widget层级间共享，且这些数据可能会发生变化时。例如，用户的登录状态、主题模式（亮色/暗色）等。StatefulWidget负责管理数据的状态变化，InheritedWidget负责将数据高效地传递到需要的Widget中，而无需在Widget树中逐层传递。
响应式布局：不同屏幕尺寸或方向下，某些布局相关的参数（如间距、字体大小等）可能需要动态调整。StatefulWidget监测屏幕相关的状态变化，InheritedWidget将这些布局参数传递给子Widget。

实现结合的步骤

定义InheritedWidget：

class MyInheritedWidget extends InheritedWidget {
  final String data;
  MyInheritedWidget({Key? key, required Widget child, required this.data})
      : super(key: key, child: child);
  
  static MyInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }
  
  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    return oldWidget.data != data;
  }
}

data是需要共享的数据。
of方法是一个便捷方法，用于在其他Widget中获取该InheritedWidget实例。
updateShouldNotify方法决定当数据变化时，哪些依赖该InheritedWidget的子Widget需要重新构建。

使用StatefulWidget管理数据状态：

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);
  
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String _sharedData = 'Initial Data';
  
  void _updateData() {
    setState(() {
      _sharedData = 'Updated Data';
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return MyInheritedWidget(
      data: _sharedData,
      child: Column(
        children: [
          ElevatedButton(
            onPressed: _updateData,
            child: Text('Update Data'),
          ),
          // 子Widget树
        ],
      ),
    );
  }
}

MyStatefulWidget中的_sharedData是共享数据，_updateData方法用于更新数据。
通过setState方法通知Flutter框架数据发生了变化，从而触发重新构建。

在子Widget中使用共享数据：

class MyChildWidget extends StatelessWidget {
  const MyChildWidget({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    final data = MyInheritedWidget.of(context)?.data;
    return Text(data ?? 'No data');
  }
}

MyChildWidget通过MyInheritedWidget.of(context)获取共享数据，并在build方法中使用。

背后原理

InheritedWidget原理：InheritedWidget在Widget树中起到数据传递的作用。当一个Widget调用dependOnInheritedWidgetOfExactType时，它会在Widget树中向上查找最近的该类型的InheritedWidget，并注册自己为依赖者。当InheritedWidget的updateShouldNotify返回true时，所有依赖它的Widget会被标记为需要重新构建，Flutter框架会在适当的时候重新构建这些Widget，从而实现数据的更新传递。
与StatefulWidget结合原理：StatefulWidget负责管理数据的状态变化，通过setState方法触发重新构建。当StatefulWidget重新构建时，如果它包裹的InheritedWidget的数据发生了变化，InheritedWidget的updateShouldNotify会返回true，进而导致依赖该InheritedWidget的子Widget也会重新构建，实现了状态变化时共享数据的更新和传递。

星途面试题库

面试题：Flutter中StatefulWidget与InheritedWidget结合使用场景及实现原理

知识考点

面试题答案

典型场景

实现结合的步骤

背后原理