Flutter中实现可点击修改变量的TextWidget方法求助

直接给你完整的实现代码，核心是用StatefulWidget管理状态，通过InkWell给文本添加点击事件，弹出带输入框的对话框完成数值修改：

import 'package:flutter/material.dart';
import 'package:flutter/services.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 QuantityEditor(),
      ),
    );
  }
}

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

  @override
  State<QuantityEditor> createState() => _QuantityEditorState();
}

class _QuantityEditorState extends State<QuantityEditor> {
  int qty = 1;
  final TextEditingController _controller = TextEditingController();

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

  void _showEditDialog() {
    _controller.text = qty.toString();
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text("修改数量"),
        content: TextField(
          controller: _controller,
          keyboardType: TextInputType.number,
          decoration: const InputDecoration(hintText: "请输入数字"),
          inputFormatters: [FilteringTextInputFormatter.digitsOnly],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text("取消"),
          ),
          TextButton(
            onPressed: () {
              if (_controller.text.isNotEmpty) {
                setState(() {
                  qty = int.parse(_controller.text);
                });
              }
              Navigator.pop(context);
            },
            child: const Text("确认"),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          InkWell(
            onTap: _showEditDialog,
            child: Text(
              "$qty",
              style: const TextStyle(
                fontSize: 24,
                color: Colors.blue,
                decoration: TextDecoration.underline,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键细节说明： #

• 用StatefulWidget实现状态更新：只有状态类能调用setState刷新UI，更新qty后文本会自动同步
• InkWell实现点击交互：自带Material风格的水波纹效果，比GestureDetector更贴合设计规范
• 输入限制与验证：通过FilteringTextInputFormatter.digitsOnly确保只能输入整数，避免字符串转数字时出现异常
• 控制器复用：TextEditingController负责在打开对话框时填充当前数值，同时获取用户输入的新值

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