Question

我正在寻找使用提供者和riverpod转换表单代码的方法。我首先把我的功能代码放到后面，然后再把我要与提供程序一起使用的代码放到第二部分。

第一部分--------------------------------------- ---------------------------------------

所以我的基本代码是由：

计算器屏幕：

class CalculatorScreen extends StatefulWidget
{
  CalculatorScreen({Key key}) : super(key: key);

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

class _CalculatorScreenState extends State<CalculatorScreen>
{
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final _formKey = GlobalKey<FormState>();

  FormCalculatorModel _formData = FormCalculatorModel();
  bool _autoValidateForm = false;

  final TextEditingController _controllerDistance = TextEditingController();

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

  @override
  void dispose()
  {
    _controllerDistance.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context)
  {
    return GestureDetector(
      onTap: (() => FocusScope.of(context).requestFocus(FocusNode())),
      child: Scaffold(
          key: _scaffoldKey,
          backgroundColor: AppColors.colorBgDark,
          body : _buildBody()
      ),
    );
  }

  Widget _buildBody()
  {
    return SingleChildScrollView(
      child: Column(
        children: [
          Form(
            key: _formKey,
            autovalidate: _autoValidateForm,
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  TextFormField(
                    controller: _controllerDistance,
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                      hintText: "Enter a value",
                    ),
                    validator: (value){
                      return FormValidatorService.isDistanceValid(value);
                    },
                    onSaved: (var value) {
                      _formData.distance = num.tryParse(value).round();
                    },
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Expanded(
                        child: FlatButton(
                            child: Text("Erase"),
                            onPressed: _buttonResetAction
                        ),
                      ),
                      Expanded(
                        child: FlatButton(
                            child: Text("Send"),
                            onPressed: _buttonSubmitAction
                        ),
                      ),
                    ],
                  ),
                ]
            ),
          ),
        ],
      ),
    );
  }

  void _buttonResetAction()
  {
    _eraseForm();
  }

  void _eraseForm(){
    setState(() {
      _formKey.currentState.reset();
      _formData = FormCalculatorModel();
      _autoValidateForm = false;
      _controllerDistance.clear();
    });
  }

  void _buttonSubmitAction() async
  {
    if (!_formKey.currentState.validate()) {
      setState(() {
        _autoValidateForm = true;
      });
      return;
    }
    _formKey.currentState.save();

    try{
      // some actions
    }catch(e){
      _eraseForm();
      print(e.toString());
    }
  }
}

这是我的formModel （此模型包含我可以填写表格的所有字段，并允许我在验证后存储表格的值，然后使用这些值进行计算）


class FormCalculatorModel{
  int distance;

  FormCalculatorModel({
    this.distance,
 
  });

  @override
  String toString() {
    return '{ '
        '${this.distance}, '
    '}';
  }

}

和我的FormValidatorService：

class FormValidatorService{

  static String isDistanceValid(String value)
  {
    num _distance = num.tryParse(value);
    if (_distance == null) {
      return "is required";
    }
    if (_distance < 200) {
      return "Min distance is 200";
    }
    if (_distance > 1000) {
      return "Max dist is 1000";
    }
    return null;
  }
}

第二部分--------------------------------------- ---------------------------------------

在这一部分中，我尝试使用提供商重做表单。我遇到一个严重错误，该错误告诉我：“方法validate是在null上调用的”

计算器屏幕：

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

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

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

class _CalculatorScreenState extends State<CalculatorScreen>
{
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (() => FocusScope.of(context).requestFocus(FocusNode())),
      child: Scaffold(
          body : SingleChildScrollView(
            child: Column(
              children: [
                const TitleWidget(),
                ContainerComponent(
                  background: AppColors.colorBgLight,
                  children: [
                    CalculatorFormWidget(),
                    ButtonComponent.primary(
                      text: "Calculer",
                      context: context,
                      onPressed : context.read(formCalculatorProvider).submitData(),
                    ),
                  ],
                )
              ],
            ),
          ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const TitleComponent(
      title: "Calcul",
      description: "Enter your parameters",
    );
  }
}

class CalculatorFormWidget extends HookWidget{
  const CalculatorFormWidget({Key key}): super(key : key);

  @override
  Widget build(BuildContext context) {

    final _controllerDistance = useTextEditingController();
    final _formModel = useProvider(formCalculatorProvider.state);
    FormCalculatorModel _formData = FormCalculatorModel();

    return Form(
      key : useProvider(formCalculatorProvider).formKey,
      autovalidate: _formModel.autoValidate,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            decoration: InputDecoration(
              labelText: "Distance",
            ),
            controller: _controllerDistance,
            validator: (String value){
              return FormValidatorService.isDistanceValid(value);
            },
          ),
        ],
      ),
    );
  }
}

FormCalculatorNotifier：

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

enum EnumFormState
{
  EMPTY,
  SUCCESS,
  ERROR
}

class FormDataCalculatorModel {
  const FormDataCalculatorModel({
    this.distance,
  });

  final int distance;
}

class FormCalculatorModel {
  const FormCalculatorModel({
    this.formState,
    this.autoValidate,
    this.formData,
    this.formKey
  });

  final EnumFormState formState;
  final bool autoValidate;
  final FormDataCalculatorModel formData;
  final GlobalKey<FormState> formKey;
}

class FormCalculatorNotifier extends StateNotifier<FormCalculatorModel>
{
  FormCalculatorNotifier() : super(_initial);

  static const EnumFormState _initialState = EnumFormState.EMPTY;
  //static const ValidationItem _initialItem = ValidationItem(value : null, error : null);
  static const _initial = FormCalculatorModel(
      formState : _initialState,
      autoValidate: false,
      formData: FormDataCalculatorModel(),
  );

  GlobalKey<FormState> get formKey => GlobalKey<FormState>();

   submitData(){
     if (!formKey.currentState.validate()) {
       return;
     }
     formKey.currentState.save();
  }
}

提供者：

final formCalculatorProvider = StateNotifierProvider((ref) => FormCalculatorNotifier());

提供程序中的Flutter使用表格方法

0 个答案: