Flutter表单字段管理插件forme_fields的使用

forme_fields 是一个用于简化 Flutter 表单字段管理的插件。它提供了多种表单字段组件，例如自动完成输入框、异步自动完成输入框、评分栏等。以下是该插件支持的字段及其返回值和是否可为空的列表：

目前支持的字段

完整示例代码

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 forme_fields 插件。

import 'package:flutter/material.dart';
import 'package:forme/forme.dart'; // 导入 forme_fields 插件

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 表单示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter 表单示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FormeKey key = FormeKey(); // 创建一个 FormeKey 用于管理表单状态

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Forme(
          key: key, // 将 FormeKey 绑定到 Forme 组件
          child: Column(
            children: [
              // 使用 FormeAutocomplete 示例
              FormeAutocomplete<String>(
                name: 'autocomplete', // 字段名称
                decoration: InputDecoration(labelText: '自动完成输入框'),
              ),

              // 使用 FormeAsyncAutocomplete 示例
              FormeAsyncAutocomplete<String>(
                name: 'async_autocomplete',
                decoration: InputDecoration(labelText: '异步自动完成输入框'),
                optionsBuilder: (textEditingValue) async {
                  // 模拟异步数据获取
                  await Future.delayed(Duration(seconds: 1));
                  return ['选项1', '选项2', '选项3'];
                },
              ),

              // 使用 FormeRatingBar 示例
              FormeRatingBar(
                name: 'rating_bar',
                decoration: InputDecoration(labelText: '评分栏'),
              ),

              // 使用 FormePinCodeTextField 示例
              FormePinCodeTextField(
                name: 'pin_code',
                decoration: InputDecoration(labelText: 'PIN 码输入框'),
              ),

              // 使用 FormeSpinNumberField 示例
              FormeSpinNumberField(
                name: 'spin_number',
                decoration: InputDecoration(labelText: '数字选择器'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码说明

1. 导入插件：

   import 'package:forme/forme.dart';

   引入 forme_fields 插件。

2. 创建 FormeKey：

   FormeKey key = FormeKey();

   FormeKey 用于管理表单的状态。

3. 使用 Forme 组件：

   Forme(
     key: key,
     child: Column(
       children: [
         FormeAutocomplete<String>(...),
         FormeAsyncAutocomplete<String>(...),
         FormeRatingBar(...),
         FormePinCodeTextField(...),
         FormeSpinNumberField(...),
       ],
     ),
   )