flultter 删除数组数据引发的bug

现象

删除第一条数据后，结果应显示22的这条数据，结果却显示的还是11

解决方法

给控件加key: UniqueKey()就可以解决

代码如下：

Column(
  children: workList.asMap().entries.map((entry) {
    int index = entry.key;
    Map item = entry.value;
    return Column(
      key: UniqueKey(),
      children: [
        workList.length == 1
            ? SizedBox.shrink()
            : Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  GestureDetector(
                    child: Container(
                      padding: EdgeInsets.fromLTRB(10, 10, 16, 0),
                      child: Icon(
                        Icons.delete,
                        color: Colors.red,
                      ),
                    ),
                    onTap: () {
                      setState(() {
                        workList.removeAt(index);
                      });
                    },
                  ),
                ],
              ),
        // formItemWidget：自己封装的一个表单项控件
        formItemWidget('单位名称', 'input', 'workUnit',
            objList: workList, index: index),
        formItemWidget('岗位', 'input', 'title',
            objList: workList, index: index),
        formItemWidget('开始时间', 'inputDate', 'startTime',
            objList: workList, index: index),
        formItemWidget('结束时间', 'inputDate', 'endTime',
            objList: workList, index: index),
        formItemWidget('薪资', 'input', 'finalSalary',
            objList: workList, index: index, dataType: 'num'),
        Container(
          padding: EdgeInsets.fromLTRB(16, 14, 16, 14),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '离职原因',
              ),
              SizedBox(
                height: 14,
              ),
              Container(
                color: Color.fromRGBO(246, 246, 246, 1),
                child: Input(
                  '',
                  '请输入',
                  maxLines: 3,
                  initialValue: workList[index]['resignationReason'],
                  border: Border.all(color: Colors.transparent),
                  onChanged: (val) {
                    setState(() {
                      workList[index]['resignationReason'] = val;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }).toList(),
),

引发新的问题，加了key: UniqueKey()后，输入框获取焦点后，键盘会自动收起

因为是初学，技术不精，不知道有什么好的办法处理，于是开始了曲线救国，动态给控件加key: UniqueKey()来解决

思路是：

1、设置变量isClick，标记是否点击了删除icon按钮，如果点击了，isClick设为true，则添加key: UniqueKey()，否则不添加
2、当点击删除icon按钮，将isClick设为true后，延迟100毫秒，再将isClick设为false即可解决问题

代码如下：

// 是否点击了删除icon
// 目的是为了动态的给控件加key: UniqueKey()（加key: UniqueKey()是为了解决，数组做删除时，内容显示不对的bug），由于加了key: UniqueKey()后，输入框获取焦点后，会自动收起，所以需要加isClick来动态添加key
bool isClick = false;

// 设置isClick的值，延迟执行isClick = false操作，不延迟执行的话，输入框获取焦点后，会自动收起（加了key: UniqueKey()，后就会出现自动收起的情况）
setIsClickFunc() async {
  setState(() {
    isClick = true;
  });
  await Future.delayed(Duration(milliseconds: 100));
  setState(() {
    isClick = false;
  });
}

Column(
  children: workList.asMap().entries.map((entry) {
    int index = entry.key;
    Map item = entry.value;
    return Column(
      key: isClick ? UniqueKey() : null,
      children: [
        workList.length == 1
            ? SizedBox.shrink()
            : Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  GestureDetector(
                    child: Container(
                      padding: EdgeInsets.fromLTRB(10, 10, 16, 0),
                      child: Icon(
                        Icons.delete,
                        color: Colors.red,
                      ),
                    ),
                    onTap: () {
					  // 设置isClick的值
					  setIsClickFunc();
                      setState(() {
                        workList.removeAt(index);
                      });
                    },
                  ),
                ],
              ),
        formItemWidget('单位名称', 'input', 'workUnit',
            objList: workList, index: index),
        formItemWidget('岗位', 'input', 'title',
            objList: workList, index: index),
        formItemWidget('开始时间', 'inputDate', 'startTime',
            objList: workList, index: index),
        formItemWidget('结束时间', 'inputDate', 'endTime',
            objList: workList, index: index),
        formItemWidget('薪资', 'input', 'finalSalary',
            objList: workList, index: index, dataType: 'num'),
        Container(
          padding: EdgeInsets.fromLTRB(16, 14, 16, 14),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '离职原因',
              ),
              SizedBox(
                height: 14,
              ),
              Container(
                color: Color.fromRGBO(246, 246, 246, 1),
                child: Input(
                  '',
                  '请输入',
                  maxLines: 3,
                  initialValue: workList[index]['resignationReason'],
                  border: Border.all(color: Colors.transparent),
                  onChanged: (val) {
                    setState(() {
                      workList[index]['resignationReason'] = val;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }).toList(),
),