Flutter屏幕控制插件flutter_screen_controller的使用

单屏逻辑与UI分离的简便方法

动机： 我们有StatefulWidget中的setState，但缺点是我们的屏幕逻辑与展示代码混合在一起。此插件旨在解决这个问题，提供一种分离每个屏幕UI逻辑的方法。

🎖 特性 #

对于每个控制器，您可以使用这些方法：

• onInit：执行早期初始化（类似于initState），
• onReady：执行需要更新UI的初始化（例如数据获取）
• onDispose：释放资源（类似于dispose）
• updateUI：类似于setState，但您可以无参数调用它

此外，您还可以享受以下好处：

• ❤️ 将逻辑从UI分离出来
• ↩️ 仅刷新屏幕所需的部分
• 🔌 您可以为同一屏幕拥有多个具有独立逻辑的控制器
• 🔌 您可以从另一个屏幕继承逻辑
• 💾 您可以创建可以在屏幕上重用的逻辑部分
• ⚡ 没有限制，您可以同时使用StatefulWidget和ScreenController
• 🚀 预定义的控制器已经可用，比如在演示中使用的那个。
• 🛡️ 支持空安全

🔩 安装 #

flutter pub add flutter_screen_controller

或者，在您的pubspec.yaml文件中添加：

dependencies:
  flutter_screen_controller: <last_version>

⚡️ 导入 #

import 'package:flutter_screen_controller/flutter_screen_controller.dart';

🎮 如何使用 #

首先创建您的控制器，这里是一个示例：

SettingsController

/// 一个类，许多Widgets可以通过它读取用户设置、更新用户设置或监听用户设置变化。
///
/// 控制器将数据服务与Flutter Widgets连接起来。SettingsController使用SettingsService来存储和检索用户设置。
class SettingsController extends ScreenController {

  SettingsController(super.state);

  // 将SettingsService设为私有变量，以便不直接使用。
  late final SettingsService _settingsService;

  // 将ThemeMode设为私有变量，以便不直接更新，除非也使用SettingsService持久化更改。
  late ThemeMode _themeMode;

  // 允许Widgets读取用户首选的主题模式。
  ThemeMode get themeMode => _themeMode;

  // 在此方法中执行不需要UI更新的早期初始化。
  [@override](/user/override)
  void onInit() {
    _settingsService = SettingsService();
  }

  // 在此方法中执行将更新UI的初始化。
  [@override](/user/override)
  void onReady() {
    _loadSettings();
  }

  /// 从SettingsService加载用户的设置。它可能从本地数据库或互联网加载。控制器只知道可以从服务中加载设置。
  Future<void> _loadSettings() async {
    _themeMode = await _settingsService.themeMode();

    // 重要！通知屏幕已发生更改。
    refreshUI();
  }

  /// 基于用户的选择更新并持久化主题模式。
  Future<void> updateThemeMode(ThemeMode? newThemeMode) async {
    if (newThemeMode == null) return;

    // 如果新旧主题模式相同，则不执行任何工作
    if (newThemeMode == _themeMode) return;

    // 否则，在内存中存储新的主题模式
    _themeMode = newThemeMode;

    // 重要！通知屏幕已发生更改。
    refreshUI();

    // 使用SettingService通过本地数据库或互联网持久化更改。
    await _settingsService.updateThemeMode(newThemeMode);
  }
}

然后在您的屏幕中使用它：

SettingsScreen

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});

  static const routeName = '/settings';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        // 粘贴SettingsController。
        //
        // 当用户从下拉列表中选择主题时，SettingsController将被更新，这将重建由控制器包裹的部分屏幕。
        child: ScreenControllerBuilder( // 不要忘记包装小部件
          create: SettingsController.new, // 添加您的控制器
          builder: (context, controller) => DropdownButton<ThemeMode>(
          // 从控制器中读取选定的主题模式
          value: controller.themeMode,
          // 用户每次选择主题时调用updateThemeMode方法。
          onChanged: controller.updateThemeMode,
          items: const [
            DropdownMenuItem(
              value: ThemeMode.system,
              child: Text('System Theme'),
            ),
            DropdownMenuItem(
              value: ThemeMode.light,
              child: Text('Light Theme'),
            ),
            DropdownMenuItem(
              value: ThemeMode.dark,
              child: Text('Dark Theme'),
            )
          ],
        ),
        ),
      ),
    );
  }
}