Flutter命令执行插件simple_command的使用

简介

simple_command 是一个简单的 Flutter 包，用于将方法执行包装在 Command 对象中。

同步命令

RelayCommand

这些命令包装了一个同步方法并执行它。

import 'package:simple_command/commands.dart';

final RelayCommand<void> loginCommand = RelayCommand.withoutParam(_onLogin);

void _onLogin() { }

// 调用命令
loginCommand.call();

// 或者直接调用
loginCommand();

你也可以传递参数：

final RelayCommand<String> loginCommand = RelayCommand.withParam(_onLogin);

void _onLogin(String a) { }

// 调用命令并传递参数
loginCommand.call("someParam");

// 或者直接调用并传递参数
loginCommand("someParam");

TwoWayCommand

如果你想让命令返回一个值，可以使用这个命令。

final TwoWayCommand<void, String> loginCommand = TwoWayCommand.withoutParam(_onLogin);

String _onLogin() {
  return 'some result';
}

// 调用命令并获取返回值
final result = loginCommand();

你也可以传递参数：

final TwoWayCommand<Object, String> loginCommand = TwoWayCommand.withParam(_onLogin);

String _onLogin(Object param) {
  return param.toString();
}

// 调用命令并传递参数
final result = loginCommand(someParam);

异步命令

AsyncRelayCommand

这些命令包装了一个异步方法并执行它。

import 'package:simple_command/commands.dart';

final AsyncRelayCommand<void> loginCommand = AsyncRelayCommand.withoutParam(_onLogin);

Future<void> _onLogin() async { }

// 调用命令
await loginCommand.call();

// 或者直接调用
await loginCommand();

你也可以传递参数：

final AsyncRelayCommand<String> loginCommand = AsyncRelayCommand.withParam(_onLogin);

Future<void> _onLogin(String param) async { }

// 调用命令并传递参数
await loginCommand.call(someParam);

// 或者直接调用并传递参数
await loginCommand(someParam);

AsyncTwoWayCommand

如果你想让命令返回一个值，可以使用这个命令。

final AsyncTwoWayCommand<void, String> loginCommand = AsyncTwoWayCommand.withoutParam(_onLogin);

Future<String> _onLogin() async {
  return 'some result';
}

// 调用命令并获取返回值
final result = await loginCommand();

你也可以传递参数：

final AsyncTwoWayCommand<String, String> loginCommand = AsyncTwoWayCommand.withParam(_onLogin);

Future<String> _onLogin(String param) async {
  return 'some result';
}

// 调用命令并传递参数
final result = await loginCommand(someParam);

其他特性

禁用命令

你可以通过设置 canExecute 的值来禁用命令的执行：

final RelayCommand<void> loginCommand = RelayCommand.withoutParam(...);

loginCommand.canExecute.value = false;

检查异步命令是否完成

你可以通过检查 isExecuting 的值来判断一个异步命令是否正在执行。这对于在命令执行时显示加载指示器非常有用：

final AsyncRelayCommand<void> loginCommand = AsyncRelayCommand.withParam(...);

ElevatedButton(
  onPressed: loginCommand,
  child: ValueListenableBuilder<bool>(
    valueListenable: loginCommand.isExecuting,
    builder: (context, isExecuting, _) {
      if (isExecuting) {
        return SizedBox(
          height: 24,
          width: 24,
          child: CircularProgressIndicator(),
        );
      }

      return const Text('Login');
    },
  ),
);

注意事项

传递空参数给非空参数接受命令

final RelayCommand<String> command = RelayCommand.withParam(_onExecute);

// 错误的方式
void _onExecute(String param) { }

// 这将会抛出错误
command.call(null);

// 正确的方式
void _onExecute(String? param) { }

禁用返回值的异步命令

当你将 isExecuting 设置为 false 时，调用返回值的异步命令将会返回 null。

完整示例

以下是一个完整的示例，展示了如何使用 simple_command 包。

import 'package:flutter/material.dart';
import 'package:simple_command/commands.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;
  final MyHomeViewModel viewModel = MyHomeViewModel();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            ValueListenableBuilder<int>(
              valueListenable: viewModel.counter,
              builder: (context, counter, child) {
                return Text(
                  '$counter',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          FloatingActionButton(
            onPressed: viewModel.incrementCounterCommand,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
          FloatingActionButton(
            onPressed: viewModel.decrementCounterCommand,
            tooltip: 'Decrement',
            child: const Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

class MyHomeViewModel {
  final ValueNotifier<int> counter = ValueNotifier(0);

  late final RelayCommand incrementCounterCommand = RelayCommand.withoutParam(_incrementCounter);

  late final RelayCommand decrementCounterCommand = RelayCommand.withoutParam(_decrementCounter);

  void _incrementCounter() {
    counter.value++;

    if (counter.value > 4) {
      incrementCounterCommand.canExecute.value = false;
    } else {
      decrementCounterCommand.canExecute.value = true;
    }
  }

  void _decrementCounter() {
    counter.value--;

    if (counter.value <= 5 && counter.value > 0) {
      incrementCounterCommand.canExecute.value = true;
    } else {
      decrementCounterCommand.canExecute.value = false;
    }
  }
}