Flutter列表文本输入插件listtextfield的使用

Flutter 列表文本输入插件 ListTextField 的使用

特性

可以在输入时创建列表的文本字段。
提供了一个可以与其他文本字段配合使用的控制器，以便进行更多的自定义操作。
可以通过普通退格键从列表中删除项目。

获取开始

在你的 pubspec.yaml 文件中添加包依赖：

dependencies:
  listtextfield: any

在你的项目文件中导入包：

import 'package:listtextfield/listtextfield.dart';

使用方法

首先，创建一个 ListTextEditingController，并指定用户应使用的列表分隔符：

final _controller = ListTextEditingController(',');

你也可以初始化控制器并带上一些初始项：

final _controller = ListTextEditingController(',', {'InitialItem1', 'InitialItem2'});

然后，在你的 widget 树中添加一个 ListTextField 小部件，并提供控制器：

Widget build(BuildContext context){
    return Column(
        children: [
            ListTextField(
                controller: _controller, 
                itemBuilder: (ctx, item){
                    // 构建列表项的外观
                    return Chip(
                      label: Text(item), // 显示列表项的文本
                      onDeleted: () => _controller.removeItem(item), // 删除列表项
                    );
                }
            ),
        ],
    );
}

你可以通过调用控制器上的 items 方法来访问已输入的列表：

final myItems = _controller.items;

完整示例代码

以下是一个完整的示例代码，展示了如何使用 ListTextField：

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'ListTextField Demo',
      home: ListTextFieldDemo(),
    );
  }
}

class ListTextFieldDemo extends StatefulWidget {
  const ListTextFieldDemo({super.key});

  @override
  State<ListTextFieldDemo> createState() => _ListTextFieldDemoState();
}

class _ListTextFieldDemoState extends State<ListTextFieldDemo> {
  final _controller = ListTextEditingController(',');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('List Text Field')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Email addresses'),
            ListTextField(
              controller: _controller,
              itemBuilder: (_, value) {
                return Chip(
                  label: Text(value),
                  onDeleted: () => _controller.removeItem(value),
                );
              },
              itemSpacing: 8, // 项之间的间距
              itemLineSpacing: 4, // 行之间的间距
              validator: (value) {
                final emailValid = RegExp(
                        r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
                    .hasMatch(value);
                if (emailValid) {
                  return null;
                } else {
                  return 'Enter a valid email address';
                }
              },
              decoration:
                  const BoxDecoration(border: Border(bottom: BorderSide())),
            ),
          ],
        ),
      ),
    );
  }
}

额外信息

欢迎提交 PR。
如果发现任何问题，请报告它。
如果你觉得这个包有用或有趣，请给它点赞或在 GitHub 上打上星标。

MajorE 🤖

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

itying888 1楼

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

在 Flutter 中，ListTextField 并不是一个官方的 Flutter 插件或组件。不过，你可以通过组合 Flutter 的基础组件来实现类似的功能。ListTextField 的概念通常是指在一个列表中，每个列表项都包含一个 TextField，用户可以分别输入内容。

以下是一个简单的示例，展示了如何实现一个包含多个 TextField 的列表：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('List of TextFields'),
        ),
        body: ListTextFieldExample(),
      ),
    );
  }
}

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

class _ListTextFieldExampleState extends State<ListTextFieldExample> {
  // 用于存储每个 TextField 的输入值
  List<String> textValues = List.filled(5, ''); // 假设有5个 TextField

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: textValues.length,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            decoration: InputDecoration(
              labelText: 'Item ${index + 1}',
              border: OutlineInputBorder(),
            ),
            onChanged: (value) {
              setState(() {
                textValues[index] = value;
              });
            },
          ),
        );
      },
    );
  }
}

代码说明：

textValues 列表：用于存储每个 TextField 的输入值。初始化时，我们创建了一个包含 5 个空字符串的列表。
ListView.builder：用于动态生成包含 TextField 的列表项。
TextField：每个列表项都包含一个 TextField。onChanged 回调用于在用户输入时更新 textValues 列表中的相应值。
setState：在 onChanged 回调中调用 setState，以便在用户输入时更新 UI。

扩展功能：

动态添加/删除项：你可以通过添加按钮来动态添加或删除 TextField 项。
表单验证：你可以为每个 TextField 添加验证逻辑，确保用户输入的内容符合要求。
保存数据：你可以在某个按钮的 onPressed 回调中处理 textValues 列表中的数据，例如保存到数据库或发送到服务器。

示例：动态添加项

class _ListTextFieldExampleState extends State<ListTextFieldExample> {
  List<String> textValues = [''];
  final TextEditingController _controller = TextEditingController();

  void _addTextField() {
    setState(() {
      textValues.add('');
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: textValues.length,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextField(
                  controller: _controller,
                  decoration: InputDecoration(
                    labelText: 'Item ${index + 1}',
                    border: OutlineInputBorder(),
                  ),
                  onChanged: (value) {
                    setState(() {
                      textValues[index] = value;
                    });
                  },
                ),
              );
            },
          ),
        ),
        ElevatedButton(
          onPressed: _addTextField,
          child: Text('Add Item'),
        ),
      ],
    );
  }
}