Flutter表单构建插件easydev_forms的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter表单构建插件easydev_forms的使用

easydev_forms

easydev_forms 是一个包含用于应用中输入信息的小部件的包，适用于使用 EasyDev UI Kit 的应用程序。

该包包括复选框、单选按钮、开关、选择器、多选器、滑块、范围滑块、代码输入、数字输入、日期选择器、日期范围选择器、日期输入和日期范围输入等组件。

安装

要使用此包，请在 pubspec.yaml 文件中添加 easydev_forms 作为依赖项。

dependencies:
  easydev_forms: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

使用

首先，在代码中导入包：

import "package:easydev_forms/easydev_forms.dart";

注意：所有 easydev_forms 的小部件都必须包装在 EasyDevTheme 中。您可以手动通过 EasyDevTheme（来自 easydev_theme 包）、Theme 或 CupertinoTheme 提供主题，或者将其包装在自动提供主题的小部件中，例如 EasyDevApp（来自 easydev_basics）、MaterialApp 或 CupertinoApp。

基础示例

EasyDevCheckbox

EasyDevCheckbox 允许用户从多个选项中同时进行选择，提供了一种方便的方式来表示偏好、选择或即将采取的操作。

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<int> selectedCheckboxValues = [];
  final int checkbox1Value = 1;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevCheckbox(
      selected: selectedCheckboxValues.contains(checkbox1Value),
      onSelect: (value) {
        setState(() {
          if (selectedCheckboxValues.contains(value)) {
            selectedCheckboxValues.remove(value);
          } else {
            selectedCheckboxValues.add(value);
          }
        });
      },
      value: checkbox1Value,
      label: 'Checkbox 1',
    );
  }
}
EasyDevRadioButton

EasyDevRadioButton 用于启用用户从一组选项中进行互斥选择。

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final int radio1Value = 1;
  int? selectedRadioValue;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevRadioButton(
      selected: selectedRadioValue == radio1Value,
      radioType: RadioType.classic,
      onSelect: (value) => setState(
        () => selectedRadioValue = selectedRadioValue == value ? null : value,
      ),
      value: radio1Value,
      label: 'Radio Button 1',
    );
  }
}
EasyDevSwitch

EasyDevSwitch 提供了一种方便的方式让用户在两种状态之间切换，例如打开或关闭某个功能。

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool switchValue = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevSwitch(
      value: switchValue,
      onSelect: (value) {
        setState(() {
          switchValue = !value;
        });
      },
      label: 'Switch',
    );
  }
}
EasyDevSelect

EasyDevSelect 允许用户从预定义的选项列表中进行选择，简化数据输入并减少错误。

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int? value;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevSelect<int>(
      withBottomSheet: true,
      selectedValue: value,
      values: List.generate(
        20,
        (index) => EasyDevSelectItem(
          value: index,
          name: 'Option ${index + 1}',
          enabled: index < 15,
        ),
      ),
      onSelected: (newValue) {
        setState(() {
          value = newValue;
        });
      },
      hint: 'Select option',
      label: 'Select',
    );
  }
}
EasyDevMultiSelect

EasyDevMultiSelect 允许用户从列表中高效选择多个选项，便于选择多样化的偏好或类别。

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<int> selectedValues = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevMultiSelect<int>(
      maxHeight: 400,
      selectedValues: selectedValues,
      items: List.generate(
        20,
        (index) => EasyDevMultiSelectItem(
          value: index,
          name: 'Option ${index + 1}',
          enabled: index < 15,
        ),
      ),
      valuesChanged: (newValue) {
        setState(() {
          selectedValues = newValue;
        });
      },
      hint: 'Select options',
      label: 'Multi Select',
    );
  }
}
EasyDevSlider

EasyDevSlider 提供了一种直观且交互的方式让用户调整数值范围内的数字值。

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  double _sliderValue = 0.5;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevSlider(
      title: 'Title',
      showLabel: true,
      showInput: true,
      inputPosition: SliderInputPosition.right,
      value: _sliderValue,
      onChanged: (double value) {
        setState(() {
          _sliderValue = value;
        });
      },
    );
  }
}
EasyDevRangeSlider

EasyDevRangeSlider 提供了让用户在指定区间内选择一个范围值的能力，实现对数值输入的精确控制。

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  RangeValue _sliderRangeValue = const RangeValue(0, 1);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevRangeSlider(
      value: _sliderRangeValue,
      title: 'Title',
      showInput: true,
      inputPosition: SliderInputPosition.top,
      onChanged: (RangeValue value) {
        setState(() {
          _sliderRangeValue = value;
        });
      },
    );
  }
}
EasyDevInputNumber

EasyDevInputNumber 提供了一个简单的数字输入小部件。

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevInputNumber(
      initialValue: 0,
      maxValue: 5,
      valueChanged: (int value) {},
    );
  }
}
EasyDevDatePicker

EasyDevDatePicker 提供了一个直观的界面供用户选择日期，确保准确输入并最小化日期相关任务中的错误。

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevDatePicker(
      endDate: DateTime(2050),
      initialDate: DateTime(2023),
      startDate: DateTime(1800),
      onCancelTap: () {},
      onOkTap: ((value) {}),
    );
  }
}
EasyDevDateRangePicker

EasyDevDateRangePicker 提供了一个直观的界面供用户选择日期范围，确保准确输入并最小化日期相关任务中的错误。

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevDateRangePicker(
      endDate: DateTime(2024, 12),
      startDate: DateTime(1800),
      initialDateRange: DateRange(
        start: DateTime(2024, 02, 10),
        end: DateTime(2024, 02, 20),
      ),
      onSelectTap: (value) {},
    );
  }
}
EasyDevDateInput 和 EasyDevDateRangeInput

这些是内置的日期输入小部件，可以用于输入日期。它们提供了日期格式化和验证。

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevDateInput(
      valueChanged: (String value) {},
      label: 'Date of birth',
      separator: '-',
      dateFormat: DateInputFormat.yyyyddMM(),
    );
  }
}
class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevDateRangeInput(
      startValueChanged: (String value) {},
      endValueChanged: (String value) {},
      startLabel: 'Start date',
      endLabel: 'End date',
    );
  }
}

完整示例

以下是一个完整的示例，展示了如何使用 easydev_forms 中的一些主要组件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('easydev_forms 示例')),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<int> selectedCheckboxValues = [];
  final int checkbox1Value = 1;
  int? selectedRadioValue;
  final int radio1Value = 1;
  bool switchValue = false;
  int? value;
  List<int> selectedValues = [];
  double _sliderValue = 0.5;
  RangeValue _sliderRangeValue = const RangeValue(0, 1);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          EasyDevCheckbox(
            selected: selectedCheckboxValues.contains(checkbox1Value),
            onSelect: (value) {
              setState(() {
                if (selectedCheckboxValues.contains(value)) {
                  selectedCheckboxValues.remove(value);
                } else {
                  selectedCheckboxValues.add(value);
                }
              });
            },
            value: checkbox1Value,
            label: 'Checkbox 1',
          ),
          SizedBox(height: 16),
          EasyDevRadioButton(
            selected: selectedRadioValue == radio1Value,
            radioType: RadioType.classic,
            onSelect: (value) => setState(
              () => selectedRadioValue = selectedRadioValue == value ? null : value,
            ),
            value: radio1Value,
            label: 'Radio Button 1',
          ),
          SizedBox(height: 16),
          EasyDevSwitch(
            value: switchValue,
            onSelect: (value) {
              setState(() {
                switchValue = !value;
              });
            },
            label: 'Switch',
          ),
          SizedBox(height: 16),
          EasyDevSelect<int>(
            withBottomSheet: true,
            selectedValue: value,
            values: List.generate(
              20,
              (index) => EasyDevSelectItem(
                value: index,
                name: 'Option ${index + 1}',
                enabled: index < 15,
              ),
            ),
            onSelected: (newValue) {
              setState(() {
                value = newValue;
              });
            },
            hint: 'Select option',
            label: 'Select',
          ),
          SizedBox(height: 16),
          EasyDevMultiSelect<int>(
            maxHeight: 400,
            selectedValues: selectedValues,
            items: List.generate(
              20,
              (index) => EasyDevMultiSelectItem(
                value: index,
                name: 'Option ${index + 1}',
                enabled: index < 15,
              ),
            ),
            valuesChanged: (newValue) {
              setState(() {
                selectedValues = newValue;
              });
            },
            hint: 'Select options',
            label: 'Multi Select',
          ),
          SizedBox(height: 16),
          EasyDevSlider(
            title: 'Title',
            showLabel: true,
            showInput: true,
            inputPosition: SliderInputPosition.right,
            value: _sliderValue,
            onChanged: (double value) {
              setState(() {
                _sliderValue = value;
              });
            },
          ),
          SizedBox(height: 16),
          EasyDevRangeSlider(
            value: _sliderRangeValue,
            title: 'Title',
            showInput: true,
            inputPosition: SliderInputPosition.top,
            onChanged: (RangeValue value) {
              setState(() {
                _sliderRangeValue = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

更多关于Flutter表单构建插件easydev_forms的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter表单构建插件easydev_forms的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


easydev_forms 是一个用于 Flutter 的插件，旨在简化表单的构建和管理。它提供了一些预定义的组件和工具，使得创建表单变得更加容易和高效。以下是如何使用 easydev_forms 插件来构建表单的基本步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  easydev_forms: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 easydev_forms 包：

import 'package:easydev_forms/easydev_forms.dart';

3. 创建表单

使用 EasyDevForm 组件来创建一个表单。你可以添加各种表单字段，如文本输入、选择器、开关等。

class MyForm extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EasyDev Form Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: EasyDevForm(
          children: [
            EasyDevTextField(
              label: 'Username',
              hintText: 'Enter your username',
              onChanged: (value) {
                print('Username: $value');
              },
            ),
            SizedBox(height: 16),
            EasyDevTextField(
              label: 'Password',
              hintText: 'Enter your password',
              obscureText: true,
              onChanged: (value) {
                print('Password: $value');
              },
            ),
            SizedBox(height: 16),
            EasyDevSwitch(
              label: 'Remember me',
              value: false,
              onChanged: (value) {
                print('Remember me: $value');
              },
            ),
            SizedBox(height: 16),
            EasyDevButton(
              text: 'Submit',
              onPressed: () {
                // Handle form submission
                print('Form submitted');
              },
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

现在你可以运行你的 Flutter 应用，并查看使用 easydev_forms 构建的表单。

5. 表单验证

easydev_forms 也支持表单验证。你可以为每个表单字段添加验证逻辑。

EasyDevTextField(
  label: 'Email',
  hintText: 'Enter your email',
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your email';
    }
    if (!value.contains('@')) {
      return 'Please enter a valid email';
    }
    return null;
  },
  onChanged: (value) {
    print('Email: $value');
  },
),

6. 表单提交

你可以在 EasyDevButton 的 onPressed 回调中处理表单的提交逻辑，并检查表单是否有效。

EasyDevButton(
  text: 'Submit',
  onPressed: () {
    if (_formKey.currentState!.validate()) {
      // Form is valid, proceed with submission
      print('Form submitted');
    }
  },
),

7. 使用 FormKey

为了管理表单的状态和验证，你可以使用 GlobalKey<FormState>。

class MyForm extends StatefulWidget {
  [@override](/user/override)
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EasyDev Form Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: EasyDevForm(
            children: [
              EasyDevTextField(
                label: 'Username',
                hintText: 'Enter your username',
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your username';
                  }
                  return null;
                },
                onChanged: (value) {
                  print('Username: $value');
                },
              ),
              SizedBox(height: 16),
              EasyDevTextField(
                label: 'Password',
                hintText: 'Enter your password',
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your password';
                  }
                  return null;
                },
                onChanged: (value) {
                  print('Password: $value');
                },
              ),
              SizedBox(height: 16),
              EasyDevSwitch(
                label: 'Remember me',
                value: false,
                onChanged: (value) {
                  print('Remember me: $value');
                },
              ),
              SizedBox(height: 16),
              EasyDevButton(
                text: 'Submit',
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // Form is valid, proceed with submission
                    print('Form submitted');
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！