Flutter文本输入防抖插件debounced_text_form_field的使用

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

Flutter文本输入防抖插件debounced_text_form_field的使用

动机

尽管有其他防抖动包可用，但这个包基于Flutter提供的表单和验证基础构建。只需将您的TextFormField替换为DebouncedTextFormField即可。不需要额外的小部件或构建器。

debounced_field_title

示例代码

以下是一个完整的示例demo，展示了如何使用debounced_text_form_field插件：

import 'package:debounced_text_form_field/debounced_text_form_field.dart';
import 'package:flutter/material.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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Debounce Text Form Field'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(left: 16, right: 16, top: 24),
              child: DebouncedTextFormField(
                // 设置输入框的装饰
                decoration: const InputDecoration(
                  hintText: 'Enter email', // 提示文本
                  prefixIcon: Icon(Icons.mail), // 前缀图标
                ),
                // 验证函数
                validator: (value) => _mustBeValidEmail(value),
                // 可选：设置防抖动时间，默认是1秒
                debounceDuration: const Duration(milliseconds: 500),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 自定义验证函数
  String? _mustBeValidEmail(String? value) {
    if (value == null || !value.contains('@')) {
      return '请输入有效的电子邮件地址';
    }
    return null; // 返回null表示验证通过
  }
}

更多关于Flutter文本输入防抖插件debounced_text_form_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter文本输入防抖插件debounced_text_form_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用debounced_text_form_field插件的示例代码。这个插件允许你对文本输入进行防抖处理，以避免在每次用户输入时都触发更新，从而提高性能和用户体验。

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

dependencies:
  flutter:
    sdk: flutter
  debounced_text_form_field: ^x.y.z  # 请替换为最新版本号

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

接下来是一个完整的示例代码，展示如何使用debounced_text_form_field：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Debounced Text Form Field Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  String _debouncedText = '';

  void _handleDebouncedTextChanged(String text) {
    setState(() {
      _debouncedText = text;
    });
    // 在这里可以添加其他处理逻辑，比如发送网络请求等
    print('Debounced text: $text');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Debounced Text Form Field Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              DebouncedTextField(
                decoration: InputDecoration(
                  labelText: 'Enter text',
                ),
                onChanged: _handleDebouncedTextChanged,
                debounceDuration: Duration(milliseconds: 500),  // 防抖时间间隔
              ),
              SizedBox(height: 20),
              Text('Debounced Text: $_debouncedText'),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个简单的Flutter应用，包含一个表单和一个DebouncedTextField。
  2. DebouncedTextField的onChanged回调函数会在用户输入停止一段时间（在这个例子中是500毫秒）后被调用，并传入当前输入框的文本。
  3. 我们将防抖后的文本存储在_debouncedText状态变量中，并在页面上显示。

这样，你就可以使用debounced_text_form_field插件来优化文本输入的性能了。希望这个示例对你有所帮助！

回到顶部