Flutter定时任务表单插件cron_form_field的使用

简介

cron_form_field 是一个用于Flutter应用程序的Dart包，允许您在表单中编辑Cron表达式。这个表单字段可以通过弹出对话框的方式提供给用户友好的界面来编辑Cron表达式，并支持标准和Quartz Cron表达式的允许值和替代值。

版本信息

如果您觉得这个插件对您有帮助，也可以考虑支持开发者 Buy Me A Coffee

使用方法

添加依赖

在您的Flutter项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  ...
  cron_form_field: "^0.7.0"

然后，在您的库中添加如下导入语句：

import 'package:cron_form_field/cron_form_field.dart';

示例代码

下面是一个完整的示例demo，展示了如何使用cron_form_field创建一个可以输入和验证Cron表达式的表单。

import 'package:flutter/material.dart';
import 'package:cron_form_field/cron_form_field.dart';
import 'package:cron_form_field/cron_expression.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter CronFormField Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  TextEditingController? _controller;
  String _valueChanged = '';
  String _valueToValidate = '';
  String _valueSaved = '';

  @override
  void initState() {
    super.initState();

    _controller = TextEditingController(text: '1 0 0 ? * * *');

    _setDelayedValue();
  }

  /// 模拟从数据库或API加载数据的行为
  Future<void> _setDelayedValue() async {
    await Future.delayed(const Duration(seconds: 3), () {
      setState(() {
        _controller?.text = '7 0-5 0 ? * * *';
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter CronFormField Demo'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.only(left: 20, right: 20, top: 10),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              CronFormField(
                controller: _controller,
                labelText: 'Schedule',
                onChanged: (val) => setState(() => _valueChanged = val),
                validator: (val) {
                  setState(() => _valueToValidate = val ?? '');

                  return null;
                },
                onSaved: (val) => setState(() => _valueSaved = val ?? ''),
              ),
              const SizedBox(height: 30),
              const Text(
                'CronFormField data readable value:',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 10),
              Text(CronExpression.fromString(_valueChanged).toReadableString()),
              const SizedBox(height: 30),
              const Text(
                'CronFormField data value onChanged:',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 10),
              Text(_valueChanged),
              const SizedBox(height: 30),
              ElevatedButton(
                onPressed: () {
                  final formState = _formKey.currentState;

                  if (formState?.validate() == true) {
                    formState?.save();
                  }
                },
                child: const Text('Submit'),
              ),
              const SizedBox(height: 30),
              const Text(
                'CronFormField data value validator:',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 10),
              Text(_valueToValidate),
              const SizedBox(height: 30),
              const Text(
                'CronFormField data value onSaved:',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 10),
              Text(_valueSaved),
              const SizedBox(height: 30),
              ElevatedButton(
                onPressed: () {
                  final formState = _formKey.currentState;
                  formState?.reset();

                  setState(() {
                    _valueChanged = '';
                    _valueToValidate = '';
                    _valueSaved = '';
                    _controller?.clear();
                  });
                },
                child: const Text('Reset'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

预览

Bug 或者需求

如果您遇到任何问题，请随时打开一个issue。如果您觉得缺少某些功能，也欢迎提交一个ticket。当然，Pull request也是十分欢迎的。

开发者

Dániel Sipos

赞助商

该项目得到了TrophyMap，I18Nature，以及其他一些组织的慷慨支持。