Flutter表单构建插件form_builder_phone_field的使用

简介

form_builder_phone_field 是一个为 flutter_form_builder 包提供的国际电话号码字段组件。它允许用户选择国家代码，并自动解析国际格式的电话号码。

特性

• 国家选择器：提供了一个国家选择器，用户可以选择其电话号码所属的国家。
• 自动解析国际号码：能够自动解析和格式化国际电话号码。

使用方法

配置依赖

首先，在 pubspec.yaml 文件中添加 form_builder_phone_field 和 phone_number 依赖：

dependencies:
  flutter:
    sdk: flutter
  form_builder_phone_field: ^latest_version
  phone_number: ^latest_version

确保你已经配置了 phone_number 的依赖，详情可以参考 这里。

基本用法

下面是一个简单的示例，展示了如何在Flutter应用程序中使用 FormBuilderPhoneField 组件：

完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:form_builder_phone_field/form_builder_phone_field.dart';
import 'package:form_builder_validators/form_builder_validators.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // Locale config required by form_builder_validators
      supportedLocales: FormBuilderLocalizations.supportedLocales,
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        FormBuilderLocalizations.delegate,
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final _formKey = GlobalKey<FormBuilderState>();

  MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("FormBuilderPhoneField")),
      body: FormBuilder(
        key: _formKey,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FormBuilderPhoneField(
                name: 'phone_number',
                decoration: const InputDecoration(
                  labelText: 'Phone Number',
                  hintText: 'Hint',
                ),
                priorityListByIsoCode: const ['KE'], // 设置优先显示的国家代码列表
                validator: FormBuilderValidators.compose([
                  FormBuilderValidators.numeric(), // 确保输入的是数字
                  FormBuilderValidators.required(), // 必填项验证
                ]),
              ),
              const SizedBox(height: 15),
              FormBuilderPhoneField(
                name: 'phone_number_cupertino',
                isCupertinoPicker: true, // 使用 Cupertino 风格的选择器
                decoration: const InputDecoration(
                  labelText: 'Phone Number',
                  hintText: 'Hint',
                ),
                priorityListByIsoCode: const ['US'], // 设置优先显示的国家代码列表
                validator: FormBuilderValidators.compose([
                  FormBuilderValidators.numeric(), // 确保输入的是数字
                  FormBuilderValidators.required(), // 必填项验证
                ]),
              ),
              const SizedBox(height: 15),
              Wrap(
                spacing: 16,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      if (_formKey.currentState!.saveAndValidate()) {
                        debugPrint(_formKey.currentState!.value.toString()); // 打印表单数据
                      }
                    },
                    child: const Text("Submit"),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      _formKey.currentState?.reset(); // 重置表单
                      debugPrint(_formKey.currentState!.instantValue.toString()); // 打印即时值
                    },
                    child: const Text("Reset"),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

参数说明

• name: 表单字段的名称，用于标识该字段。
• decoration: 输入框的装饰样式，包括标签、提示文本等。
• priorityListByIsoCode: 优先显示的国家代码列表，默认为空。
• validator: 表单验证规则，可以组合多个验证器。
• isCupertinoPicker: 是否使用Cupertino风格的选择器，默认为false。

支持与贡献

贡献方式

• 初级：报告bug或提出新功能请求。
• 中级：实现新功能并创建pull request。
• 高级：加入组织成为成员，帮助编码、管理问题、讨论新功能等。

更多贡献指南可以参考 contribution guide。

问题与答案

如果你有任何问题，可以在 Github discussion 或 StackOverflow 上提问或搜索答案。

捐赠

你可以通过 OpenCollective 成为赞助商或捐赠者，支持Flutter Form Builder Ecosystem的发展。

发展路线图

当前的主要开发计划包括：

• 添加完整的Web支持。
• 提供更多的视觉示例（如图片、GIF、视频、示例应用）。
• 解决已有的开放问题，并优先处理bug。

生态系统

更多关于Flutter Form Builder Ecosystem的信息，请访问 我们的GitHub仓库。

感谢所有为 form_builder_phone_field 做出贡献的人们！