Flutter增强文本输入插件enhanced_text_field的使用

enhanced_text_field

enhanced_text_field 提供了一个带有确认和取消按钮的增强型文本输入框，并且可以指示字段是否已从初始值发生变化。它有助于表单编辑和跟踪及显示已更改的字段。

安装

此包尚未在 pub.dev 上发布。要使用此包，请将其添加到您的 pubspec.yaml 文件中：

dependencies:
  enhanced_text_field:
    git:
      url: https://github.com/cybex-dev/enhanced_text_field.git
      ref: master

运行 flutter pub get 来安装依赖。

使用入门

导入

import 'package:enhanced_text_field/enhanced_text_field.dart';

这是一个（大部分）可以直接替代标准 TextField 小部件的增强版。它提供了与标准 TextField 类似的功能，同时增加了额外的功能。

示例

EnhancedTextField<String>(
    initialValue: "Initial Value",
    controller: TextEditingController(),
    focusNode: FocusNode(),
    valueMapper: ValueMapper.string,
);

特性

• 替换标准 TextField 小部件：它是标准 TextField 的增强版本。
• 指示字段变化：通过 didChange 属性显示字段是否已更改。
• 接受/拒绝字段更改：通过 Future<bool> 回调来处理字段更改。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 enhanced_text_field 插件。

示例代码

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:async';

import 'package:enhanced_text_field/enhanced_text_field.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Enhanced Text Field Example'),
        ),
        body: Column(
          children: [
            Segment(
              title: "简单文本输入",
              child: _BasicInputWidget(
                initial: "初始输入值",
                focusNode: FocusNode(),
              ),
            ),
            const SizedBox(height: 16),
            Segment(
              title: "日期输入",
              child: _DateInputWidget(
                initial: DateTime.now(),
                focusNode: FocusNode(),
              ),
            ),
            const SizedBox(height: 16),
          ],
        ),
      ),
    );
  }
}

class Segment extends StatelessWidget {
  final String title;
  final Widget child;

  const Segment({Key? key, required this.title, required this.child}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Text(title, style: Theme.of(context).textTheme.titleMedium),
            const Divider(),
            child,
          ],
        ),
      ),
    );
  }
}

class _BasicInputWidget extends StatefulWidget {
  final FocusNode focusNode;
  final String initial;

  const _BasicInputWidget({Key? key, required this.initial, required this.focusNode}) : super(key: key);

  [@override](/user/override)
  State<_BasicInputWidget> createState() => _BasicInputWidgetState();
}

class _BasicInputWidgetState extends State<_BasicInputWidget> {
  String? current;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EnhancedTextField<String>(
      initialValue: 'Initial',
      value: current,
      focusNode: widget.focusNode,
      onNewValueProposed: (updated, initial) async {
        if (kDebugMode) {
          print("新值提议: $updated");
        }
        return showAcceptNewValueDialog(context, updated, initial).then((value) {
          if (value == true) {
            if (kDebugMode) {
              print("新值已接受: $updated");
            }
            return true;
          } else {
            if (kDebugMode) {
              print("新值被拒绝，继续编辑");
            }
            return false;
          }
        });
      },
      valueMapper: ValueMapper.string,
      onValueChanged: (value) {
        if (kDebugMode) {
          print("文本框的新值已更改为: $value");
        }
        setState(() {
          current = value;
        });
      },
    );
  }
}

class _DateInputWidget extends StatefulWidget {
  final FocusNode focusNode;
  final DateTime initial;

  const _DateInputWidget({Key? key, required this.focusNode, required this.initial}) : super(key: key);

  [@override](/user/override)
  State<_DateInputWidget> createState() => _DateInputWidgetState();
}

class _DateInputWidgetState extends State<_DateInputWidget> {
  DateTime? current;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EnhancedTextField<DateTime>(
      initialValue: widget.initial,
      value: current,
      focusNode: widget.focusNode,
      onNewValueProposed: (updated, initial) async {
        if (kDebugMode) {
          print("新值提议: $updated");
        }
        return showAcceptNewValueDialog(context, updated.toString(), initial.toString()).then((value) {
          if (value == true) {
            if (kDebugMode) {
              print("新值已接受: $updated");
            }
            return true;
          } else {
            if (kDebugMode) {
              print("新值被拒绝，继续编辑");
            }
            return false;
          }
        });
      },
      valueMapper: ValueMapper.dateTime,
      onTap: () {
        showDatePicker(
          context: context,
          initialDate: current ?? widget.initial,
          firstDate: DateTime(1900),
          lastDate: DateTime(2100),
        ).then((value) {
          if (value != null) {
            setState(() {
              current = value;
            });
          }
        });
      },
      onValueChanged: (value) {
        if (kDebugMode) {
          print("文本框的新值已更改为: ${value.toString()}");
        }
        setState(() {
          current = value;
        });
      },
    );
  }
}

Future<bool?> showAcceptNewValueDialog<T>(BuildContext context, String newValue, String initialValue) async {
  return showDialog<bool>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text('接受新值？'),
        content: Text('新值: $newValue'),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(false);
            },
            child: const Text('否'),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(true);
            },
            child: const Text('是'),
          ),
        ],
      );
    },
  );
}