Flutter如何实现点击按钮将值显示到TextField输入框

核心逻辑是通过文本控制器统一管理输入框内容，给自定义拨号按钮增加点击回调，点击时将对应字符追加到输入内容末尾，实现和原生系统拨号盘一致的交互。

具体修改步骤 #

1. 改造自定义拨号按钮组件 #

首先修改button.dart中的Elevetedbutton组件，新增点击回调参数，让父组件可以传入按钮点击后的处理逻辑：

import 'package:flutter/material.dart';

class Elevetedbutton extends StatelessWidget {
  final String text1;
  final String text2;
  // 新增点击回调属性
  final VoidCallback? onTap;
  const Elevetedbutton({Key? key, required this.text1, required this.text2, this.onTap})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      // 绑定传入的点击事件
      onPressed: onTap,
      style: ElevatedButton.styleFrom(
        primary: Colors.grey,
        fixedSize: const Size(80, 80),
        shape: const CircleBorder(),
        surfaceTintColor: Colors.grey,
      ),
      child: Column(
        children: [
          const Padding(padding: EdgeInsets.all(3)),
          Text(
            text1,
            style: const TextStyle(fontSize: 30),
          ),
          Text(text2),
        ],
      ),
    );
  }
}

2. 改造拨号键盘主页面 #

修改keypad.dart中的_KeypadState类，完成输入控制、事件绑定、原有bug修复：

• 第一步：新增输入框控制器，在页面销毁时释放资源避免内存泄漏，同时修复原代码递归嵌套问题

class _KeypadState extends State<Keypad> {
  int currentindex = 3;
  // 新增拨号输入框控制器
  final TextEditingController _phoneController = TextEditingController();

  final screens = [
    const Favorites(),
    const Recents(),
    const Contacts(),
    // 修复原代码递归bug：原写法const Keypad()会无限嵌套当前页面，用空组件占位即可
    const SizedBox(),
    const Voicemail()
  ];

  @override
  void dispose() {
    // 页面销毁时释放控制器
    _phoneController.dispose();
    super.dispose();
  }

  // 后续build逻辑按下面说明修改即可

• 第二步：修改顶部输入框组件，去掉const修饰，绑定控制器、设置为只读防止弹出系统键盘：

TextField(
  controller: _phoneController,
  readOnly: true,
  textAlign: TextAlign.center,
  decoration: const InputDecoration(
    border: InputBorder.none,
  ),
),

• 第三步：给所有拨号按钮绑定点击事件，点击时将对应字符追加到输入框末尾，同时保持光标在文本最末端，和原生体验一致。以数字1按钮为例：

Elevetedbutton(
  text1: "1",
  text2: "",
  onTap: () {
    final currentText = _phoneController.text;
    _phoneController.value = TextEditingValue(
      text: currentText + "1",
      // 光标定位到追加后的文本末尾
      selection: TextSelection.collapsed(offset: currentText.length + 1),
    );
  },
),

所有12个拨号键（1-9、、0、#）都按照上述格式添加onTap回调即可，追加的字符和按钮自身的text1值保持一致。*

可选功能扩展 #

• 退格删除：可以在输入框右侧添加退格按钮，点击时删除最后一位输入内容，参考逻辑：

// 退格按钮点击逻辑
if (_phoneController.text.isNotEmpty) {
  final currentText = _phoneController.text;
  _phoneController.value = TextEditingValue(
    text: currentText.substring(0, currentText.length - 1),
    selection: TextSelection.collapsed(offset: currentText.length - 1),
  );
}

• 拨号逻辑：绿色呼叫按钮的onPressed回调中，可以直接通过_phoneController.text获取用户输入的完整号码，对接系统呼叫能力即可。
• 长按0输入+：可以给0按钮额外增加长按回调，长按时追加+字符，符合原生拨号盘的交互习惯。

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