Flutter中如何编辑ListView.builder列表项文本并更新数据源？

核心问题分析 #

你当前的ShoppingListItemTile是无状态组件，无法管理输入框的状态，而且缺少将修改后的文本同步回数据源shoppingList的回调机制，导致修改无法生效。

修改步骤及完整代码 #

1. 将ShoppingListItemTile改为有状态组件

需要维护编辑状态（是否可编辑）和临时输入文本，同时新增回调函数通知父组件更新数据源：

class ShoppingListItemTile extends StatefulWidget {
  final String text;
  final VoidCallback removeList;
  final Function(String) onTextChanged; // 新增回调，传递修改后的文本
  const ShoppingListItemTile({
    Key? key,
    required this.text,
    required this.removeList,
    required this.onTextChanged,
  }) : super(key: key);

  @override
  State<ShoppingListItemTile> createState() => _ShoppingListItemTileState();
}

class _ShoppingListItemTileState extends State<ShoppingListItemTile> {
  late bool isEditable;
  late TextEditingController _controller; // 用于控制TextField的输入

  @override
  void initState() {
    super.initState();
    isEditable = false;
    _controller = TextEditingController(text: widget.text);
  }

  @override
  void dispose() {
    _controller.dispose(); // 销毁控制器，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 24.0, right: 24, top: 16),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // 根据编辑状态切换显示Text或TextField
              isEditable
                  ? SizedBox(
                      width: MediaQuery.of(context).size.width * 0.7,
                      child: TextField(
                        controller: _controller,
                        autofocus: true,
                        onSubmitted: (value) {
                          // 提交输入时更新数据源并退出编辑模式
                          widget.onTextChanged(value);
                          setState(() {
                            isEditable = false;
                          });
                        },
                        decoration: const InputDecoration(
                          border: InputBorder.none,
                        ),
                      ),
                    )
                  : InkWell(
                      onTap: () {
                        // 点击文本进入编辑模式
                        setState(() {
                          isEditable = true;
                        });
                      },
                      child: Text(
                        widget.text,
                        style: const TextStyle(
                          fontWeight: FontWeight.w400,
                          fontSize: 17,
                        ),
                      ),
                    ),
              Row(
                children: [
                  if (isEditable)
                    InkWell(
                      onTap: () {
                        // 保存修改
                        widget.onTextChanged(_controller.text);
                        setState(() {
                          isEditable = false;
                        });
                      },
                      child: const Text("保存"),
                    ),
                  const SizedBox(width: 16),
                  InkWell(
                    onTap: widget.removeList,
                    child: const Icon(Icons.close),
                  ),
                ],
              )
            ],
          ),
          const Padding(
            padding: EdgeInsets.only(top: 8.0),
            child: Divider(),
          )
        ],
      ),
    );
  }
}

2. 更新父组件的ListView.builder

传递onTextChanged回调，用于更新shoppingList并触发UI刷新：

// 注意：确保shoppingList在State类中定义，并且更新时调用setState
ListView.builder(
  shrinkWrap: true,
  itemCount: shoppingList.length,
  itemBuilder: (context, index) {
    return ShoppingListItemTile(
      text: shoppingList[index],
      removeList: () {
        setState(() {
          shoppingList.removeAt(index);
        });
      },
      onTextChanged: (newText) {
        // 更新数据源并刷新UI
        setState(() {
          shoppingList[index] = newText;
        });
      },
    );
  },
)

关键改动说明 #

• 把无状态组件改为有状态，用TextEditingController管理输入文本
• 新增onTextChanged回调，将子组件的修改同步回父组件的shoppingList
• 实现点击文本切换编辑模式，支持提交保存修改
• 所有数据源修改后都调用setState()触发UI更新

内容的提问来源于stack exchange，提问作者Jagan Badiyar