可编辑的文本字段（删除/添加）答案

【问题标题】：Editable TextFields (Remove/Add)可编辑的文本字段（删除/添加）
【发布时间】：2020-05-09 14:19:16
【问题描述】：

故事用户应该能够添加新的文本字段，如果他在其他时间打开应用程序将被保存。他还应该能够从视图中删除文本字段。

问题我能够实现一个创建文本字段的按钮，但如果他再次打开屏幕，我不知道如何“保存”它们。我还实现了一个“删除按钮”，但我不知道如何从视图中删除文本字段。

不要注意文本字段的输入。稍后我将使用 SharedPreferences 或 json 文件保存它。

import 'package:flutter/material.dart';

class Test extends StatefulWidget
{
@override
_TestState createState() => _TestState();
}

class _TestState extends State<Test> with SingleTickerProviderStateMixin 
{

List<Widget> _phoneWidgets = List<Widget>();

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
   appBar: AppBar
  (
    automaticallyImplyLeading: true,
    backgroundColor: Colors.white,
    leading: IconButton(icon:Icon(Icons.arrow_back, color: Colors.black),
      onPressed:() { Navigator.pop(context, false);}),
              actions: <Widget> 
    [
      Container
      (
        margin: EdgeInsets.only(right: 16.0),
        child: Row
        (
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget> 
          [

          ],
        ),
      )
    ],
  ),
  floatingActionButton: FloatingActionButton(
    child: Text(
      '+',
      style: TextStyle(fontSize: 20.0),
    ),
    shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(10.0)),
    onPressed: () {
      setState(() {
        _phoneWidgets.add(Phone(
          fieldName: 'Phone',
        ));
      });
    },
  ),
  body: ListView(
      padding: EdgeInsets.symmetric(horizontal: 15, vertical: 8),
      children: <Widget>[ Column(
        children: List.generate(_phoneWidgets.length, (i) {
          return _phoneWidgets[i];
        }),
      )]),
);
 }
 @override
void dispose() {
super.dispose();
}
} 

class Phone extends StatelessWidget {
String fieldName;
Phone({this.fieldName = ''});

 @override
 Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.only(top: 8, right: 8.0),
    child: TextFormField(
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(
      contentPadding:
          EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(10.0),
        ),
        borderSide: BorderSide(color: Colors.white, width: 0.1),
      ),
      filled: true,
      suffixIcon: IconButton(
      icon: Icon(Icons.delete),
       onPressed: () { 
                    debugPrint('222');
                  }),
      icon: Icon(
        Icons.phone,
        color: Colors.black,
        size: 20.0,
      ),
      labelText: fieldName,
      labelStyle: TextStyle(
          fontSize: 15.0,
          height: 1.5,
          color: Color.fromRGBO(61, 61, 61, 1)),
      fillColor: Color(0xffD2E8E6),
    ),
    maxLines: 1,
  ),
);
}
}

【问题讨论】：

如果您将数据保存到 SharedPreferences 中，您不能使用它来重建字段吗？删除时只需将它们从 SharedPreferences 中删除，从您正在呈现的列表中删除它们并使用 setState 重新呈现？
我试过这种方法，我想不通。例如，我怎么知道我必须删除哪个字段才能在之后重新渲染列表。示例：用户创建 5 个文本字段并删除第三个。

标签： flutter dart textfield flutter-layout

【解决方案1】：

以下内容应该可以帮助您：保持文本字段值（字符串）列表处于状态，并构建列表视图，其中填充来自该字符串列表的文本字段。

处理删除：当您为列表中特定索引处的文本字段单击“删除”时，从您的列表中删除处于同一索引状态的字符串。然后拨打setState()。这将重新渲染列表视图。然后使用此字符串列表更新您的共享首选项条目。

处理添加：当您点击“添加”时。在字符串列表中添加一个空条目并再次设置状态。然后更新您的共享首选项条目。

在启动时重新加载列表：下次启动应用程序时，从共享首选项加载字符串列表并将其设置为您的 List 变量 tracked in state。然后从这个相同的字符串列表再次构建您的列表视图。

【讨论】：