Flutter中如何复用单个按钮向不同TextField输入数字

核心解决方案 #

• 通过FocusNode监听每个TextField的焦点状态，实时记录当前处于激活状态的TextEditingController
• 按钮点击时，直接操作当前激活的控制器完成文本插入

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 输入框控制器
  final TextEditingController mc = TextEditingController();
  final TextEditingController mc2 = TextEditingController();
  
  // 焦点节点，用于监听输入框激活状态
  final FocusNode _focusNode1 = FocusNode();
  final FocusNode _focusNode2 = FocusNode();
  
  // 记录当前激活的输入框控制器
  TextEditingController? _activeController;

  @override
  void initState() {
    super.initState();
    // 给焦点节点添加监听，更新当前激活的控制器
    _focusNode1.addListener(() {
      if (_focusNode1.hasFocus) {
        setState(() {
          _activeController = mc;
        });
      }
    });
    
    _focusNode2.addListener(() {
      if (_focusNode2.hasFocus) {
        setState(() {
          _activeController = mc2;
        });
      }
    });
  }

  @override
  void dispose() {
    // 释放资源，避免内存泄漏
    mc.dispose();
    mc2.dispose();
    _focusNode1.dispose();
    _focusNode2.dispose();
    super.dispose();
  }

  void clickButton() {
    // 仅当有激活的输入框时执行插入操作
    if (_activeController != null) {
      // 这里是在现有文本后追加9，若要替换现有内容可改为：_activeController!.text = '9';
      _activeController!.text += '9';
    }
  }

  @override
  Widget build(BuildContext context) {
    final Widget space = SizedBox(height: 10);
    final Widget myinput = TextField(
      controller: mc,
      focusNode: _focusNode1,
      keyboardType: TextInputType.number,
      decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Number'
      ),
    );
    final Widget myinput2 = TextField(
      controller: mc2,
      focusNode: _focusNode2,
      keyboardType: TextInputType.number,
      decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Number'
      ),
    );
    final Widget btn1 = ElevatedButton(
      onPressed: clickButton,
      child: const Text('9')
    );

    return MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: SingleChildScrollView(
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              myinput,
              space,
              myinput2,
              space,
              btn1,
            ],
          ),
        ),
      ),
    );
  }
}

关键代码说明 #

1. 焦点监听：给每个TextField绑定FocusNode，并通过addListener监听焦点变化，当输入框获取焦点时，将对应的TextEditingController赋值给_activeController
2. 按钮逻辑：点击按钮时，判断_activeController不为空，就执行文本插入操作（这里是追加'9'，如果需要替换现有内容，直接赋值_activeController!.text = '9'即可）
3. 资源释放：在dispose方法中释放所有TextEditingController和FocusNode，避免内存泄漏
4. UI优化：调整了间距和布局，让界面更整洁

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