面试题：Flutter中Widget的状态管理方式及应用场景

1. StatefulWidget

原理：用于创建有状态的部件。其状态可以在用户与应用交互时发生改变。状态被封装在State类中，State类独立于Widget，允许状态的改变触发UI的重建。
适用场景：适用于局部状态管理，比如按钮的点击状态、文本输入框的内容等。
示例：

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _incrementCounter() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Count: $_count'),
        RaisedButton(
          child: Text('Increment'),
          onPressed: _incrementCounter,
        )
      ],
    );
  }
}

2. InheritedWidget

原理：是一种在Widget树中共享数据的方式，当数据发生变化时，依赖该数据的子Widget会自动重建。它通过BuildContext.dependOnInheritedWidgetOfExactType方法来监听数据变化。
适用场景：适用于跨层级传递数据，比如主题数据、本地化数据等。
示例：

class MyInheritedWidget extends InheritedWidget {
  final String data;
  MyInheritedWidget({Key key, @required this.data, Widget child})
      : super(key: key, child: child);

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

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

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

3. Provider

原理：是一个状态管理库，基于InheritedWidget实现。它提供了一种更简单、直观的方式来管理状态，通过ChangeNotifier来通知状态变化。
适用场景：适用于中等规模到大规模的应用，可管理多个状态且便于复用。
示例：

class CounterModel with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('Provider Example')),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Consumer<CounterModel>(
                  builder: (context, model, child) {
                    return Text('Count: ${model.count}');
                  },
                ),
                RaisedButton(
                  child: Text('Increment'),
                  onPressed: () {
                    Provider.of<CounterModel>(context, listen: false).increment();
                  },
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

4. Bloc (Business Logic Component)

原理：将业务逻辑与UI分离，通过Stream和Sink来处理状态变化。Bloc负责处理业务逻辑并发出新的状态，UI监听这些状态变化并更新。
适用场景：适用于复杂业务逻辑的管理，使代码结构更清晰，易于测试和维护。
示例：

class CounterBloc {
  int _count = 0;
  final _counterStreamController = StreamController<int>();

  Stream<int> get counterStream => _counterStreamController.stream;

  void increment() {
    _count++;
    _counterStreamController.sink.add(_count);
  }

  void dispose() {
    _counterStreamController.close();
  }
}

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  final CounterBloc _counterBloc = CounterBloc();

  @override
  void dispose() {
    _counterBloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        StreamBuilder(
          stream: _counterBloc.counterStream,
          initialData: 0,
          builder: (context, snapshot) {
            return Text('Count: ${snapshot.data}');
          },
        ),
        RaisedButton(
          child: Text('Increment'),
          onPressed: _counterBloc.increment,
        )
      ],
    );
  }
}

星途面试题库

面试题：Flutter中Widget的状态管理方式及应用场景

知识考点

面试题答案

1. StatefulWidget

2. InheritedWidget

3. Provider

4. Bloc (Business Logic Component)