Flutter依赖注入使用指南

1. 手动依赖注入

最简单的方式,通过构造函数传递依赖:

Dart 复制代码
class ApiService {
  Future<String> fetchData() async {
    // API 调用
    return 'Data';
  }
}

class UserRepository {
  final ApiService apiService;
  
  UserRepository(this.apiService);
  
  Future<String> getUserData() {
    return apiService.fetchData();
  }
}

class MyWidget extends StatelessWidget {
  final UserRepository userRepository;
  
  MyWidget({required this.userRepository});
  
  @override
  Widget build(BuildContext context) {
    return Text('User: ${userRepository.getUserData()}');
  }
}

// 使用
void main() {
  final apiService = ApiService();
  final userRepository = UserRepository(apiService);
  runApp(MyApp(userRepository: userRepository));
}

2. 使用 Provider 包

最流行的 Flutter 状态管理和依赖注入方案:

Dart 复制代码
dependencies:
  provider: ^6.0.5
Dart 复制代码
import 'package:provider/provider.dart';

// 定义服务类
class CounterService {
  int _count = 0;
  int get count => _count;
  
  void increment() {
    _count++;
  }
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        Provider<CounterService>(create: (_) => CounterService()),
        // 可以添加更多 provider
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterService = Provider.of<CounterService>(context);
    
    return Scaffold(
      body: Center(
        child: Text('Count: ${counterService.count}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterService.increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

依赖注入是将对象的创建和使用分离,使代码更加灵活、可测试和可维护

相关推荐
向哆哆2 小时前
Flutter × OpenHarmony 跨端实战:打造健身俱乐部「数据可视化仪表盘」模块
flutter·信息可视化·开源·鸿蒙·openharmony·开源鸿蒙
灰灰勇闯IT2 小时前
Flutter for OpenHarmony:卡片式 UI(Card Widget)设计 —— 构建清晰、优雅的信息容器
flutter·交互
灰灰勇闯IT2 小时前
Flutter for OpenHarmony:响应式布局(LayoutBuilder / MediaQuery)—— 构建真正自适应的鸿蒙应用
flutter·华为·harmonyos
晚霞的不甘2 小时前
Flutter for OpenHarmony手势涂鸦画板开发详解
前端·学习·flutter·前端框架·交互
晚霞的不甘2 小时前
Flutter for OpenHarmony 实现动态天气与空气质量仪表盘:从 UI 到动画的完整解析
前端·flutter·ui·前端框架·交互
小哥Mark2 小时前
在鸿蒙应用工程中可以使用哪些Flutter手势交互组件实现点击、双击、长按、拖动、缩放、滑动等多种手势
flutter·交互·harmonyos
2601_949809592 小时前
flutter_for_openharmony家庭相册app实战+照片详情实现
android·java·flutter
小哥Mark2 小时前
使用Flutter导航组件TabBar、AppBar等为鸿蒙应用程序构建完整的应用导航体系
flutter·harmonyos·鸿蒙
2501_944448002 小时前
Flutter for OpenHarmony衣橱管家App实战:预算管理实现
前端·javascript·flutter
2501_944448002 小时前
Flutter for OpenHarmony衣橱管家App实战:意见反馈功能实现
android·javascript·flutter