面试题：Flutter Provider 跨层级状态传递及性能优化

安装 Provider 包：在 pubspec.yaml 文件中添加 provider 依赖：

dependencies:
  provider: ^[latest_version]

然后运行 flutter pub get 安装。

创建状态类：创建一个继承自 ChangeNotifier 的状态类，用于管理需要跨层级更新的状态。例如：

import 'package:flutter/foundation.dart';

class MySharedState extends ChangeNotifier {
  // 假设这里有一个需要更新的状态变量
  int _counter = 0;

  int get counter => _counter;

  void incrementCounter() {
    _counter++;
    notifyListeners();
  }
}

在顶层提供状态：在应用的顶层（通常是 main.dart 的 MaterialApp 或 CupertinoApp 之上）使用 MultiProvider 或 Provider 来提供状态。例如：

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

import 'my_shared_state.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => MySharedState()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Provider State Management'),
        ),
        body: Center(
          child: MyNestedWidget(),
        ),
      ),
    );
  }
}

在底层 Widget 中更新状态：在需要更新状态的底层 Widget 中，通过 Provider.of 获取状态对象并调用相关方法。例如：

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

import 'my_shared_state.dart';

class MyBottomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Provider.of<MySharedState>(context, listen: false).incrementCounter();
      },
      child: Text('Increment Counter'),
    );
  }
}

这里 listen: false 确保在更新状态时不会触发不必要的重建，因为我们只是调用方法更新状态，而不是依赖状态来构建 UI。

在需要的 Widget 中监听状态变化：对于那些真正依赖状态变化来更新 UI 的 Widget，可以通过 Consumer 或 context.watch 来监听状态变化。例如：

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

import 'my_shared_state.dart';

class MyDependentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<MySharedState>(
      builder: (context, state, child) {
        return Text('Counter: ${state.counter}');
      },
    );
  }
}

或者使用 context.watch：

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

import 'my_shared_state.dart';

class MyDependentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final state = context.watch<MySharedState>();
    return Text('Counter: ${state.counter}');
  }
}

性能优化：

精准监听：使用 Consumer 或 context.watch 只在真正依赖状态的 Widget 中监听，避免中间层 Widget 不必要的重建。
局部更新：在状态类中，尽量精确地控制 notifyListeners 的调用，只在相关状态变化时通知，而不是每次状态类中的任何变化都通知。
避免重复构建：通过 Provider.of(context, listen: false) 在不需要监听状态变化的地方获取状态对象，减少不必要的重建。

星途面试题库

面试题：Flutter Provider 跨层级状态传递及性能优化

知识考点

面试题答案