Flutter中如何通过带onChanged回调的TextField获取用户输入整数值

你当前使用的Text是纯展示组件，不支持用户输入，将其替换为TextField组件并做简单配置即可复用现有onChangedLength回调，实现滑块、文本框双向联动的效果。

• 替换Text为TextField，指定数字键盘，限制仅可输入整数
• 输入内容校验：仅当输入内容为合法的目标区间整数时，调用onChangedLength更新数值
• 配置样式保持和原有UI一致

// 需先导入依赖才能使用输入限制工具类
import 'package:flutter/services.dart';

//Build Length Box.
Widget buildLength() => buildHeader(
  header: 'House Length: ',
  child: Row(
    children: [
      Expanded(
        flex: 1,
        // 替换原Text为TextField
        child: TextField(
          controller: TextEditingController(text: length.toString()),
          // 自动唤起数字键盘
          keyboardType: TextInputType.number,
          // 限制仅可输入整数，过滤所有非数字字符
          inputFormatters: [FilteringTextInputFormatter.digitsOnly],
          style: const TextStyle(color: Colors.white),
          // 去掉默认输入下划线，和原Text样式保持一致
          decoration: const InputDecoration(
            border: InputBorder.none,
            isDense: true,
          ),
          textAlign: TextAlign.center,
          onChanged: (value) {
            // 校验输入合法性
            final inputNum = int.tryParse(value);
            // 输入为合法整数且在滑块取值区间内时，复用现有回调更新数值
            if (inputNum != null && inputNum >= 0 && inputNum <= 100) {
              onChangedLength(inputNum);
            }
          },
        ),
      ),
      Expanded(
        flex: 9,
        child: Slider(
          label: length.toString(),
          value: (length ?? 0).toDouble(),
          min: 0,
          max: 100,
          divisions: 100,
          onChanged: (length) => onChangedLength(length.toInt()),
        ),
      ),
    ],
  ),
);

如果需要支持输入超出0-100的数值，直接删除校验逻辑里的inputNum >= 0 && inputNum <= 100判断即可。滑块拖动更新length后，TextField会自动同步显示最新数值，不需要额外编写联动逻辑。

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