Flutter实现带标题与编辑按钮的文本组件方案咨询

直接用StatefulWidget结合AlertDialog就能实现需求，以下是完整示例代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('可编辑文本示例')),
        body: const EditableTextWidget(),
      ),
    );
  }
}

class EditableTextWidget extends StatefulWidget {
  const EditableTextWidget({super.key});

  @override
  State<EditableTextWidget> createState() => _EditableTextWidgetState();
}

class _EditableTextWidgetState extends State<EditableTextWidget> {
  // 保存当前显示的文本
  String _displayText = "默认不可编辑文本";
  // 对话框输入框控制器
  final TextEditingController _textController = TextEditingController();

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }

  // 打开编辑对话框
  void _openEditDialog() {
    // 打开对话框前，把当前显示的文本赋值给输入框
    _textController.text = _displayText;
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('编辑文本'),
        content: TextField(
          controller: _textController,
          autofocus: true, // 打开对话框自动获取焦点
          decoration: const InputDecoration(hintText: '请输入内容'),
        ),
        actions: [
          // 取消按钮（X）
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Icon(Icons.close, color: Colors.grey),
            // 如果想用文本按钮，替换上面的Icon为：
            // child: const Text('X', style: TextStyle(color: Colors.grey)),
          ),
          // 保存按钮（O）
          TextButton(
            onPressed: () {
              // 更新显示的文本
              setState(() {
                _displayText = _textController.text;
              });
              Navigator.pop(context);
            },
            child: const Icon(Icons.check, color: Colors.blue),
            // 如果想用文本按钮，替换上面的Icon为：
            // child: const Text('O', style: TextStyle(color: Colors.blue)),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // 默认显示的不可编辑文本
          Text(
            _displayText,
            style: const TextStyle(fontSize: 16),
          ),
          // 编辑按钮
          IconButton(
            onPressed: _openEditDialog,
            icon: const Icon(Icons.edit, color: Colors.blue),
          ),
        ],
      ),
    );
  }
}

关键说明： #

• 用StatefulWidget管理文本状态，_displayText存储当前要显示的内容，点击保存后通过setState更新UI。
• 对话框里的TextField用TextEditingController控制输入内容，打开对话框时把当前文本赋值给控制器，确保编辑时显示原有内容。
• 点击取消按钮直接关闭对话框，点击保存按钮先更新显示文本再关闭对话框。
• 可以根据需求替换按钮的图标为文本（比如把Icon(Icons.check)换成Text('O')），调整样式。

内容的提问来源于stack exchange，提问作者H S park