Flutter动态表单构建插件flutter_dynamic_forms_components的使用

flutter_dynamic_forms_components

flutter_dynamic_forms_components 是一个用于 Flutter 的项目，其中包含 flutter_dynamic_forms 库的默认组件集。

大多数组件都是通过 dynamic_forms_generator 生成的。

注意：在 IDE 中运行 flutter packages pub run build_runner build 后，示例项目可能无法正常工作。您可以通过删除 .dart_tool 文件夹来解决此问题。

完整示例代码

以下是一个完整的示例代码，演示如何使用 flutter_dynamic_forms_components 插件创建动态表单。

import 'package:example/advanced_expression_form/advanced_expression_form.dart';
import 'package:example/custom_expression_form/custom_expression_form.dart';
import 'package:example/simple_submit_form/simple_submit_form.dart';
import 'package:flutter_dynamic_forms/flutter_dynamic_forms.dart';
import 'package:dynamic_forms/dynamic_forms.dart';
import 'package:example/simple_form/simple_form_xml.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_dynamic_forms_components/flutter_dynamic_forms_components.dart' as components;
import 'package:flutter/material.dart';
import 'package:example/bloc_dynamic_form/dynamic_form_bloc.dart';
import 'package:example/bloc_dynamic_form/dynamic_form_screen.dart';
import 'package:example/simple_form/simple_form_json.dart';
import 'package:example/transition_form/transition_form_bloc.dart';
import 'package:example/transition_form/transition_form_builder.dart';
import 'package:example/transition_form/transition_form_screen.dart';

import 'bloc_dynamic_form/custom_form_manager.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WelcomeScreen(),
    );
  }
}

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

  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SimpleFormXml(),
                  ),
                );
              },
              child: Text('简单XML表单'),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 16),
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => SimpleFormJson(),
                    ),
                  );
                },
                child: Text('简单JSON表单'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 16),
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => SimpleSubmitForm(),
                    ),
                  );
                },
                child: Text('简单提交表单'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 16),
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => CustomExpressionForm(),
                    ),
                  );
                },
                child: Text('自定义表达式表单'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 16),
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => AdvancedExpressionForm(),
                    ),
                  );
                },
                child: Text('高级表达式表单'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 16),
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => FormProvider(
                        create: (_) => CustomFormManager(),
                        child: BlocProvider(
                          create: (context) {
                            return DynamicFormBloc(
                                FormProvider.of<CustomFormManager>(context));
                          },
                          child: DynamicFormScreen(),
                        ),
                      ),
                    ),
                  );
                },
                child: Text('带Bloc的动态表单'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 16),
              child: ElevatedButton(
                onPressed: () {
                  var formBuilder = FormBuilder(
                    XmlFormParserService(
                      components.getDefaultParserList(),
                    ),
                  );
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => BlocProvider(
                        create: (context) {
                          return TransitionFormBloc(
                            formBuilder,
                            TransitionFormBuilder(formBuilder),
                          );
                        },
                        child: TransitionFormScreen(),
                      ),
                    ),
                  );
                },
                child: Text('过渡动态表单'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}