Flutter联系人表单插件mb_contact_form的使用

当然，下面是一个关于如何在Flutter项目中使用mb_contact_form插件的示例代码。这个插件允许你创建一个联系人表单，用户可以输入他们的姓名、电话、电子邮件等信息。

首先，你需要在你的pubspec.yaml文件中添加mb_contact_form依赖：

dependencies:
  flutter:
    sdk: flutter
  mb_contact_form: ^latest_version  # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用这个插件。下面是一个完整的示例代码，展示了如何创建一个包含联系人表单的页面：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Contact Form Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ContactFormPage(),
    );
  }
}

class ContactFormPage extends StatefulWidget {
  @override
  _ContactFormPageState createState() => _ContactFormPageState();
}

class _ContactFormPageState extends State<ContactFormPage> {
  final _formKey = GlobalKey<FormState>();

  // 用于存储表单数据
  final _nameController = TextEditingController();
  final _phoneController = TextEditingController();
  final _emailController = TextEditingController();

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();

      // 打印表单数据
      print('Name: ${_nameController.text}');
      print('Phone: ${_phoneController.text}');
      print('Email: ${_emailController.text}');

      // 你可以在这里添加提交表单的逻辑，比如发送到服务器
      // ...

      // 清空表单
      _nameController.clear();
      _phoneController.clear();
      _emailController.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contact Form'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              ContactFormField(
                labelText: 'Name',
                controller: _nameController,
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Name is required';
                  }
                  return null;
                },
              ),
              ContactFormField(
                labelText: 'Phone',
                controller: _phoneController,
                keyboardType: TextInputType.phone,
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Phone is required';
                  }
                  return null;
                },
              ),
              ContactFormField(
                labelText: 'Email',
                controller: _emailController,
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Email is required';
                  }
                  // 你可以添加更复杂的电子邮件验证逻辑
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submitForm,
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 自定义 ContactFormField 组件，使用 mb_contact_form 插件（假设插件提供了类似的组件）
// 注意：mb_contact_form 插件的具体用法可能有所不同，这里是一个假设的示例
class ContactFormField extends StatelessWidget {
  final String labelText;
  final TextEditingController controller;
  final TextInputType keyboardType;
  final FormFieldValidator<String> validator;

  const ContactFormField({
    required this.labelText,
    required this.controller,
    this.keyboardType = TextInputType.text,
    this.validator,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 注意：以下代码是假设 mb_contact_form 插件有一个类似的组件，实际情况可能不同
    // 如果插件没有提供类似的组件，你可能需要自己实现一个 TextFormField
    return TextFormField(
      labelText: labelText,
      controller: controller,
      keyboardType: keyboardType,
      validator: validator,
      decoration: InputDecoration(
        border: OutlineInputBorder(),
      ),
    );
  }
}

注意：

1. mb_contact_form插件的具体用法可能有所不同，上述代码中的ContactFormField是一个假设的组件，用于展示如何集成表单字段。如果插件没有提供类似的组件，你可能需要自己实现一个TextFormField。

2. 插件的最新版本和API可能会有所变化，请参考插件的官方文档和示例代码来确保正确集成。

3. 在实际项目中，你可能需要添加更多的表单字段和验证逻辑，以及处理表单提交的后端逻辑。