Flutter列表字段插件simple_dart_list_field的使用

在Flutter开发中，有时我们需要处理动态表单或需要用户输入多条数据的场景。simple_dart_list_field 是一个非常实用的插件，用于轻松创建可添加、删除和编辑项目的列表字段。

以下是如何使用 simple_dart_list_field 插件的完整示例：

步骤 1: 添加依赖

首先，在 pubspec.yaml 文件中添加 simple_dart_list_field 依赖：

dependencies:
  simple_dart_list_field: ^1.0.0

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

步骤 2: 创建示例项目

我们将创建一个简单的表单，允许用户添加多个地址信息。

示例代码

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

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

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

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

class _ListFieldExampleState extends State<ListFieldExample> {
  // 模拟数据
  final List<Map<String, dynamic>> addresses = [
    {"street": "街道1", "city": "城市1"},
    {"street": "街道2", "city": "城市2"},
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          Text(
            "请输入您的地址信息",
            style: TextStyle(fontSize: 18),
          ),
          SizedBox(height: 16),
          SimpleDartListField(
            items: addresses,
            itemBuilder: (context, index, item) {
              return ListTile(
                title: TextFormField(
                  initialValue: item["street"],
                  decoration: InputDecoration(labelText: "街道"),
                  onChanged: (value) {
                    setState(() {
                      addresses[index]["street"] = value;
                    });
                  },
                ),
                subtitle: TextFormField(
                  initialValue: item["city"],
                  decoration: InputDecoration(labelText: "城市"),
                  onChanged: (value) {
                    setState(() {
                      addresses[index]["city"] = value;
                    });
                  },
                ),
                trailing: IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () {
                    setState(() {
                      addresses.removeAt(index);
                    });
                  },
                ),
              );
            },
            onAddButtonPressed: () {
              setState(() {
                addresses.add({"street": "", "city": ""});
              });
            },
          ),
          ElevatedButton(
            onPressed: () {
              print("保存的数据: $addresses");
            },
            child: Text("保存"),
          )
        ],
      ),
    );
  }
}