Flutter如何在ListTile中使用TextField？

这是个很实用的需求，刚好可以用Flutter的ListTile结合TextField来实现，下面是一个完整的可复用解决方案，完全贴合你要的"点击后直接编辑"的交互：

完整可复用组件代码 #

import 'package:flutter/material.dart';

class EditableListTile extends StatefulWidget {
  final String initialText;
  final ValueChanged<String>? onTextChanged;
  final String? title;

  const EditableListTile({
    super.key,
    required this.initialText,
    this.onTextChanged,
    this.title = "编辑项",
  });

  @override
  State<EditableListTile> createState() => _EditableListTileState();
}

class _EditableListTileState extends State<EditableListTile> {
  late TextEditingController _textController;
  late FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    _textController = TextEditingController(text: widget.initialText);
    _focusNode = FocusNode();
  }

  @override
  void dispose() {
    // 记得销毁控制器和焦点节点，避免内存泄漏
    _textController.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      // 点击整个ListTile时，让TextField获取焦点进入编辑状态
      onTap: () {
        _focusNode.requestFocus();
        // 可选：自动选中全部文本，方便快速替换内容
        WidgetsBinding.instance.addPostFrameCallback((_) {
          _textController.selection = TextSelection(
            baseOffset: 0,
            extentOffset: _textController.text.length,
          );
        });
      },
      title: Text(widget.title!),
      trailing: SizedBox(
        // 固定宽度避免布局跳动，适配不同长度的文本
        width: 160,
        child: TextField(
          controller: _textController,
          focusNode: _focusNode,
          decoration: const InputDecoration(
            border: InputBorder.none,
            hintText: "请输入内容",
            alignLabelWithHint: true,
          ),
          // 实时回调编辑后的文本给父组件
          onChanged: widget.onTextChanged,
          // 编辑完成（点击键盘完成键）时失去焦点
          onEditingComplete: () => _focusNode.unfocus(),
          // 点击外部区域时也失去焦点
          onTapOutside: (_) => _focusNode.unfocus(),
        ),
      ),
    );
  }
}

// 使用示例页面
class StaticEditTablePage extends StatelessWidget {
  const StaticEditTablePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("静态编辑列表")),
      body: ListView.separated(
        itemCount: 3,
        separatorBuilder: (context, index) => const Divider(height: 1),
        itemBuilder: (context, index) {
          return EditableListTile(
            initialText: "初始内容 ${index + 1}",
            title: "项目 ${index + 1}",
            onTextChanged: (newText) {
              // 这里可以处理编辑后的文本，比如保存到变量或数据库
              debugPrint("项目${index+1}已修改为：$newText");
            },
          );
        },
      ),
    );
  }
}

关键细节说明 #

• 焦点控制：核心是FocusNode，点击ListTile时调用requestFocus()让TextField自动获取焦点弹出键盘，同时通过onEditingComplete和onTapOutside处理失去焦点的场景，让交互更流畅。
• 布局稳定性：给TextField包裹一个固定宽度的SizedBox，避免文本长度变化导致ListTile的尾部宽度跳动，更贴近iOS静态TableView的稳定视觉效果。
• 可复用性：封装成独立的EditableListTile组件，支持传入初始文本、标题和文本变化回调，方便在项目中多处使用。
• iOS风格优化：用ListView.separated配合Divider模拟iOS TableView的分隔线样式，视觉上更接近目标效果。

如果需要进一步定制，比如修改TextField的样式、调整编辑时的动画效果，都可以在组件里直接扩展~

内容的提问来源于stack exchange，提问作者Nicholas Jela