Flutter文本处理插件flutter_textfield_util的使用

flutter_textfiled_util

flutter_textfiled_util 是一个自定义输入框组件库，可以实现 iOS 的 TextView 功能。它支持多行文本输入、滚动、最大字符限制等基本文本操作，并方便用户输入和编辑文本。

导入库到项目中

在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_textfiled_util: ^2.0.0

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

flutter pub get

如何导出对象

在 Dart 文件中导入库并使用它：

import 'package:flutter_textfiled_util/flutter_textfiled_util.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 点击按钮有高亮背景色及水波纹 都设置透明色
        highlightColor: const Color.fromRGBO(1, 0, 0, 0.0),
        splashColor: const Color.fromRGBO(1, 0, 0, 0.0),
        cardColor: const Color.fromRGBO(1, 1, 1, 0.65),
        primarySwatch: Colors.blue,
      ),
      home: const CustomTextFiledPage(),
      // home: const TextFiledPage(),
      // home: const TextViewPage(),
      // home: const LoginTextFiledPage(),
    );
  }
}

如何使用 custom_textfiled_util

CustomTextFieldInput 是一个自定义输入框，支持多行文本输入、最大字符限制等功能。

示例代码

CustomTextFieldInput(
    title: '标题',
    controller: controller, // 文本控制器
    hintText: '请输入内容', // 提示文字
    isPassword: false, // 是否为密码模式
    regexString: regexNoNull, // 正则表达式，用于验证输入
    onChanged: (text) {
        setState(() {
            // 处理输入事件
        });
    },
),

如何使用 login_textfiled_util

LoginTextFieldInput 是一个登录专用的输入框，支持焦点居中、左右按钮等功能。

示例代码

LoginTextFieldInput(
    controller: controller, // 文本控制器
    hintText: '请输入内容', // 提示文字
    isPassword: false, // 是否为密码模式
    isDownArrow: false, // 是否显示下箭头按钮
    regexString: regexNoNull, // 正则表达式，用于验证输入
    historyRecordAction: () {
        setState(() {
            // 历史记录事件处理
        });
    },
    onChanged: (text) {
        setState(() {
            // 输入事件处理
        });
    },
    closeHistoryRecordList: () {
        setState(() {
            // 关闭历史记录列表事件处理
        });
    },
),

如何使用 textfiled_util

TextFieldInput 是一个通用的输入框，支持不同状态下的样式变化。

示例代码

TextFieldInput(
    title: '标题',
    controller: controller, // 文本控制器
    hintText: '请输入内容', // 提示文字
    isError: false, // 是否错误状态
    regexString: regexNoNull, // 正则表达式，用于验证输入
    onChanged: (text) {
        setState(() {
            // 处理输入事件
        });
    },
),

如何使用 textview_util

TextViewInput 是一个可编辑的文本视图，支持自动滚动、文本格式化等功能。

示例代码

TextViewInput(
    title: '标题',
    describeHint: '这里是提示信息', // 描述性提示
    controller: controller, // 文本控制器
    hintText: '请输入内容', // 提示文字
    regexString: regexNoNull, // 正则表达式，用于验证输入
    outsideBoxH: 120, // 外部容器高度
    onChanged: (text) {
        setState(() {
            // 处理输入事件
        });
    },
),

如何使用 textinputformatter_util

TextInputFormatter 是一个自定义的文本输入过滤器。

示例代码

TextField(
    controller: widget.controller, // 文本控制器
    focusNode: _focusNode, // 聚焦节点
    decoration: InputDecoration(...), // 输入框装饰
    inputFormatters: [
        RegexFormatter(regex: RegexUtil.regexNoNull), // 自定义正则过滤器
        LengthLimitingTextInputFormatter(16), // 最大输入字符数限制
    ],
)

完整示例代码

以下是一个完整的示例代码，展示如何在 Flutter 中集成 flutter_textfield_util。

main.dart

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        highlightColor: const Color.fromRGBO(1, 0, 0, 0.0),
        splashColor: const Color.fromRGBO(1, 0, 0, 0.0),
        cardColor: const Color.fromRGBO(1, 1, 1, 0.65),
        primarySwatch: Colors.blue,
      ),
      home: const CustomTextFiledPage(),
    );
  }
}

custom_textfiled_page.dart

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

class CustomTextFiledPage extends StatefulWidget {
  const CustomTextFiledPage({Key? key}) : super(key: key);

  [@override](/user/override)
  _CustomTextFiledPageState createState() => _CustomTextFiledPageState();
}

class _CustomTextFiledPageState extends State<CustomTextFiledPage> {
  final TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('flutter_textfield_util 示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            CustomTextFieldInput(
              title: '标题',
              controller: _controller,
              hintText: '请输入内容',
              isPassword: false,
              regexString: r'.+', // 必须输入内容
              onChanged: (text) {
                print('输入内容: $text');
              },
            ),
            const SizedBox(height: 20),
            LoginTextFieldInput(
              controller: _controller,
              hintText: '登录框输入',
              isPassword: true,
              isDownArrow: true,
              regexString: r'^[a-zA-Z0-9_]+$',
              historyRecordAction: () {},
              onChanged: (text) {},
              closeHistoryRecordList: () {},
            ),
            const SizedBox(height: 20),
            TextFieldInput(
              title: '普通输入框',
              controller: _controller,
              hintText: '请输入内容',
              isError: false,
              regexString: r'.+',
              onChanged: (text) {},
            ),
            const SizedBox(height: 20),
            TextViewInput(
              title: '文本视图',
              describeHint: '描述性提示',
              controller: _controller,
              hintText: '请输入内容',
              regexString: r'.+',
              outsideBoxH: 120,
              onChanged: (text) {},
            ),
          ],
        ),
      ),
    );
  }
}