Flutter中通过单选按钮切换TextField的keyboardType问题求助

原代码的核心问题 #

• RadioListTile的value和groupValue配置错误：两个单选按钮的value都设为_value，groupValue用numberClick ?? _value，导致单选状态无法正确切换，进而numberClick的状态更新异常。
• 切换keyboardType后，TextField未重新获取焦点，键盘不会自动切换类型。

可行代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<KeyboardTypeSwitchDemo> createState() => _KeyboardTypeSwitchDemoState();
}

class _KeyboardTypeSwitchDemoState extends State<KeyboardTypeSwitchDemo> {
  // 标记当前选中类型：true=数字，false=邮箱
  bool _isNumberSelected = true;
  // 控制TextField焦点，切换键盘时重新获取焦点
  final FocusNode _textFocusNode = FocusNode();
  // 管理输入框内容
  final TextEditingController _textController = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("键盘类型切换Demo")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            RadioListTile<bool>(
              title: const Text("数字"),
              value: true,
              groupValue: _isNumberSelected,
              onChanged: (bool? value) {
                if (value != null) {
                  setState(() {
                    _isNumberSelected = value;
                  });
                  // 切换后重新获取焦点，触发键盘更新
                  _textFocusNode.requestFocus();
                }
              },
            ),
            RadioListTile<bool>(
              title: const Text("邮箱"),
              value: false,
              groupValue: _isNumberSelected,
              onChanged: (bool? value) {
                if (value != null) {
                  setState(() {
                    _isNumberSelected = value;
                  });
                  // 切换后重新获取焦点，触发键盘更新
                  _textFocusNode.requestFocus();
                }
              },
            ),
            const SizedBox(height: 20),
            TextField(
              controller: _textController,
              focusNode: _textFocusNode,
              keyboardType: _isNumberSelected 
                  ? TextInputType.number 
                  : TextInputType.emailAddress,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                hintText: "请输入内容",
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

• 用_isNumberSelected作为单选按钮的groupValue，两个单选的value分别设为true和false，确保单选状态正确切换。
• 添加FocusNode，切换单选按钮后调用requestFocus()，强制TextField重新获取焦点，触发键盘类型更新。
• 增加TextEditingController管理输入内容，并在dispose中释放资源，避免内存泄漏。

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