Flutter表单构建插件form_builder_cupertino_fields的使用

form_builder_cupertino_fields 是一个为 flutter_form_builder 包提供额外的Cupertino风格输入字段的插件。本文将介绍如何使用这个插件来创建带有Cupertino样式的表单。

特性

• 使用 FormBuilderField 逻辑实现Cupertino风格的字段。
• 仅依赖于Cupertino组件，不包含Material组件的导入。

支持的输入字段

目前支持的字段包括：

• FormBuilderCupertinoCheckbox - 单个复选框字段
• FormBuilderCupertinoSegmentedControl - 使用 CupertinoSegmentedControl 的分段控制
• FormBuilderCupertinoSlidingSegmentedControl - 使用 CupertinoSlidingSegmentedControl 的分段控制条
• FormBuilderCupertinoSlider - 在滑块上选择数值
• FormBuilderCupertinoSwitch - 开关字段
• FormBuilderCupertinoTextField - 文本输入字段

使用方法

设置

无需特别设置，只需安装依赖并使用即可。

基本使用示例

以下是一个基本的使用示例，展示如何在Flutter应用中使用 form_builder_cupertino_fields 插件。

完整示例代码

import 'package:flutter/cupertino.dart';
import 'package:form_builder_cupertino_fields/form_builder_cupertino_fields.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'Form Builder Cupertino Fields',
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: MyHomePage(title: 'Form Builder Cupertino Fields'),
    );
  }
}

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

  final String title;

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

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

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: FormBuilder(
            key: _formKey,
            child: Column(
              children: [
                FormBuilderCupertinoCheckbox(
                  name: 'checkbox',
                  prefix: const Text('Select/Unselect'),
                ),
                const SizedBox(height: 16),
                FormBuilderCupertinoSegmentedControl<int>(
                  name: 'segmented_control',
                  shouldExpandedField: true,
                  autovalidateMode: AutovalidateMode.always,
                  options: const [
                    FormBuilderFieldOption(value: 1, child: Text('First')),
                    FormBuilderFieldOption(value: 2, child: Text('Second')),
                    FormBuilderFieldOption(value: 3, child: Text('Third')),
                  ],
                  prefix: const Icon(CupertinoIcons.add),
                  validator: (value) => value != null ? null : 'Required field',
                ),
                const SizedBox(height: 16),
                FormBuilderCupertinoSlidingSegmentedControl<String>(
                  name: 'segmented_sliding_control',
                  options: const [
                    FormBuilderFieldOption(value: '1', child: Text('1')),
                    FormBuilderFieldOption(value: '2', child: Text('2')),
                    FormBuilderFieldOption(value: '3', child: Text('3')),
                  ],
                  helper: const Text('Select the numbers'),
                  prefix: const Icon(CupertinoIcons.number),
                ),
                const SizedBox(height: 16),
                FormBuilderCupertinoSwitch(
                  name: 'switch',
                  initialValue: true,
                  prefix: const Text('Enable/Disabled'),
                ),
                const SizedBox(height: 16),
                FormBuilderCupertinoSlider(
                  name: 'slider',
                  initialValue: 10,
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  min: 1,
                  max: 100,
                  validator: (value) => value != null && value < 50 && value > 5
                      ? null
                      : 'Required value between 5 and 50',
                ),
                const SizedBox(height: 16),
                FormBuilderCupertinoTextField(
                  name: 'text',
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: CupertinoColors.black,
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  validator: (value) =>
                      value != null && value.length > 4 ? null : 'Write a text',
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何在Flutter应用中使用 form_builder_cupertino_fields 插件创建一个带有多种Cupertino风格输入字段的表单。通过这种方式，您可以轻松地在iOS风格的应用中集成这些表单元素。

更多详细信息和示例代码可以查看 pub.dev 或 GitHub 上的示例项目。