Flutter实现笔记卡片文本编辑：点击Edit Text Button修改内容

要实现点击编辑按钮修改笔记文本的功能，你需要将当前的StatelessWidget改为StatefulWidget来维护编辑状态，同时添加输入控件和状态切换逻辑，具体实现如下：

核心修改点 #

• 将PatientNotesTile从StatelessWidget改为StatefulWidget，用于管理编辑状态与输入内容
• 添加状态变量控制编辑模式、管理输入文本
• 根据编辑状态切换显示普通文本或输入框
• 添加回调函数将修改后的文本传递给父组件（因为原组件的文本是外部传入的）

修改后的完整代码 #

import 'package:flutter/material.dart';

class PatientNotesTile extends StatefulWidget {
  final String date;
  final String text;
  // 回调函数：将修改后的文本传递给父组件更新数据源
  final ValueChanged<String>? onTextChanged;

  const PatientNotesTile({
    super.key,
    required this.date,
    required this.text,
    this.onTextChanged,
  });

  @override
  State<PatientNotesTile> createState() => _PatientNotesTileState();
}

class _PatientNotesTileState extends State<PatientNotesTile> {
  bool _isEditing = false;
  late TextEditingController _textController;

  @override
  void initState() {
    super.initState();
    // 初始化输入控制器，加载初始文本
    _textController = TextEditingController(text: widget.text);
  }

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

  // 完成编辑的逻辑：退出编辑模式并传递新文本
  void _finishEditing() {
    setState(() {
      _isEditing = false;
    });
    widget.onTextChanged?.call(_textController.text);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.deepPurple.shade300.withOpacity(0.4),
        borderRadius: BorderRadius.circular(15),
      ),
      child: ListTile(
        title: Padding(
          padding: const EdgeInsets.only(bottom: 5.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                widget.date,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15.0,
                    color: Colors.deepPurple.shade100),
              ),
              // 根据编辑状态切换按钮图标与逻辑
              IconButton(
                icon: Icon(
                  _isEditing ? Icons.check : Icons.edit,
                  color: Colors.deepPurple.shade100,
                ),
                onPressed: () {
                  if (_isEditing) {
                    _finishEditing();
                  } else {
                    setState(() {
                      _isEditing = true;
                    });
                  }
                },
              ),
            ],
          ),
        ),
        subtitle: Padding(
          padding: const EdgeInsets.only(bottom: 15.0),
          child: _isEditing
              ? TextField(
                  controller: _textController,
                  style: const TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18.0,
                      color: Colors.white),
                  decoration: const InputDecoration(border: InputBorder.none),
                  autofocus: true,
                  // 按下回车完成编辑
                  onSubmitted: (_) => _finishEditing(),
                )
              : Text(
                  widget.text,
                  style: const TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18.0,
                      color: Colors.white),
                ),
        ),
      ),
    );
  }
}

父组件使用示例 #

在父组件中，你需要通过onTextChanged回调更新数据源，确保修改后的文本能被持久化：

// 假设父组件中有一个笔记列表notes
PatientNotesTile(
  date: "2024-05-20",
  text: notes[index].text,
  onTextChanged: (newText) {
    setState(() {
      // 更新列表中的对应笔记内容
      notes[index] = notes[index].copyWith(text: newText);
    });
  },
)

内容的提问来源于stack exchange，提问作者Jeff Barra