Flutter状态管理插件stacked_hooks的使用

Stacked Hooks简介

Stacked Hooks 是一个包含小部件的软件包，允许您在 Stacked 架构中使用Flutter Hooks包。通过将Flutter Hooks与Stacked架构中的StackedView结合使用，您可以更方便地管理和操作状态。

StackedHookView

StackedView 是一个返回由Provider提供的值作为参数的小部件类实现，这使得ViewModel的消费和使用更加容易，而无需样板代码。StackedHookView允许您在这个小部件内部使用Flutter Hooks，特别适用于需要使用TextEditing控制器的情况。

// View that creates and provides the viewmodel
class StackedHookViewExample extends StackedView<HomeViewModel> {
  const StackedHookViewExample({Key key}) : super(key: key);

  @override
  Widget builder(BuildContext context, HomeViewModel model, Widget? child) {
    return Scaffold(
      body: Center(child: _HookForm()),
    );
  }

  @override
  HomeViewModel modelBuilder(BuildContext context) {
    return HomeViewModel();
  }
}

// Form that makes use of the ViewModel provided above but also makes use of hooks
class _HookForm extends StackedHookView<HomeViewModel> {
  @override
  Widget buildStackedView(BuildContext context, HomeViewModel model) {
    final title = useTextEditingController();
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text(model.title),
        TextField(controller: title, onChanged: model.updateTitle),
      ],
    );
  }
}

// ViewModel
class HomeViewModel extends BaseViewModel {
  String title = 'default';

  void updateTitle(String value) {
    title = value;
    notifyListeners();
  }
}

完整示例Demo

为了更好地理解如何在实际项目中使用Stacked Hooks，以下是一个完整的示例demo，该示例展示了如何创建一个简单的应用程序，并使用Stacked Hooks进行状态管理。

示例代码

主文件（main.dart）

首先，我们需要设置应用程序的基本结构，包括初始化依赖注入、设置对话框UI和底部表单UI等。

import 'package:flutter/material.dart';
import 'package:stacked_hooks_example/ui/common/app_colors.dart';
import 'package:stacked_hooks_example/ui/setup/setup_bottom_sheet_ui.dart';
import 'package:stacked_hooks_example/ui/setup/setup_dialog_ui.dart';
import 'package:stacked_services/stacked_services.dart';

import 'app/app.locator.dart';
import 'app/app.router.dart';

void main() {
  setupLocator();
  setupDialogUi();
  setupBottomSheetUi();

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: Theme.of(context).copyWith(
        primaryColor: kcBackgroundColor,
        focusColor: kcPrimaryColor,
        textTheme: Theme.of(context).textTheme.apply(
              bodyColor: Colors.black,
            ),
      ),
      initialRoute: Routes.startupView,
      onGenerateRoute: StackedRouter().onGenerateRoute,
      navigatorKey: StackedService.navigatorKey,
    );
  }
}

视图模型（HomeViewModel）

接下来，我们定义一个视图模型来管理应用程序的状态。

class HomeViewModel extends BaseViewModel {
  String title = 'default';

  void updateTitle(String value) {
    title = value;
    notifyListeners();
  }
}

视图（StackedHookViewExample）

然后，我们创建一个视图来显示内容并提供视图模型。

class StackedHookViewExample extends StackedView<HomeViewModel> {
  const StackedHookViewExample({Key key}) : super(key: key);

  @override
  Widget builder(BuildContext context, HomeViewModel model, Widget? child) {
    return Scaffold(
      appBar: AppBar(title: Text('Stacked Hooks Example')),
      body: Center(child: _HookForm()),
    );
  }

  @override
  HomeViewModel modelBuilder(BuildContext context) {
    return HomeViewModel();
  }
}

表单（_HookForm）

最后，我们创建一个表单组件，它将使用Hooks来管理文本编辑控制器，并与视图模型交互以更新状态。

class _HookForm extends StackedHookView<HomeViewModel> {
  @override
  Widget buildStackedView(BuildContext context, HomeViewModel model) {
    final titleController = useTextEditingController();
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text(model.title),
        TextField(
          controller: titleController,
          onChanged: model.updateTitle,
          decoration: InputDecoration(labelText: 'Enter Title'),
        ),
      ],
    );
  }
}

总结

通过以上步骤，我们已经创建了一个完整的示例应用程序，展示了如何使用Stacked Hooks进行状态管理。Stacked Hooks使您能够在Stacked架构中充分利用Flutter Hooks的强大功能，从而简化状态管理和UI构建过程。希望这个示例能够帮助您更好地理解和应用Stacked Hooks。